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 of the bar, one of ‘default’, ‘primary’, ‘secondary’, ‘success’, ‘info’, ‘warning’, ‘danger’, ‘light’ or ‘dark’.
    • 

  • 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
))







            
            






Controls#


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


pmui.Row(pagination.controls(jslink=True), pagination)







            
            


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