MudBlazor

Pagination

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

Usage

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>Selected page: @_selected</MudText>
@code {
    private int _selected = 1;
}

Variants

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" />

Disabled

Pagination can be disabled with the Disabled prop.

<MudPagination Disabled="true" Count="3" />

Rectangular

<MudPagination Rectangular="true" Variant="Variant.Text" Count="6"/>
<MudPagination Rectangular="true" Variant="Variant.Filled" Count="6" />
<MudPagination Rectangular="true" Variant="Variant.Outlined" Count="6"/>

Sizes

<MudPagination Size="Size.Small" Variant="Variant.Filled" Count="6"/>
<MudPagination Size="Size.Medium" Variant="Variant.Filled" Count="6"/>
<MudPagination Size="Size.Large" Variant="Variant.Filled" Count="6"/>

Control buttons

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

  • ...

  • ...

<MudPagination ShowPreviousButton="false" ShowNextButton="false" Count="11"/>
<MudPagination ShowFirstButton="true" ShowLastButton="true" Count="11"/>

Item count

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

  • ...

  • ...

  • ...

  • ...

<MudPagination BoundaryCount="1" MiddleCount="1" Count="22" @bind-Selected="@_selected"/>
<MudPagination BoundaryCount="2" MiddleCount="5" Count="22" @bind-Selected="@_selected"/>
@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">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <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>
    </RowTemplate>
    <PagerContent>
        <MudPagination SelectedChanged="PageChanged" Count="@((_table.GetFilteredItemsCount() + _table.RowsPerPage - 1) / _table.RowsPerPage)" Class="pa-4"/>
    </PagerContent>
</MudTable>
@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);
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙