如何通过在分页旁边添加新字段来自定义数据网格页脚
在我的应用程序中，我使用了一个DataGrid组件来显示查询数据库后得到的结果。我使用的是组件提供的默认分页，它工作得很好。尽管如此，现在我还是想在分页旁边添加一个包含额外信息的新字段。下图显示了分页是如何显示的，用红色表示我想要添加的内容：
我尝试使用here中描述的自定义组件。首先，我尝试包含一个自定义页脚组件，但它替换了整个默认的分页组件。然后，我一直在尝试使用自定义分页组件，包括我想要添加的新字段以及分页。问题是，我不知道如何将TablePagination组件与DataGrid组件连接起来。根据文档，该组件应该是默认使用的分页。
文档提供了如何在DataGrid中使用分页组件的示例：
function CustomPagination() {
const { state, apiRef } = useGridSlotComponentProps();
const classes = useStyles();
return (
<Pagination
className={classes.root}
color="primary"
count={state.pagination.pageCount}
page={state.pagination.page + 1}
onChange={(event, value) => apiRef.current.setPage(value - 1)}
/>
);
}
export default function CustomPaginationGrid() {
const { data } = useDemoData({
dataSet: 'Commodity',
rowLength: 100,
maxColumns: 6,
});
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
pagination
pageSize={5}
components={{
Pagination: CustomPagination,
}}
{...data}
/>
</div>
);
}然而，TablePagination有不同的属性需要填充：
<TablePagination
component="div"
count={100}
page={page}
onPageChange={handleChangePage}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>我可以通过使用useGridSlotComponentProps()从DataGrid中获取状态、选项和apiRef。我想知道如何填充TablePagination道具，以便使它与DataGrid一起工作。我最好的一张照片是这样的：
<TablePagination
component="div"
count={state.pagination.pageCount}
page={state.pagination.page + 1}
onPageChange={(event, value) => apiRef.current.setPage(value - 1)}
rowsPerPage={options.pageSize}
onRowsPerPageChange={null}
/>一方面，我不知道该在onRowsPerPageChange中写些什么。另一方面，这并不能很好地工作。
我希望这个问题足够清楚。事先谢谢你。
回答 1
Stack Overflow用户
发布于 2021-07-13 01:59:43
在尝试了几个小时的不同选项后，我想出了以下关于如何将TablePagination与DataGrid连接的方法：
- TablePagination组件使用的索引似乎是从零开始的。然后，就没有必要加或减1；这会引起错误。
- TablePagination组件中的属性count引用行数，而不是页数。
- 我找不到与onRowsPerPageChange相关的函数；但是，我对此功能不是很感兴趣，因此我通过将属性rowsPerPageOptions设置为空数组来隐藏它。
因此，我的自定义分页组件(仅重用默认分页)由以下函数返回，该函数使用useGridSlotComponentProps ()来获取DataGrid组件中设置的状态、api和选项：
CustomPagination () {
const { state, apiRef, options } = useGridSlotComponentProps();
return (
<TablePagination
count={state.pagination.rowCount}
page={state.pagination.page}
onPageChange={(event, value) => apiRef.current.setPage(value)}
rowsPerPage={options.pageSize}
rowsPerPageOptions={[]}
/>
);
}然后，我在DataGrid中指定这个自定义分页，如下所示：
<DataGrid rows={rows}
columns={colsDefinition}
pageSize={10}
pagination
components={{Pagination: this.CustomPagination}}
/>这样，分页就可以使用默认行为了，但现在，我可以修改CustomPagination函数以对其进行自定义。
https://stackoverflow.com/questions/68347965
复制相似问题
腾讯云开发者
