反应 mui-datatables，不能只导出选定的行答案

【问题标题】：react mui-datatables, can't export only selected rows反应 mui-datatables，不能只导出选定的行
【发布时间】：2022-10-19 12:15:22
【问题描述】：

我正在使用"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 但我不能只获得选定的行。

我怎样才能正确下载仅选定的行？

谢谢！

【问题讨论】：

标签： javascript reactjs datatables jsx mui-datatable

【解决方案1】：

下面的代码演示了如何在工具栏上下文中检索与选定行相对应的记录：

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>
  );
},

然后你可以使用创建 CSV 下载用于触发 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

【讨论】：