Flowbite Blazor

Pagination Examples

The Pagination component helps users navigate through pages of data with built-in accessibility features and customizable appearance.

Default Pagination #

Basic pagination with page info and navigation.


<Pagination CurrentPage="@currentPage"
            PageSize="10"
            TotalItems="100"
            OnPageChange="@(p => currentPage = p)" />

@code {
    private int currentPage = 1;
}

First/Last Buttons #

Enable quick navigation to first and last pages.


<Pagination CurrentPage="@currentPage"
            PageSize="10"
            TotalItems="200"
            ShowFirstLast="true"
            OnPageChange="@(p => currentPage = p)" />

Ellipsis Display #

Show ellipsis for large page ranges (enabled by default).


<Pagination CurrentPage="@currentPage"
            PageSize="10"
            TotalItems="1000"
            ShowFirstLast="true"
            OnPageChange="@(p => currentPage = p)" />

Size Variants #

Choose from small, default, or large button sizes.

Small

Default

Large


<Pagination Size="PaginationSize.Small" ... />
<Pagination Size="PaginationSize.Default" ... />
<Pagination Size="PaginationSize.Large" ... />

Go to Page #

Allow users to jump directly to a specific page.


<Pagination CurrentPage="@currentPage"
            PageSize="10"
            TotalItems="500"
            ShowGoToPage="true"
            OnPageChange="@(p => currentPage = p)" />

Page Size Selector #

Let users choose how many items to display per page.


<Pagination CurrentPage="@currentPage"
            PageSize="@pageSize"
            TotalItems="500"
            ShowPageSizeSelector="true"
            PageSizeOptions="@(new[] { 10, 25, 50, 100 })"
            OnPageChange="@(p => currentPage = p)"
            OnPageSizeChange="@(s => { pageSize = s; currentPage = 1; })" />

@code {
    private int currentPage = 1;
    private int pageSize = 10;
}

Full Featured #

Combine all features for maximum control.


<Pagination CurrentPage="@currentPage"
            PageSize="@pageSize"
            TotalItems="1500"
            ShowFirstLast="true"
            ShowGoToPage="true"
            ShowPageSizeSelector="true"
            OnPageChange="@(p => currentPage = p)"
            OnPageSizeChange="@(s => { pageSize = s; currentPage = 1; })" />

Without Info Text #

Hide the 'Showing X of Y' text.


<Pagination CurrentPage="@currentPage"
            PageSize="10"
            TotalItems="100"
            ShowInfo="false"
            OnPageChange="@(p => currentPage = p)" />

Custom Visible Pages #

Control how many page buttons are shown (with ellipsis disabled).


<Pagination CurrentPage="@currentPage"
            PageSize="10"
            TotalItems="200"
            MaxVisiblePages="7"
            ShowEllipsis="false"
            OnPageChange="@(p => currentPage = p)" />

Small Dataset #

Pagination adapts to small datasets.


<Pagination CurrentPage="1"
            PageSize="10"
            TotalItems="15"
            OnPageChange="@(p => {})" />