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.

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

app = Dash()


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

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={"filter": True},
            dashGridOptions={"pagination": True, "animateRows": False},
        ),
        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=True)
```

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.

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

app = Dash()

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)
columnDefs = [{"field": i} for i in ["country", "year", "athlete", "age", "sport", "total"]]

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, debounce=True),
        dag.AgGrid(
            id="grid-page-size",
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={"filter": True},
            dashGridOptions={"pagination": True, "paginationPageSizeSelector": False, "animateRows": False},
        ),
    ],
    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)
```

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.

python 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.

```python
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"
)

columnDefs = [{"field": i} for i in ["country", "year", "athlete", "age", "sport", "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={"filter": True},
            dashGridOptions={
                "pagination": True,
                "suppressPaginationPanel": True,
                "suppressScrollOnNewData": True,
                "animateRows": False
            },
        ),
    ],
    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)
```

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.

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

app = Dash()


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

columnDefs = [{"field": i} for i in ["country", "year", "athlete", "age", "sport", "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={"filter": True},
            dashGridOptions={"pagination": True, "animateRows": False},
        ),
    ]
)


@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)
```