响应mui-datatable，不能仅导出选定的行。
响应mui-datatable，不能仅导出选定的行。
提问于 2022-05-18 08:12:27
我用的是"mui-datatables": "^4.2.2",
我想知道这个库是否可以定制，可以使用，因为目前我只想导出选中的表行。
我使用了库的默认下载按钮，还添加了一个自定义按钮，仅允许下载选定的表行。
const options = {
... // other options
onDownload: (buildHead, buildBody, columns, rows) => {
console.log(rows); // <-------- can't get only selected rows
},
customToolbarSelect: (selectedRows, displayData, setSelectedRows) => {
return (
<Box mr={4}>
<Fab
variant="extended"
size="small"
color="primary"
aria-label="add"
onClick={() => console.log(displayData)} // <--- can't get selected rows
>
<FileDownloadRounded />
Exporter
</Fab>
</Box>
);
},
}我使用了一个customToolbarSelect，并试图自定义onDownload，但我不能只获得选定的行。
如何才能正确下载选定的行？
谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-19 04:15:22
下面的代码演示如何检索与工具栏上下文中选定行对应的记录：
const options = {
... // other options
onDownload: (buildHead, buildBody, columns, rows) => {
console.log(rows); // <-------- can't get only selected rows
},
customToolbarSelect: (selectedRows, displayData, setSelectedRows) => {
const handleClick = () => {
const recordsToDownload = selectedRows?.data?.map(
({ index }) => displayData[index]
).map(
({ data }) => data
);
console.log('recordsToDownload', recordsToDownload);
};
return (
<Box mr={4}>
<Fab
variant="extended"
size="small"
color="primary"
aria-label="add"
onClick={handleClick}
>
<FileDownloadRounded />
Exporter
</Fab>
</Box>
);
},然后可以使用createCSVDownload实用程序函数触发CSV文件下载过程：(https://github.com/gregnb/mui-datatables/blob/25e16b22cb146619d671fc2db8504aa98deddd0f/src/utils.js#L129)
默认工具栏中使用相同的函数：https://github.com/gregnb/mui-datatables/blob/master/src/components/TableToolbar.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72285441
复制相关文章
相似问题
腾讯云开发者
