reactjs 如何在MUI数据网格中将所有页面导出为CSV?

oogrdqng  于 2023-01-25  发布在  React
关注(0)|答案(3)|浏览(159)

我有一个数据网格表从材料UI超过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);
  }}
/>

Web示例中的DataGrid:

rqmkfv5c

rqmkfv5c1#

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

0x6upsns

0x6upsns2#

我使用的方法与使用服务器端分页一次加载10行相同。我的解决方案是使用<GridToolbarExport>组件并添加一个onClick prop,该prop在导出之前请求并更新所有行。
此外,在导出之后,为了不浪费已经从服务器端请求的大量数据,我将组件从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

mqkwyuun

mqkwyuun3#

实际上,DataGrid没有问题,* 但问题在于API调用 *,它被编程为每次更改页面时带来50个新用户,以防止在前面一次带来太多数据
为了解决这个问题,我在datagrid外部创建了一个新按钮,单击该按钮时会调用API,以获取所有数据并使用REACT-CSV库导出到CSV。

相关问题