Pagination is an alternative to using vertical scroll on a grid and can be turned on by setting pagination=True
.
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
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.
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
You can provide custom pagination controls to the grid. To use a custom control:
pagination=True
to enable pagination.suppressPaginationPanel=True
so the grid will not show the standard navigation controls for pagination.dag.AgGrid(
dashGridOptions={"pagination": True, "suppressPaginationPanel": True}
)
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:
dbc.Pagination
from the dash-bootstrap-components librarypaginationGoTo
as the output of the callback to go to the selected page.totalPages
in the paginationInfo
dict to update the dbc.Pagination
buttons when the number of pages changes, such as when filtering data.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
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)