Filter does not reset to first page if initial page index set to anything other than 0

[shakif95]

material-react-table version

3.0.1

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

1. Set the initial state value

initialState={{
        showGlobalFilter: true,
        pagination: {
          pageIndex: 1,
          pageSize: 5,
        },
      }}

2. Filter for a value that has the number of results less than the initial pageSize which is 5 in this case.
3. The table stays on page 1. Expected behaviour - it should have been set to the first page.

Minimal, Reproducible Example - (Optional, but Recommended)

https://stackblitz.com/edit/github-o37zg3?file=src%2FTS.tsx

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

No, because I do not have time to dig into it

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[BigSamu]

Just to clarify here, when you mean first page you mean page 0, correct? For avoiding confusions.

[shakif95]

Just to clarify here, when you mean first page you mean page 0, correct? For avoiding confusions.

Yes.

[shakif95]

Closed accidently. Re-opening.

[sahilrajthapa]

Hello @shakif95, to achieve expected behaviour, you can pass pagination data to state props instead of initialState props.

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

<MaterialReactTable
      columns={columns}
      data={data}
      enableGlobalFilterModes
      initialState={{
        showGlobalFilter: true,
      }}
      state={{
        pagination,
      }}
      onPaginationChange={setPagination}
      rowCount={data?.length || 0}
      positionGlobalFilter="left"
      muiSearchTextFieldProps={{
        placeholder: `Search ${data.length} rows`,
        sx: { minWidth: '300px' },
        variant: 'outlined',
      }}
 />

You can find working expected behaviour here.

Also, this behaviour is related to tanstack table. You can replicate same behaviour in tanstack table, here is an example of the same behaviour. There is also workaround in tanstack table to achieve expected behaviour. So, I think this is not an issue as you can use workaround to achieve expected behaviour.