如何在 MUI DataGrid 中将所有页面导出为 CSV？

【问题标题】：How to export all the pages to CSV in MUI DataGrid?如何在 MUI DataGrid 中将所有页面导出为 CSV？
【发布时间】：2022-06-21 18:09:24
【问题描述】：

我有一个来自 Material UI 的 DataGrid 表，其中包含超过 3000 行，每页最多包含每页 50 行。

我想要的是能够在单击导出 btn 时将所有行导出为 CSV。

实际行为：仅导出当前页面数据

谁能告诉我我做错了什么？

我的代码：

 <DataGrid
   rows={users}
   columns={columns}
   pageSize={limit}
   page={page - 1}
   rowCount={rowsCount}
  //rowsPerPageOptions={[limit]}
  pagination
  paginationMode="server"
  components={{
    Toolbar: GridToolbar,
  }}
  onPageChange={(data) => {
   updateUsers(data + 1, formSubmitted);
  }}
/>

Web 示例中的 DataGrid：

【问题讨论】：

标签： reactjs material-ui datagrid

【解决方案1】：

您没有做错任何事情，这是 DataGrid 的默认行为。

您需要使用 DataGrid 的 apiRef 来处理这个问题。您基本上需要告诉导出器要导出哪些行。我在底部链接的文档中有几个选项。

const apiRef = useGridApiRef();

 <DataGrid
   rows={users}
   apiRef={apiRef}
   columns={columns}
   pageSize={limit}
   page={page - 1}
   rowCount={rowsCount}
  //rowsPerPageOptions={[limit]}
  pagination
  paginationMode="server"
  components={{
    Toolbar: GridToolbar,
  }}
  componentsProps={{ toolbar: { csvOptions: { getRowsToExport: () => gridFilteredSortedRowIdsSelector(apiRef) } } }}

  onPageChange={(data) => {
   updateUsers(data + 1, formSubmitted);
  }}
/>

如 mui 文档中的沙盒所示：https://codesandbox.io/s/0zex5c?file=/demo.tsx

分解此的文档部分：https://mui.com/x/react-data-grid/export/#exported-rows

【讨论】：