Data Grid - Pagination
Through paging, a segment of data can be viewed from the assigned data source.
By default, the MIT DataGrid displays the rows with pagination, and up to 100 rows per page.
On the other hand, the commercial DataGridPro component displays, by default, all the rows with infinite scrolling (and virtualization) and without the 100 rows per page limitation. You need to set the pagination prop to enable the pagination feature in such a case.
Basic example
<DataGrid pagination {...data} />Page size
- The default page size is
100, you can change this value with thepageSizeprop. - You can configure the possible page size the user can choose from with the
rowsPerPageOptionsprop.
<DataGrid
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
rowsPerPageOptions={[5, 10, 20]}
pagination
{...data}
/>Controlled pagination
While the previous demos show how the pagination can be uncontrolled, the active page can be controlled with the page/onPageChange props.
<DataGrid
page={page}
onPageChange={(newPage) => setPage(newPage)}
pageSize={5}
rowsPerPageOptions={[5]}
pagination
{...data}
/>Auto size
The autoPageSize prop allows to auto-scale the pageSize to match the container height and the max number of rows that can be displayed without a vertical scroll bar.
By default, this feature is off.
<DataGrid autoPageSize pagination {...data} />Server-side pagination
By default, pagination works on the client-side.
To switch it to server-side, set paginationMode="server".
You also need to set the rowCount prop so that the grid knows the total number of pages.
Finally, you need to handle the onPageChange callback to load the rows for the corresponding page.
<DataGrid
rows={rows}
columns={data.columns}
pagination
pageSize={5}
rowsPerPageOptions={[5]}
rowCount={100}
paginationMode="server"
onPageChange={(newPage) => setPage(newPage)}
loading={loading}
/>Cursor-based pagination
You can adapt the pagination for your cursor-based pagination. To do so, you just have to keep track of the next cursor associated with each page you fetched.
<DataGrid
rows={rows}
columns={data.columns}
pagination
pageSize={5}
rowsPerPageOptions={[5]}
rowCount={100}
paginationMode="server"
onPageChange={handlePageChange}
page={page}
loading={loading}
/>Customization
You can customize the rendering of the pagination in the footer following the component section of the documentation.
Paginate > 100 rows
The DataGrid component can display up to 100 rows per page.
The DataGridPro component removes this limitation.
The following demo displays 200 rows per page:
<DataGridPro pagination pageSize={200} rowsPerPageOptions={[200]} {...data} />apiRef
The grid exposes a set of methods that enables all of these features using the imperative apiRef.
⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.
setPageSize: Set the number of rows in one page.setPage: Set the displayed page.onPageChange: Callback fired after a new page has been displayed.onPageSizeChange: Callback fired after the page size was changed.
Below is an example of how you can reset the page using the imperative setPage method.
<Button color="primary" variant="outlined" onClick={handleClick}>
Set page 2
</Button>
<div style={{ height: 400, width: '100%', marginTop: 16 }}>
<DataGridPro
pagination
pageSize={5}
rowsPerPageOptions={[5]}
apiRef={apiRef}
{...data}
/>
</div>