To enable pagination in, set the grid property pagination=true.
The following simple example shows this, the only difference to this and previous
examples is the pagination=true property.
Remember Pagination works with all frameworks eg Angular and React as well as plain JavaScript.
Pagination in ag-Grid is supported in all the different row models.
The Client-side Row Model (the default
row model) is used for the examples on this page.
To see the specifics of pagination on the
other row models check the relevant documentation for Infinite Row Model,
Viewport Row Model and
Server-side Row Model.
Pagination does not reduce the feature set of the grid, as long as the underlying row model supports it.
In other words, if you are paging over the Client-side Row Model, all features of
the Client-side Row Model (grouping, filtering etc) are still available. Likewise for the other row models,
if the row model supports it, it's available through pagination and that row model.
Example: Auto Page Size
If you set paginationAutoPageSize=true the grid will automatically show as many rows in each page
as it can fit. This is demonstrated below. Note if you resize the display area of the grid, the page size
automatically changes. To view this, open the example up in a new tab and resize your browser.
Each pagination page must have the same number of rows.
If you use paginationAutoPageSize with
getRowHeight() callback (to have different
rows with different heights) then the page height will be calculated using the default row height and not
the actual row heights. Therefore the rows will not fit perfectly into the page if these features are mixed.
In this example the default pagination settings are changed. Note the following:
paginationPageSize is set to 10api.paginationGoToPage(4) is called to go to page 4 (0 based, so he 5th page)- A dropdown to change the page size dynamically is available. This makes a call to
paginationSetPageSize(newPageSize)
- The numbers in the pagination panel are formatted differently using the grid callback
paginationNumberFormatter and putting the numbers into square brackets i.e. [x].
If you set suppressPaginationPanel=true, the grid will not show the standard navigation controls for
pagination. This is useful is you want to provide your own navigation controls.
In the example below you can see how this works. Note that we are listening to onPaginationChanged to
update the information about the current pagination status. We also call methods on the pagination API to change
the pagination state.
A summary of the API methods and events can be found at the top of this documentation page.
The example also sets property suppressScrollOnNewData=true, which tells the grid to NOT
scroll to the top when the page changes.
Pagination Properties
| pagination |
True - Pagination is enabled.
False (Default) - Pagination is disabled.
|
| paginationPageSize |
Number. How many rows to load per page. Default value = 100. If paginationAutoPageSize
is specified, this property is ignored.
|
| paginationAutoPageSize |
True - The number of rows to load per page is automatically adjusted by ag-Grid so each page
shows enough rows to just fill the area designated for the grid.
False (Default) - paginationPageSize is used.
|
| suppressPaginationPanel |
True - The out of the box ag-Grid controls for navigation are hidden. This is useful if
pagination=true and you want to provide your own pagination controls.
False (Default) - when pagination=true It automatically shows at the bottom the necessary
controls so that the user can navigate through the different pages.
|
The following methods compose the pagination API are all available from gridOptions.api
Pagination API
| paginationIsLastPageFound() |
Returns true when last page known. This will always be true if you are using the Client-side Row Model
for pagination.
Returns false when last page now known. This only happens when using Infinite Scrolling Row Model.
|
| paginationGetPageSize() |
How many rows ag-Grid is showing per page.
|
| paginationSetPageSize(newPageSize) |
Sets the paginationPageSize to newPageSize Then it repaginates the grid so the changes
are applied immediately on the screen.
|
| paginationGetCurrentPage() |
Returns the 0 index based page which ag-Grid is showing right now.
|
| paginationGetTotalPages() |
Returns the total number of pages. If paginationIsLastPageFound() == false returns null.
|
| paginationGetRowCount() |
The total number of rows. If paginationIsLastPageFound() == false returns null.
|
| paginationGoToPage(pageNumber) |
Goes to the specified page. If the page requested doesn't exist, it will go to the last
page.
|
paginationGoToNextPage()
paginationGoToPreviousPage()
paginationGoToFirstPage()
paginationGoToLastPage() |
Shorthands for goToPage(relevantPageNumber).
|
Pagination Callbacks
| paginationNumberFormatter(params) |
Allows user to format the numbers in the pagination panel, ie 'row count' and 'page number' labels.
This is for pagination panel only, to format numbers inside the grid's cells (ie your data), then
use valueFormatter in the column definitions.
|
Pagination Events
| Event |
Description |
| paginationChanged |
This event is triggered every time the paging state changes, Some of the most common scenarios for
this event to be triggered are:
- The page size changes
- The current shown page is changed
- New data is loaded onto the grid
|
In v9.0 ag-Grid pagination changed from server side pagination to client side pagination.
Server side pagination was then removed in v10.1.
If you were doing server side pagination, we recommend moving to
pagination with infinite scrolling
as a way of migration to the new mechanism.
If you were slicing manually the data in your Datasource to mimic pagination done in the browser only,
we recommend that you use the default Client-side Row Model and
set the row data as normal and then set grid property pagination=true.