Access the page size in a Material UI `<DataGrid autoPageSize/>`

user_2148718 0
Viewed 1285

By using <DataGrid autoPageSize/>, as described in the docs, you can get a Material UI table that automatically sets the page size (ie the number of rows per page) based on the browser height. However, if you are progressively loading data from the server, you need to know what that page size is, in order to know how much data to load per page, and which row the table is up to. As far as I can tell, the DataGrid only gives you access to the page number (through various events) which doesn't let you determine the page size.

The component does give you access to a pageSizeChange event, but this doesn't actually fire when the component automatically sets its page size using autoPageSize, so it doesn't help here.

material-ui reactjs datagrid javascript
1 Answers

I also ran into the same issue of trying to use DataGrid with server-side pagination. After some digging around, I found that I'm able to see that onPageSizeChange is triggered when the component first loads. See this codesandbox.

If you look at the console after refreshing the codesandbox browser, it prints 0, then 5. You could save this into state and then use it in your onPageChange calls.

user_173321420
Related