Pagination#

Download this notebook from GitHub (right-click to download).

import panel as pn
import panel_material_ui as pmui

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 = pmui.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:


pmui.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 pmui.Pagination.param.color.objects
), ncols=2)












shape#


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












show_first_button/show_last_button#


pmui.Pagination(count=100, show_first_button=True, show_last_button=True)












size#


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












variant#


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














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:


pmui.Pagination().api(jslink=True)














References#


Panel Documentation:



Material UI Pagination:





Download this notebook from GitHub (right-click to download).