我有一个来自Material的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:
发布于 2022-06-23 15:08:02
实际上,DataGrid没有任何问题,但是api调用被编程为每次我们更改页面时都会带来50个新用户,以防止一次将过多的数据放在前面。
为了克服这个问题,我创建了一个新按钮,它位于datagrid之外,它在单击时发出一个api调用,用于获取所有数据并使用REACT-CSV导出到CSV。
发布于 2022-06-21 10:09:24
如果您不做任何错误的事情,这是DataGrid的默认行为。
不过,您需要使用apiRef的DataGrid来处理这个问题。实际上,您需要告诉出口商要导出哪些行。在我在底部链接的文档中有几个选项。
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
发布于 2022-07-22 12:16:51
我正在使用相同的方法,使用服务器端分页一次加载10行。我的解决方案是使用<GridToolbarExport>
组件并添加一个onClick
支柱,在导出之前请求和更新我的所有行。
此外,导出之后,为了不浪费已经从服务器端请求的大量数据,我将组件从server
切换到server
,直到用户刷新或离开页面。
<GridToolbarExport
excelOptions={{ allColumns: true }}
csvOptions={{ allColumns: true }}
onClick={() => {
if (dataMode == 'server') {
const tableState = apiRef.current.state
updateRows(tableState, 'all')
setDataMode('client')
}
}
}
/>
https://stackoverflow.com/questions/72240266
复制相似问题