如何通过在分页旁边添加新字段来自定义数据网格页脚

Question

在我的应用程序中，我使用 DataGrid 组件来显示查询数据库后获得的结果。我使用的是组件提供的默认分页，它运行得很好。尽管如此，现在我想在分页旁边添加一个包含额外信息的新字段。下图显示了分页的显示方式，用红色标注了我要添加的内容：

我尝试使用此处描述的自定义组件。首先，我尝试包含自定义页脚组件，但它替换了整个默认分页组件。然后，我一直尝试通过包含我想要添加的新字段以及分页来使用自定义分页组件。问题是我不知道如何将 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 中要写什么。另一方面，这效果不太好。

我希望这个问题足够清楚。预先感谢。

Answer 1

问题已经解决了，但我想分享我有趣的解决方案。

CustomFooter () {
  return (
    <GridFooterContainer>
      {/* Add what you want here */}
      <GridFooter sx={{
        border: 'none', // To delete double border.
        }} />
    </GridFooterContainer>
  );
}

GridFooterContainer 是一个预定义的组件，为页脚提供 border-top 和 display: flex css 属性，但要注意 justify-content 是 space- Between 。您可能需要覆盖该 css 属性。

GridFooter 是默认的页脚组件，其中包括 TablePagination。我没有直接将其用作页脚。相反，我在不同的组件中使用了它。了解更多信息

这是我的数据网格：

<DataGrid
          rows={rows}
          columns={columns}
          components={{Footer: CustomFooter}}
        />

可以指定 rowsPerPageOptions、pageSize 和其他属性，例如使用默认页脚。

我希望它会有用。

谢谢阅读。

Answer 2

经过几个小时尝试不同的选项后，我弄清楚了如何将 TablePagination 与 DataGrid 连接起来：

• TablePagination 组件使用的索引似乎是从零开始的。那么，就不需要加1或者减1了；这会引发错误。
• TablePagination 组件中的属性 count 指的是行数，而不是页数。
• 我无法找到与 onRowsPerPageChange 相关的函数；但是，我对此功能不是很感兴趣，因此我通过将 prop 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 函数以对其进行自定义。