Setting MudTable Page, PageSize and Sorting from code section before first loading table data from backend

[rzymski]

Hi,

I would like to set page, page size and sort concrete column in chosen order from code, before loading my data from backend. How to do this properly?

Should I assign values to table.RowsPerPage and table.CurrentPage in OnInitializedAsync

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

<MudTable ServerData="ServerReload" @ref="table">
    <HeaderContent>
        <MudTh><MudTableSortLabel SortLabel="nr" T="Element">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="name" T="Element">Name</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>

@code {
    private IEnumerable<Element> pagedData;
    private MudTable<Element> table;
    private string _sortLabel = string.Empty;
    private SortDirection _sortDirection;
    private bool _initialSort = true;

    private int totalItems;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(300);

        // Let's assume we want to have:
        // sort by name in descending order
        // rows per page 25
        // go to third page (to see records from 51-75)
        _sortLabel = "name";
        _sortDirection = SortDirection.Descending;
        table.RowsPerPage = 25;
        table.CurrentPage = 2; // indexing from 0
    }

    private async Task<TableData<Element>> ServerReload(TableState state, CancellationToken token)
    {
        if (_initialSort)
        {
            _initialSort = false;
        }
        else
        {
            _sortLabel = state.SortLabel;
            _sortDirection = state.SortDirection;
        }

        IEnumerable<Element> data = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable", token);
        totalItems = data.Count();

        switch (_sortLabel)
        {
            case "nr":
                data = data.OrderByDirection(_sortDirection, o => o.Number);
                break;
            case "name":
                data = data.OrderByDirection(_sortDirection, o => o.Name);
                break;
        }

        pagedData = data.Skip(state.Page * state.PageSize).Take(state.PageSize).ToArray();
        return new TableData<Element>() {TotalItems = totalItems, Items = pagedData};
    }
}

using System.Collections.Generic;
using System.Text.Json.Serialization;

namespace MudBlazor.Examples.Data.Models
{
    public class Element
    {
        public string Name { get; set; }
        public int Number { get; set; }
    }
}

or maybe use bind?

<MudTable ServerData="ServerReload" @ref="table" @bind-CurrentPage="_currentPage" @bind-RowsPerPage="_rowsPerPage">


@code {
    private MudTable<Element> table;
    private int _currentPage;
    private int _rowsPerPage = 10;

    protected override void OnInitialized()
    {
        _sortLabel = "name";
        _sortDirection = SortDirection.Descending;
        _rowsPerPage = 25;
        _currentPage = 2;
    }
}

or use SetRowsPerPage and NavigateTo?

protected override async Task OnInitializedAsync()
    {
        await Task.Delay(300);

        _sortLabel = "name";
        _sortDirection = SortDirection.Descending;
        table.SetRowsPerPage(25)
        table.NavigateTo(2);
    }

or maybe there's a better way to do it?

[rzymski]

My final solution on Blazor Server Side with Mudblazor 8.7 was using

• For controlling page:
  • @bind-CurrentPage
• For controlling page size:
  • RowsPerPage, RowsPerPageChanged (but in method for RowsPerPageChanged I didn't call StateHasChanged)
• Controlling sorting was more complicated, because it required setting in every MudTableSortLabel separately:
  • SortDirection and SortDirectionChanged

I did it that way because there were problems with using both @bind-CurrentPage and @bind-RowsPerPage simultaneously since both of these call StateHasChanged() when the value changes, so when I was setting both of them, I was often getting a cancellation error.

In that basic example it may not be necessary, but when I was having a very long asynchronous loading data, to prevent any races when the table renders, before I loaded data, I was using a flag to render the table only after I loaded that data.

Previous example done that way:

@using System.Net.Http.Json
@using System.Threading
@inject HttpClient httpClient

@if (!_restoredState)
{
    <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large"/>
}
else
{
    <MudTable ServerData="ServerReload" 
            @ref="table" 
            @bind-CurrentPage="_page" 
            RowsPerPage="@_pageSize" 
            RowsPerPageChanged="PageSizeChanged">
        <HeaderContent>
            <MudTh>
                <MudTableSortLabel SortLabel="nr" 
                                   T="Element"
                                   SortDirection="@(GetSortDirection("nr"))" 
                                   SortDirectionChanged="@(dir => SetSort("nr", dir))">
                    Nr
                </MudTableSortLabel>
            </MudTh>
            <MudTh>
                <MudTableSortLabel SortLabel="name"
                                   T="Element"
                                   SortDirection="@(GetSortDirection("name"))" 
                                   SortDirectionChanged="@(dir => SetSort("name", dir))">
                    Name
                </MudTableSortLabel>
            </MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Nr">@context.Number</MudTd>
            <MudTd DataLabel="Name">@context.Name</MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager />
        </PagerContent>
    </MudTable>
}



@code {
    private IEnumerable<Element> pagedData;
    private MudTable<Element> table;

    private int totalItems;

    private bool _restoredState;
    private int _page;
    private int _pageSize;

    private void PageSizeChanged(int pageSize)
    {
        if (_pageSize == pageSize) return;
        _pageSize = pageSize;
        _page = 0;
        // don't call there StateHasChanged(), since it would be called anyway by @bind-CurrentPage
    }

    private string _sortLabel = string.Empty;
    private SortDirection _sortDirection;

    private SortDirection GetSortDirection(string field) => _sortLabel == field ? _sortDirection : SortDirection.None;
    
    private void SetSort(string field, SortDirection direction)
    {
        _sortLabel = direction != SortDirection.None ? field : string.Empty;
        _sortDirection = direction;
    }

    protected override async Task OnInitializedAsync()
    {
        // Let's assume we want to have:
        // sort by name in descending order
        // rows per page 25
        // go to third page (to see records from 51-75)
        _pageSize = 25;
        _page = 2; // indexing from 0
        _sortLabel = "name";
        _sortDirection = SortDirection.Descending;

        await Task.Delay(3000); // long operation
        _restoredState = true; // flag to prevent rendering table, before loading table initial state to prevent races if we have long operation before
        StateHasChanged();
    }

    private async Task<TableData<Element>> ServerReload(TableState state, CancellationToken token)
    {
        IEnumerable<Element> data = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable", token);
        totalItems = data.Count();

        switch (_sortLabel)
        {
            case "nr":
                data = data.OrderByDirection(_sortDirection, o => o.Number);
                break;
            case "name":
                data = data.OrderByDirection(_sortDirection, o => o.Name);
                break;
        }

        pagedData = data.Skip(state.Page * state.PageSize).Take(state.PageSize).ToArray();
        return new TableData<Element>() {TotalItems = totalItems, Items = pagedData};
    }

    public class Element
    {
        public string Name { get; set; }
        public int Number { get; set; }
    }
}

[versile2]

A similar concept can be set by setting the ServerData="ServerReload" to a null Function variable. Then when you are ready for data set the function and call grid.ReloadServerData() (or something similar). That way your grid can do all it's drawing and logic before you actually load the data.

[mguinness]

For others landing here, also take a look at #10702.

Using CurrentPage doesn't work well, so adding a page parameter to ReloadServerData() would help.

public Task ReloadServerData(int? page = null)
{
    if (page is not null)
        _currentPage = page;
    return InvokeServerLoadFunc();
}