MUI X Data Grid v4自定义分页如何显示RowsPerPage配置项

问题原因 #

你直接替换了Data Grid的Pagination插槽，默认的分页插槽内置了每页行数选择器和页码控制两个模块，你自定义的CustomPagination组件只实现了页码控制逻辑，自然会丢失每页行数选择的功能。

解决方案1：替换PaginationItem插槽（推荐） #

该方案无需改动整体分页结构，默认的每页行数选择、总数据量展示等功能都会保留，仅替换页码按钮的渲染样式，符合你要的Pagination组件效果。

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import PaginationItem from '@material-ui/lab/PaginationItem';

export default function CustomPaginationGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        pagination
        pageSize={5}
        rowsPerPageOptions={[5, 10, 20]}
        // 仅替换页码项组件，不替换整个分页栏
        components={{
          PaginationItem: PaginationItem,
        }}
        // 传递PaginationItem的配置，比如主题色
        componentsProps={{
          paginationItem: {
            color: 'primary'
          }
        }}
        {...data}
      />
    </div>
  );
}

解决方案2：自定义Pagination组件时补全每页行数逻辑 #

如果你需要完全自定义整个分页栏的布局，可以在自定义组件内手动添加每页行数选择器，补上对应的控制逻辑：

import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
import { DataGrid, useGridSlotComponentProps } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Pagination from '@material-ui/lab/Pagination';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

const useStyles = makeStyles({
  root: {
    display: 'flex',
    alignItems: 'center',
    gap: '16px',
    padding: '8px 0'
  },
});

function CustomPagination() {
  const { state, apiRef } = useGridSlotComponentProps();
  const classes = useStyles();
  // 从state里取当前页大小和配置的可选值
  const { pageSize, rowsPerPageOptions, pageCount, page } = state.pagination;

  const handlePageSizeChange = (e) => {
    apiRef.current.setPageSize(e.target.value);
  };

  return (
    <div className={classes.root}>
      {/* 自己实现每页行数选择器 */}
      <FormControl size="small" variant="outlined">
        <InputLabel id="rows-per-page-label">每页行数</InputLabel>
        <Select
          labelId="rows-per-page-label"
          value={pageSize}
          onChange={handlePageSizeChange}
          label="每页行数"
          style={{ minWidth: 120 }}
        >
          {rowsPerPageOptions.map(option => (
            <MenuItem key={option} value={option}>{option} 条/页</MenuItem>
          ))}
        </Select>
      </FormControl>

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

export default function CustomPaginationGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        pagination
        pageSize={5}
        rowsPerPageOptions={[5, 10, 20]}
        components={{
          Pagination: CustomPagination,
        }}
        {...data}
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Ahmed fouad