MUI DataGrid paginationMeta.hasNextPage not working

Question

Even when I explicitly set the paginationMeta.hasNextPage prop to false:

return (
      <DataGrid rows={rows} columns={rfqCols}
      paginationModel={paginationModel}
      paginationMeta={{hasNextPage: false}}       
      sortingMode="server"
      paginationMode="server"
      onPaginationModelChange={handlePaginationModelChange}
      onSortModelChange={handleSortModelChange}
      rowCount={-1}
      pageSizeOptions={[1,3,5]}
      />
    );

The "next page" button stays active:

What am I missing? How can I control whether or not the "next page" button is active or disabled?

Answer 1

I just spent many hours trying to solve this same problem and I finally figured it out. It's unfortunately not documented, but the button will never become disabled while your 'rowCount' attribute is set to -1.

This means that even if you want to perform server-side fetching with an 'unknown' row count, you still need to be able to know the final total row count when you reach the last page. Once I realized this, I saw that the mock server in the MUI documentation will actually return a 'totalRowCount' value which is actually used as the row count in the demo when the hasNextPage attribute is set to false. It's obviously a major face palm moment since they are trying to demo an 'unknown' row count. It's also fundamentally not intuitive as one would imagine that a self-described attribute like 'hasNextPage' would suffice in determining whether or not there is a next page, but it unfortunately doesn't!

This also means that if you are using a back-end which doesn't ever know the total row count (like DynamoDB for example) you will need to maintain this value yourself in your React app. I used a reference to a map that keeps the page as the key and the row count for that page as the value. I can then reduce this map to get the final row count.

Here is a bit of sample code that you can use to get started in the right direction. You'll need to replace the variables with capital letters with your own values:

return (
  <DataGrid 
    rows={rows} 
    columns={rfqCols}
    paginationModel={paginationModel}
    paginationMeta={{hasNextPage: MY_HAS_NEXT_PAGE}}       
    sortingMode="server"
    paginationMode="server"
    onPaginationModelChange={handlePaginationModelChange}
    onSortModelChange={handleSortModelChange}
    rowCount={MY_HAS_NEXT_PAGE ? -1 : MY_FINAL_TOTAL_ROW_COUNT}
    pageSizeOptions={[1,3,5]}
  />
);