Pagination

The Pagination component enables navigation between pages of content. It provides a simple interface for users to move between pages in a multi-page layout.

import dash
from dash import html, Input, Output, State
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = html.Div([
    dmc.Pagination(
        id="pagination",
        count=10,
        color="primary",
        showFirstButton=True,
        showLastButton=True
    ),
    html.Div(id="page-content")
])

@app.callback(
    Output("page-content", "children"),
    Input("pagination", "page")
)
def update_page(page_number):
    if page_number:
        return f"You are on page {page_number}"
    return "Please select a page"

if __name__ == '__main__':
    app.run_server(debug=True)

Props Table

Name	Type	Default	Description
`id`	`string`	`undefined`	The ID used to identify this component
`count`	`number`	`1`	Number of pages
`page`	`number`	`1`	The current page number
`color`	`"primary" \| "secondary" \| "standard"`	`"standard"`	The color of the pagination component
`showFirstButton`	`boolean`	`false`	If true, show the first-page button
`showLastButton`	`boolean`	`false`	If true, show the last-page button
`sx`	`SxProps`	`undefined`	MUI system props for custom styling

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Pagination Documentation

Props Table​

Props Table