Javascript – How can I change rowsPerPage in MaterialReactTable?

Problem:

I used MaterialReactTable and I want to show just 5 items in each pagination. I set muiTablePaginationProps but I still have 10 items.How can I do?

 <MaterialReactTable
  columns={columns}
  data={data.data}
  muiTablePaginationProps={{
    rowsPerPageOptions: [5],
    rowsPerPage: 5,
  }}

/>

Solution:

Based on material-react-table documentation (Pagination Feature Guide) you should remove rowsPerPage from muiTablePaginationProps and add initialState property to MaterialReactTable component as follows:

<MaterialReactTable
  initialState={{ pagination: { pageSize: 5,pageIndex: 0 } }}
  columns={columns}
  data={data}
  muiTablePaginationProps={{
    rowsPerPageOptions: [5],
  }}
/>;

You can see image preview at here