This component allows the user to select a specific page from a range of pages.


Pagination displays the number of pages based on the Count prop, with prev and next buttons surrounding it.
The selected index can be binded with Selected prop.

Selected page: 1

<MudPagination Color="Color.Primary" Count="4" @bind-Selected="@_selected"/>

<MudText Align="Align.Center">Selected page: @_selected</MudText>
@code {
    private int _selected = 1;

The default variant is Text but can be changed to both Filled and Outlined

<MudPagination Variant="Variant.Filled" Count="4"/>
<MudPagination Variant="Variant.Outlined" Count="4" />

Pagination can be disabled with the Disabled prop.

<MudPagination Disabled="true" Count="3" />
<div class="d-flex flex-column align-center">
    <MudPagination Rectangular="true" Variant="Variant.Text" Count="6" />
    <MudPagination Rectangular="true" Variant="Variant.Filled" Count="6" Class="my-4" />
    <MudPagination Rectangular="true" Variant="Variant.Outlined" Count="6" />
<div class="d-flex flex-column align-center">
    <MudPagination Size="Size.Small" Variant="Variant.Filled" Count="6"/>
    <MudPagination Size="Size.Medium" Variant="Variant.Filled" Count="6" Class="my-4"/>
    <MudPagination Size="Size.Large" Variant="Variant.Filled" Count="6"/>
Control buttons

You can show/hide the first, last, next and previous buttons.

  • ...

  • ...

<div class="d-flex flex-column align-center">
    <MudPagination ShowPreviousButton="false" ShowNextButton="false" Count="11"/>
    <MudPagination ShowFirstButton="true" ShowLastButton="true" Count="11" Class="mt-4"/>
Item count

The parameter BoundaryCount and MiddleCount specify the number of items displayed before, between and after the ellipsis.

  • ...

  • ...

  • ...

  • ...

<div class="d-flex flex-column align-center">
    <MudPagination BoundaryCount="1" MiddleCount="1" Count="22" @bind-Selected="@_selected" />
    <MudPagination BoundaryCount="2" MiddleCount="5" Count="22" @bind-Selected="@_selected" Class="mt-4" />
@code {
    private int _selected = 11;
Table pagination

The SelectedChanged event callback can be used to control a different component. This example shows how to navigate through the pages of a MudTable.

Nr Sign Name Position Molar mass
1 H Hydrogen 0 1.00794
2 He Helium 17 4.002602
3 Li Lithium 0 6.941
4 Be Beryllium 1 9.012182
  • ...

@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient
@using System.Net.Http.Json

<MudTable @ref="@_table" Items="@_elements" RowsPerPage="4" Hover="true" Breakpoint="Breakpoint.Sm" LoadingProgressColor="Color.Info">
        <MudTh>Molar mass</MudTh>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
        <MudPagination SelectedChanged="PageChanged" Count="@((_table.GetFilteredItemsCount() + _table.RowsPerPage - 1) / _table.RowsPerPage)" Class="pa-4"/>
@code {
    private MudTable<Element> _table;
    private IEnumerable<Element> _elements = new List<Element>();

    protected override async Task OnInitializedAsync()
        _elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");

    private void PageChanged(int i)
        _table.NavigateTo(i - 1);

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.5

An unhandled error has occurred. Reload 🗙