Configuration Options - Paging

Parent Previous Next

In the previous sections, we saw how to enable a basic set of filters and footers. In this section, we will look into another nifty little gem, paging.

In most LOB applications, you almost always have a ton of data to show. Once of the very frequent mechanisms to show a manageable chunk of data is the paging mechanism.  At the very basic level, enabling paging is dead simple: just set enablePaging=true.

<ReactDataGrid horizontalScrollPolicy={"off"} width={"100%"}

           enablePrint enablePreferencePersistence enableExport forcePagerRow enablePaging pageSize={2} enableFilters enableFooters

           editable dataProvider={donuts}>


And voila:

Now, what you see here is called client paging. In that, all records are loaded in memory in the grid, and the grid is simply showing you the first page. You don't have to do anything! Just let the grid handle paging for you. This works well, if the number of records is manageable, but can get difficult if you have hundreds of thousands of records, since you never want to have that many records in memory. So, we provide the concept of filterPageSortMode. Although too complex a topic to cover in this getting started guide, it is something you should know - it’s a potent tool in your toolbox, something you may want to whip out when facing a situation with a large number of records.

From the docs at

The Filter/Page/Sort Mode. Can be either "server" or "client". In client mode, the grid will take care of paging, sorting and filtering once the dataprovider is set. In server mode, the grid will fire a named filterPageSortChange that should be used to construct an appropriate query to be sent to the backend.