如何修改MaterialReactTable的rowsPerPage实现每页显示5条数据？

问题出在MaterialReactTable的分页逻辑不单纯依赖muiTablePaginationProps，这个属性主要用于配置分页组件的UI选项（比如可选条数列表），而表格默认的每页条数需要通过表格自身的状态配置来设置。

你可以通过两种方式解决：

方式一：非受控状态（设置初始默认值） #

通过initialState.pagination.pageSize指定初始每页条数，配合muiTablePaginationProps锁定可选条数：

<MaterialReactTable
  columns={columns}
  data={data.data}
  initialState={{
    pagination: {
      pageSize: 5, // 设置初始每页显示5条
    },
  }}
  muiTablePaginationProps={{
    rowsPerPageOptions: [5], // 仅提供5条这个可选选项
  }}
/>

方式二：受控状态（手动控制分页状态） #

如果需要在外部控制分页状态，可使用pagination和onPaginationChange props：

import { useState } from 'react';

const [pagination, setPagination] = useState({
  pageSize: 5,
});

<MaterialReactTable
  columns={columns}
  data={data.data}
  pagination={pagination}
  onPaginationChange={setPagination}
  muiTablePaginationProps={{
    rowsPerPageOptions: [5],
  }}
/>

原配置不生效的原因 #

muiTablePaginationProps.rowsPerPage会被表格内部状态覆盖，因为MaterialReactTable会自行管理分页状态，外部传递的该属性优先级低于表格自身state。因此必须通过表格的initialState或受控pagination props来设置默认条数。

内容的提问来源于stack exchange，提问作者Elham Bagheri