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.

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, callback
import pandas as pd

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv"
)

# Basic columns definition with column defaults
columnDefs = [
    {"field": "country"},
    {"field": "pop"},
    {"field": "continent"},
    {"field": "gdpPercap"},
]

app.layout = html.Div(
    [
        dcc.Markdown("To enable pagination set the grid property `pagination=True`"),
        dag.AgGrid(
            id="enable-pagination",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            dashGridOptions={"pagination": True},
        ),
        dcc.Markdown(
            "Auto Page Size example.  Enter grid height in px", style={"marginTop": 100}
        ),
        dcc.Input(id="input-height", type="number", min=150, max=1000, value=400),
        dag.AgGrid(
            id="grid-height",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            dashGridOptions={"pagination": True, "paginationAutoPageSize": True},
        ),
    ],
    style={"margin": 20},
)


@callback(Output("grid-height", "style"), Input("input-height", "value"))
def update_height(h):
    h = "400px" if h is None else h
    return {"height": h, "width": "100%"}


if __name__ == "__main__":
    app.run(debug=False)

To enable pagination set the grid property pagination=True

Auto Page Size example. Enter grid height in px

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.

Setting Page Size

The example below sets the number of rows to display on each page with paginationPageSize.

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, callback
import pandas as pd

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv"
)

# Basic columns definition with column defaults
columnDefs = [
    {"field": "country"},
    {"field": "pop"},
    {"field": "continent"},
    {"field": "gdpPercap"},
]

app.layout = html.Div(
    [
        dcc.Markdown("Setting Page Size.  Enter number of rows"),
        dcc.Input(id="input-page-size", type="number", min=1, max=len(df), value=10),
        dag.AgGrid(
            id="grid-page-size",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            dashGridOptions={"pagination": True},
        ),
    ],
    style={"margin": 20},
)


@callback(
    Output("grid-page-size", "dashGridOptions"),
    Input("input-page-size", "value"),
    State("grid-page-size", "dashGridOptions"),
)
def update_page_size(page_size, grid_options):
    page_size = 1 if page_size is None else page_size
    grid_options["paginationPageSize"] = page_size
    return grid_options


if __name__ == "__main__":
    app.run(debug=False)

Setting Page Size. Enter number of rows

Custom Pagination Controls

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

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

dag.AgGrid(
    dashGridOptions={"pagination": True, "suppressPaginationPanel": True}
)

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.

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, no_update, callback
import pandas as pd
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

# basic columns definition with column defaults
columnDefs = [
    {"field": "country"},
    {"field": "year"},
    {"field": "athlete"},
    {"field": "sport"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        dcc.Markdown(
            "Example of custom pagination controls with Dash Bootstrap Components `dbc.Pagination`"
        ),
        dbc.Pagination(
            id="custom-pagination",
            max_value=87,
            first_last=True,
            previous_next=True,
            size="sm",
            fully_expanded=False,
        ),
        dag.AgGrid(
            id="custom-pagination-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            dashGridOptions={
                "pagination": True,
                "suppressPaginationPanel": True,
                "suppressScrollOnNewData": True,
            },
        ),
    ],
    style={"margin": 20},
)


@callback(
    Output("custom-pagination", "max_value"),
    Input("custom-pagination-grid", "paginationInfo"),
)
def update_pagination_control(pagination_info):
    if pagination_info is None:
        return no_update
    return pagination_info["totalPages"]


@callback(
    Output("custom-pagination-grid", "paginationGoTo"),
    Input("custom-pagination", "active_page"),
    prevent_initial_call=True
)
def goto_page(n):
    if n is None or n == 1:
        return "first"
    # grid pagination starts at zero
    return n - 1


if __name__ == "__main__":
    app.run(debug=True)

Example of custom pagination controls with Dash Bootstrap Components dbc.Pagination

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.

import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, no_update, callback
import pandas as pd

app = Dash(__name__)


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {"field": "country"},
    {"field": "year"},
    {"field": "athlete"},
    {"field": "age"},
    {"field": "date"},
    {"field": "sport"},
    {"field": "total"},
]

app.layout = html.Div(
    [
        html.Div("Go to page:"),
        dcc.Input(id="goto-page-input", type="number", min=1, value=5),
        dag.AgGrid(
            id="goto-page-grid",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"resizable": True, "sortable": True, "filter": True},
            dashGridOptions={"pagination": True},
        ),
    ],
    style={"margin": 20},
)


@callback(
    Output("goto-page-grid", "paginationGoTo"),
    Input("goto-page-input", "value"),

)
def update_page_size(goto):
    if goto is None:
        return no_update
    # grid page numbers start at zero
    return goto - 1


if __name__ == "__main__":
    app.run(debug=True)

Go to page: