Blazor Grid - Paging

Grid Paging

Smart.Grid allows you to split rows into multiple pages. It also provides a built-in customizable navigation menu to navigate between pages.

The behavior of the paging functionality is mainly described inside the GridPaging and GridPager functions

GridPager describes the customization options of the pager, such as Visibility, Position, NavigationButtons and many more

GridPaging describes the functionality settings of the pager, such as Enabled, PageSize, PageIndex and many more

@inject WeatherForecastService ForecastService

<Grid @ref="grid" DataSource="@forecast" Paging="@paging" Pager="@pager">
      <Column DataField="Date" Label="Date" DataType="date" CellsFormat="M"></Column>
      <Column DataField="TemperatureC" Label="Temp. (C)"></Column>
      <Column DataField="TemperatureF" Label="Temp. (F)"></Column>
      <Column DataField="Summary" Label="Summary"></Column>

@code {
  Grid grid;

  GridPaging paging = new GridPaging() 
      Enabled = true,
      PageSize = 10,
      PageIndex = 0
  GridPager pager = new GridPager() { 
      Visible = true,
      Position = LayoutPosition.Far,
      NavigationInput = new GridPagerNavigationInput(){
          Visible = true

  private WeatherForecast[] forecast;

  protected override async Task OnInitializedAsync()
      forecast = await ForecastService.GetForecastAsync(DateTime.Now);
Grid with paging


The GridPager object has the following properties:

  • AutoEllipsis - sets the ellipsis display mode
    Accepts GridPagerAutoEllipsis.Both(default) | None | Before | After
  • Position - sets the position of pager
    Accepts LayoutPosition.Far(default) | Near
  • Template - sets a template for the pager
    Accepts object - default: ""
  • PageSizeSelector - describes the settings for the 'rows per page' option
    Accepts GridPagerPageSizeSelector() object
  • Summary - describes the summary settings
    Accepts GridPagerSummary() object
  • NavigationButtons - describes the navigation buttons settings
    Accepts GridPagerNavigationButtons() object
  • NavigationInput - describes the settings about navigation input option
    Accepts GridPagerNavigationInput() object
  • PageIndexSelectors - describes the settings for the numeric page buttons
    Accepts GridPagerPageIndexSelectors() object
  • Visible - sets the visibility of pager
    Accepts true | false(default)


The GridPaging object has the following properties:

  • Enabled - enables pagination
    Accepts true | false(default)
  • Spinner - describes the spinner pagination settings
    Accepts GridPagingSpinner() object
  • PageSize - sets the number of rows per page
    Accepts integer - default: 10
  • PageIndex - sets the start page
    Accepts integer - default: 0