Material UI Data Grid Pagination onPageChange does not work

You only see the first page. Your state loads into the first page.

But your new state does not load into Data Grid although the state has been updated.

This is because you have to specify an attribute:

paginationMode="server"

In complete,

<DataGrid paginationMode="server" />

You may think that you are not using server mode because it is React and it is using just Axios request with pagination and offset.

The documentation says about it:

Pagination can be processed on the server or client-side. Set it to ‘client’ if you would like to handle the pagination on the client-side. Set it to ‘server’ if you would like to handle the pagination on the server-side.

In simple term, if your whole data is loaded inside the client, you just want to manipulate inside the whole data into page chunk, it is called “client”. If your whole data is loaded on the client side, you will fetch it as page chunk from server side, it is called “server”.

It does not necessarily mean whehter your React app is rendering from Server-Side or Client-Side.