Material UI - 数据网格自定义分页

Question

我正在尝试使用这里的自定义分页 https://material-ui.com/components/data-grid/style/#custom-theme

但是分页本身似乎已损坏？谁能指导为什么分页不起作用以及需要做什么，以便我可以实现它？

当我单击第 2 页，然后单击第 1 页时，它不起作用。

Answer 1

我必须将分页更新为

    <Pagination
      color="primary"
      showFirstButton
      showLastButton
      page={state.pagination.page + 1}
      count={state.pagination.pageCount}
      // @ts-expect-error
      renderItem={props2 => <PaginationItem {...props2} disableRipple />}
      onChange={(event, value) => apiRef.current.setPage(value-1)}
    />
  )

Answer 2

你可以这样做：

function CustomPagination() {
  const apiRef = useGridApiContext();
  const page = useGridSelector(apiRef, gridPageSelector);
  const pageCount = useGridSelector(apiRef, gridPageCountSelector);

  return (
    <Pagination
      color="primary"
      count={pageCount}
      page={page + 1}
      sx={{ color: "#ffffff" }}
      onChange={(event, value) => apiRef.current.setPage(value - 1)}
    />
  );
}