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

Question

我有一个使用Material UI创建的DataGrid表格，其中包含超过3000行数据，每个页面最多显示50行数据。

我希望能够在点击导出按钮时将所有行数据导出到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);
  }}
/>

网页中的DataGrid示例：

- deveb2020

Answer 1

我正在使用相同的方法，使用服务器端分页每次加载10行。我的解决方案是使用<GridToolbarExport>组件并添加一个onClick属性，在导出之前请求和更新所有行。

此外，为了不浪费已经从服务器端请求的大量数据，导出后我将组件从server切换到client，直到用户刷新或离开页面为止。

<GridToolbarExport
  excelOptions={{ allColumns: true }}
  csvOptions={{ allColumns: true }}
  onClick={() => {
    if (dataMode == 'server') {
      const tableState = apiRef.current.state
      updateRows(tableState, 'all')
      setDataMode('client')
    }
   }
  }
/>

更新：

我在MUIx的github上提出了这个问题，他们建议避免使用此路由，因为大量数据容易导致服务器超时。但是，如果仍然坚持走这条路线，他们列出了一个解决方案。

这里是链接：https://github.com/mui/mui-x/issues/6036

- Takudzwa Gwindingwi

Answer 2

您没有做错任何事情，这是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

- toinhao

Answer 3

实际上，DataGrid 没有问题，但是 API 调用存在问题，每当我们翻页时，它会按顺序获取 50 个新用户，以防止一次性传输过多数据到前端。

为解决此问题，我在 DataGrid 之外创建了一个新按钮，在单击该按钮时进行 API 调用以获取所有数据，并使用 REACT-CSV 库将其导出为 CSV。

- deveb2020

Answer 4

如果您的数据量不是很大，您可以尝试通过黑客手段来操作“每页行数”下拉菜单。这样可以加载所有数据，并在选择自定义的每页行数后切换到客户端分页模式。然后，导出功能将按预期工作。虽然这不是一个理想的解决方案，但如果您时间紧迫，这可能会起到作用。

在我的DataGrid中，我设置了一个自定义的页面大小选项，例如50，这个值是未使用的。

pageSizeOptions={[15, 25, 100, { label: 'All', value: 50 }]}
paginationMode={paginationModel.pageSize === 50 ? 'client' : 'server'}

然后，因为我们使用了GraphQL，我不得不像这样更改服务器端分页的变量：

pageSize: paginationModel.pageSize === 50 ? 100000 : paginationModel.pageSize,
page: paginationModel.pageSize === 50 ? 0 : paginationModel.page,

这导致在选择“全部”时加载了所有数据。

为了整理，我将50作为一个常数。

- muzhikas