Pagination allows the grid to lazy load rows from the server and display the rows one page at a time. The page to display is selected by he user using the pagination panel that appears at the bottom of the page.

To enable pagination, set the grid property rowModelType='pagination'.

If the grid knows how many pages in total at the start, the total page and row count will appear in the pagination panel, and the user will be restricted to this range.

If the grid does not know how many pages at the start, the user will be able to continue clicking on 'next' until the last page is loaded. During the search for the last page, the grid is said to be in 'infinite pagination'. During infinite pagination, the total rows and pages are displayed as 'more' at the bottom of the page, and the 'last' button is disabled.

Aggregation and Grouping

Aggregation and grouping work exactly as when no paging, however their effect will be on the currently displayed page only. It is not posible to have the client aggregate or group on data that is not loaded from the server.

Sorting & Filtering

You have two options for both sorting and filtering. Either you can allow the grid to do it on a particular page (in-grid) or you do it on the server side across the entire data-set.

For sorting, you must choose whether you want in-grid sorting or server side sorting, you cannot mix.

For filtering, you must choose whether you want in-grid filtering or server side filtering, you cannot mix.

It is possible to mix between in-grid sorting / filtering with server side filtering / sorting. Eg if you are doing in-grid sorting, you can do server side filtering, and vice versa.

Example - In Grid Sorting and Filtering

The following example shows pagination. The sorting and filtering is all done in the grid.

Example - Server Side Sorting and Filtering

The following example extends the example above by adding server side filtering and sorting.

Any column can be sorted by clicking the header. When this happens, the datasource is called again with the new sort options.

The columns Age, Country and Year can be filtered. When this happens, the datasource is called again with the new filtering options.

Note: The set filters are provided with the list of available values. This is because it is not possible for the grid to know the entire set of values as they reside on the server.

Note: The filters below have newRowsAction='keep'. This is so the filters are kept when you move between pages.

Note: The example below uses ag-Grid-Enterprise, this is to demonstrate the set filter with server side filtering, ag-Grid-Enterprise is not required for pagination)

Configuring A Bit Differently

The examples above use old style JavaScript objects for the datasource. This example turns things around slightly and creates a datasource Class. The example also just creates (makes up) data on the fly.