本文详解如何通过 initialstate 正确配置 materialreacttable 的默认分页大小，解决 muitablepaginationprops.rowsperpage 不生效的问题。
本文详解如何通过 initialstate 正确配置 materialreacttable 的默认分页大小，解决 muitablepaginationprops.rowsperpage 不生效的问题。
在 MaterialReactTable 中，仅在 muiTablePaginationProps 中设置 rowsPerPage: 5 并不能改变初始每页条数——这是因为该组件的分页状态由内部状态管理，muiTablePaginationProps.rowsPerPage 仅影响底层 MUI <TablePagination> 组件的 UI 行为（如是否高亮当前选项），不控制实际的数据切片逻辑。
✅ 正确做法是：使用 initialState.pagination.pageSize 显式声明初始页面大小，并配合 rowsPerPageOptions 限定可选值：
<MaterialReactTable
columns={columns}
data={data}
initialState={{
pagination: { pageSize: 5, pageIndex: 0 },
}}
muiTablePaginationProps={{
rowsPerPageOptions: [5], // 可选值仅保留 5，禁用其他选项
}}
/>⚠️ 注意事项：
- pageSize（而非 rowsPerPage）是 MaterialReactTable 分页状态的核心字段，必须通过 initialState.pagination 设置；
- 若需支持用户切换页大小，可将 rowsPerPageOptions 设为 [5, 10, 25]，组件会自动同步更新 pageSize；
- 不要同时设置 muiTablePaginationProps.rowsPerPage 和 initialState.pagination.pageSize，前者会被后者覆盖且可能引发警告；
- pageIndex: 0 可省略（默认即为 0），但显式声明更清晰，便于后续扩展（如从 URL 恢复分页位置）。
? 小结：MaterialReactTable 的分页是受控状态，initialState 是初始化分页行为的唯一权威入口。掌握这一设计原则，不仅能正确设置默认条数，也为后续实现分页状态持久化、服务端分页等高级场景打下基础。
