DataGrid - Pagination

Pagination

The <ReactDataGrid /> 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 <ReactDataGrid /> 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

Pagination configuration

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.

Sorting

Live pagination

e: contact@reactdatagrid.io

Top