Blazorise DataGrid: Paging

Paging provides an option to display DataGrid data in pages.

Overview

With the paging enabled, users can easily navigate the DataGrid by clicking on a page button. This can be particularly useful when working with large sets of data.

Examples

Paging

Paging is handled automatically by the DataGrid. To show the pager you need to enable the ShowPager parameter.

To show the pager you need to enable the ShowPager parameter.

  • PageSize the maximum number of items for each page.
  • CurrentPage current page number.
  • PreviousPageButtonTemplate template for previous page button
  • NextPageButtonTemplate template for next page button
  • FirstPageButtonTemplate template for first page button
  • LastPageButtonTemplate template for last page button
  • PageButtonTemplate template for explicated page button with PageButtonContext as parameter
  • PagerOptions will provide you with additional settings to customize your pager.

Pager Customization Example

Below you will find a fully customized pager.
  • 1
  • 2
  • 3
  • 4
  • 5
499 total items
499
#
First Name
Last Name
Email
Salary
1SamuelCollierSamuel.Collier62@gmail.com86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.com61 781,31 €
3GeraldPollichGerald82@yahoo.com58 810,75 €
4CoraConnCora27@yahoo.com84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com69 318,29 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
7GregoryRennerGregory63@hotmail.com57 456,82 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
9MerlePacochaMerle3@gmail.com55 349,94 €
10AngelinaWardAngelina42@gmail.com73 625,86 €
  • 1
  • 2
  • 3
  • 4
  • 5
499 total items
499
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          ShowPager
          ShowPageSizes
          PagerPosition="DataGridPagerPosition.TopAndBottom"
          PagerOptions="new(){ ButtonSize=Size.Small }">
    <DataGridColumns>
        <DataGridCommandColumn />
        <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
        <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
        <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
        <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
        <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable>
            <EditTemplate>
                <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
            </EditTemplate>
        </DataGridColumn>
    </DataGridColumns>
    <PageButtonTemplate>
        <Span TextColor="TextColor.Success">
            @context.PageNumber
        </Span>
    </PageButtonTemplate>
    <NextPageButtonTemplate><Icon Name="IconName.StepForward" TextColor="TextColor.Success" /></NextPageButtonTemplate>
    <PreviousPageButtonTemplate><Icon Name="IconName.StepBackward" TextColor="TextColor.Success" /></PreviousPageButtonTemplate>
    <LastPageButtonTemplate><Icon Name="IconName.Forward" TextColor="TextColor.Success" /></LastPageButtonTemplate>
    <FirstPageButtonTemplate><Icon Name="IconName.Backward" TextColor="TextColor.Success" /></FirstPageButtonTemplate>
    <TotalItemsTemplate><Badge Color="Color.Success">@context.TotalItems total items</Badge></TotalItemsTemplate>
    <TotalItemsShortTemplate><Badge Color="Color.Success">@context.TotalItems</Badge></TotalItemsShortTemplate>
    <ItemsPerPageTemplate></ItemsPerPageTemplate>
    <PageSelectorTemplate>
        <Select TextColor="TextColor.Success" @bind-SelectedValue="@context.CurrentPage" Size="Size.Small">
            @for ( int i = context.FirstVisiblePage; i <= context.LastVisiblePage; ++i )
            {
                var pageNumber = i;
                <SelectItem Value="@pageNumber">@pageNumber</SelectItem>
            }
        </Select>
    </PageSelectorTemplate>
    <PageSizesTemplate>
        <Select TextColor="TextColor.Success" @bind-SelectedValue="@context.CurrentPageSize" Size="Size.Small">
            @foreach ( var curPageSize in context.PageSizes )
            {
                <SelectItem Value="@curPageSize">@curPageSize</SelectItem>
            }
        </Select>
    </PageSizesTemplate>
</DataGrid>

@code{
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page