Top
DataGrid - Pagination
DataGrid
The <DataGrid /> supports both local and remote pagination. Specify pagination=true to have the pagination toolbar displayed. By default, if local or remote pagination is not specified (by using pagination="local" or pagination="remote"), the <DataGrid /> will figure out if it should use local or remote pagination depending on how the dataSource is defined - if it's a remote dataSource (a Promise or a function) or a local one (an array).
In case you want to enforce local pagination, use pagination="local", and if you want to enforce remote pagination use pagination="remote".
In the sources of the example above, note that the dataSource function returns a Promise resolving to an object with data: Array and count: Number properties. This is essential for remote pagination, since the grid needs to know how many records are available for pagination.
You can have any of the following combinations of pagination and dataSource:
  • local data with local pagination
  • remote data with remote pagination
  • remote data with local pagination
When paginating, it's essential to be able to easily configure the pageSize (specified by the defaultLimit prop) and the defaultSkip. In addition, you can also configure pageSizes, which controls the page sizes available in the pagination toolbar so the user can modify the page size by choosing a different value.
defaultLimit and defaultSkip are uncontrolled props - as a result, you don't have to update them to get pagination working as expected. This is the easiest way to get up & running quickly with <DataGrid /> pagination.
On the other hand, the <DataGrid /> also offers the controlled versions of those props: limit and skip. To make pagination work with those controlled props, make sure you update them using onLimitChange and onSkipChange.
To prove how you can have full control over the pagination with controlled limit and skip, take a look at the example below.
As seen in the example above, with the controlled limit and skip, the dataSource function is automatically called when any of those values change, so it's rather easy to implement custom pagination logic - if the current configuration props are not enough. At any time you can use renderPaginationToolbar to render a custom component for pagination instead of the default PaginationToolbar.
Using paginationProps you can customize any prop that PaginationToolbar accepts and tweak it to fit your own specific configuration needs.
In addition to the classic pagination with a toolbar & prev/next buttons, you can also use "live" pagination - pages are loaded as you scroll. Use livePagination=true, and you can use it together with limit to control the page size. Have a look at the source code of the next example below.