我有一个数据网格表从材料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:
3条答案
按热度按时间rqmkfv5c1#
您没有做错任何事情,这是DataGrid的默认行为。
不过,您需要使用DataGrid的apiRef来处理这个问题。您实际上需要告诉导出器要导出哪些行。在底部链接的文档中有几个选项。
如mui文档中的沙盒所示:https://codesandbox.io/s/0zex5c?file=/demo.tsx
文件的章节对此进行了分解:https://mui.com/x/react-data-grid/export/#exported-rows
0x6upsns2#
我使用的方法与使用服务器端分页一次加载10行相同。我的解决方案是使用
<GridToolbarExport>
组件并添加一个onClick
prop,该prop在导出之前请求并更新所有行。此外,在导出之后,为了不浪费已经从服务器端请求的大量数据,我将组件从
server
切换到client
,直到用户刷新或离开页面。更新:
我在MUIx github上为这个问题打开了一个问题,他们的建议是避免这种路线,因为它很容易导致大量数据的服务器超时。然而,如果一个人仍然坚持走这条路线,他们列出了一个解决方案。
以下是链接:https://github.com/mui/mui-x/issues/6036
mqkwyuun3#
实际上,DataGrid没有问题,* 但问题在于API调用 *,它被编程为每次更改页面时带来50个新用户,以防止在前面一次带来太多数据
为了解决这个问题,我在datagrid外部创建了一个新按钮,单击该按钮时会调用API,以获取所有数据并使用REACT-CSV库导出到CSV。