Pagination

Pagination is an alternative to using vertical scroll on a grid and can be turned on by setting pagination=True.

Enable Pagination

The first example shows the default settings for pagination.

Auto Page Size

The example above shows Auto Page size. When you set paginationAutoPageSize=True the grid will automatically show as
many rows in each page as it can fit. If you resize the display area of the grid, the page size automatically changes.
Note that there are no vertical scroll bars in this example.

Each pagination page must have the same number of rows. If you use paginationAutoPageSize
with getRowHeight Function (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.

<br>

When paginationAutoPageSize is used, the grid will not show the page size dropdown selector in the pagination panel,
and the option paginationPageSizeSelector will be ignored.

Setting Page Size

When showing the pagination controls, the page size selector is shown by default. In this example we prevent this by
setting paginationPageSizeSelector=False in dashGridOptions.

We set the number of rows to display on each page with paginationPageSize.

Custom Pagination Controls

You can provide custom pagination controls to the grid. To use a custom control:

1. Set pagination=True to enable pagination.
2. Set suppressPaginationPanel=True so the grid will not show the standard navigation controls for pagination.
3. Provide your own pagination component.

python dashGridOptions = {"pagination": True, "suppressPaginationPanel": True}

4. Use the following Dash properties to control the pagination from your custom component.

• paginationGoTo (a value equal to: ‘first’, ‘last’, ‘next’, ‘previous’, null | number; optional): When pagination is
  enabled, this will navigate to the specified page.

• paginationInfo (dict; optional): When pagination is enabled, this will be populated with info from the pagination
  API. paginationInfo is a dict with keys:

  • currentPage (number; optional)
  • isLastPageFound (boolean; optional)
  • pageSize (number; optional)
  • rowCount (number; optional)
  • totalPages (number; optional)

The example below shows providing a custom component. In this example:

• The pagination component is dbc.Pagination from the dash-bootstrap-components library
• We use paginationGoTo as the output of the callback to go to the selected page.
• We use totalPages in the paginationInfo dict to update the dbc.Pagination buttons when the number of pages
  changes, such as when filtering data.
• We set the property suppressScrollOnNewData=True, which tells the grid to NOT scroll to the top when the page
  changes.

Selecting the Page in a Callback

Set paginationGoTo to go to a specific page in a grid. In this example, we update the page based on the value in a
dropdown. Note that grid page numbers start at zero, so we subtract 1 from the value to return from the callback.