Pagination#

Material version available

pn.ui.Pagination resolves to the Material Design implementation of this component, documented in the panel-material-ui reference. This page documents the classic pn.widgets.Pagination.

import panel as pn
import panel.ui

pn.extension()

The Pagination component provides a convenient way to navigate between a number of consecutive pages.




Parameters:#




Core#


    

  • count (int): The total number of pages
    • 

  • disabled (boolean): Whether the menu is disabled.
    • 

  • value (dict): The currently selected page.
    • 





Display#


    

  • boundary_count (int): The number of boundary pages to show
    • 

  • color (str): The color variant of the paginator, which must be one of 'default' (white), 'primary' (blue), 'success' (green), 'info' (yellow), 'light' (light), or 'danger' (red).
    • 

  • shape (Literal["circular", "rounded"]): The direction the menu opens in.
    • 

  • sibling_count (int): The number of sibling pages to show
    • 

  • show_first_button (boolean): Whether to show button to navigate to first page.
    • 

  • show_last_button (boolean): Whether to show button to navigate to last page.
    • 

  • size (Literal["small", "medium", "large"]): The size of the pagination menu.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 





The Pagination component allows selecting between a count of Pages.


pagination = pn.ui.Pagination(count=100)

pagination







            
            
While the display uses 1-baseed indexing, clicking on a particular page will set the 0-indexed value:


pagination.value





0


If you have a list of objects that you want to paginate you can create a pagination with the Pagination.paginate method, providing the list of objects, a page_size and optionally the layout for the paginated view:


pn.ui.Pagination.paginate([f'Item: {i}' for i in range(1, 101)], page_size=5)







            
            






Display#




color#


pn.GridBox(*(
    pagination.clone(color=color)
    for color in pn.ui.Pagination.param.color.objects
), ncols=2)







            
            




shape#


pn.ui.Row(*(
    pagination.clone(shape=shape)
    for shape in pn.ui.Pagination.param.shape.objects
))







            
            




show_first_button/show_last_button#


pn.ui.Pagination(count=100, show_first_button=True, show_last_button=True)







            
            




size#


pn.ui.Column(*(
    pagination.clone(size=size)
    for size in pn.ui.Pagination.param.size.objects
))







            
            




variant#


pn.ui.Row(*(
    pagination.clone(variant=variant)
    for variant in pn.ui.Pagination.param.variant.objects
))







            
            






Icon Labels#


Material icon tokens like :material/zoom_out_map: render as icons in labels and option labels.


items = [
    {"label": ":material/zoom_out_map: Page 1"},
    {"label": ":material/zoom_out_map: Page 2"},
    {"label": ":material/zoom_out_map: Page 3"},
]

pn.ui.Pagination(count=len(items), label=":material/zoom_out_map: Pages")







            
            




API Reference#




Parameters#


The Pagination exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:


pn.ui.Pagination().api(jslink=True)







            
            






References#


Panel Documentation:



Material UI Pagination: