Search code examples
reactjsdatagridmaterial-uipagination

Material-UI Datagrid Pagination is starting on second page when given 1 for page

I'm using Material-UI Datagrid and I'm having an issue with the pagination. I have an api that will accept a page # and a limit like this page=${page}&limit=10`). Once the api is hit and returns 10 rows, I store those 10 rows along with any pagination data that Laravel is sending with paginate. It will look like this.

Data Stored After API Call

What is odd, is this is the right data for the first page but the pagination shows that it is the second page of data.

Here is what data the datagrid has from looking at the components tab in the console Datagrid State

On initial load, this is what happens with the pagination

Initial load of datagrid

This is what the component looks like

Component

Solution

  • That component starts the count from 0. Make sure your DataGrid component is given 0 as page property value :)

    Was probably made like that to ease your life when working with arrays.

    I used their demo and if you change the value in state to 0 it jumps to page 1.