首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何将所有页面导出到MUI DataGrid中的CSV?

如何将所有页面导出到MUI DataGrid中的CSV?
EN

Stack Overflow用户
提问于 2022-05-14 12:37:22
回答 3查看 2.4K关注 0票数 1

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

我想要的是当我点击导出btn.时,能够将所有行导出到CSV。

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

有人能告诉我我做错了什么吗?

我的代码:

代码语言:javascript
运行
复制
 <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:

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-06-23 15:08:02

实际上,DataGrid没有任何问题,但是api调用被编程为每次我们更改页面时都会带来50个新用户,以防止一次将过多的数据放在前面。

为了克服这个问题,我创建了一个新按钮,它位于datagrid之外,它在单击时发出一个api调用,用于获取所有数据并使用REACT-CSV导出到CSV。

票数 0
EN

Stack Overflow用户

发布于 2022-06-21 10:09:24

如果您不做任何错误的事情,这是DataGrid的默认行为。

不过,您需要使用apiRef的DataGrid来处理这个问题。实际上,您需要告诉出口商要导出哪些行。在我在底部链接的文档中有几个选项。

代码语言:javascript
运行
复制
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

票数 1
EN

Stack Overflow用户

发布于 2022-07-22 12:16:51

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

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

代码语言:javascript
运行
复制
<GridToolbarExport
  excelOptions={{ allColumns: true }}
  csvOptions={{ allColumns: true }}
  onClick={() => {
    if (dataMode == 'server') {
      const tableState = apiRef.current.state
      updateRows(tableState, 'all')
      setDataMode('client')
    }
   }
  }
/>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72240266

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档