How to dynamically change the MudTable's SortLabel and SortDirection in MudBlazor?

Question

I created a table using MudBlazor's MudTable, which retrieves data from the database through the ServerData property and supports sorting, searching, and filtering functionalities. Here's a portion of the code.

@inject NavigationManager NavigationManager;
@inject HttpClient httpClient
@using BlazorApp1.Data

<MudTable @ref="itemTable" Dense="true" Hover="true" Striped="true" Bordered="true" Breakpoint="Breakpoint.Sm" ServerData="@(new Func<TableState, Task<TableData<Item>>>(ServerReload))">
    <NoRecordsContent>
        <MudButton @onclick="Refresh" Variant="Variant.Outlined" Color="Color.Info">
            Click here to reload data from database
        </MudButton>
    </NoRecordsContent>
    <ColGroup>
        <col style="width: 60px;" />
    </ColGroup>
    <HeaderContent>
        <MudTh><MudTableSortLabel SortLabel="property_no_field" T="Item">Serial Number</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="name_field" T="Item">Name</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Serial Number"></MudTd>
        <MudTd DataLabel="Name"></MudTd>
    </RowTemplate>
    <LoadingContent>
        <MudText>Loding Data...</MudText>
    </LoadingContent>
</MudTable>

@code {
    private MudTheme Theme = new MudTheme();
    private MudTable<Item> itemTable { get; set; }
    private int totalItems = 0;

    private async Task<TableData<Item>> ServerReload(TableState state)
    {
        IEnumerable<Item> data = await httpClient.GetFromJsonAsync<List<Item>>(NavigationManager.BaseUri + "api/item");
        await Task.Delay(100);
        totalItems = data.Count();
            switch (state.SortLabel)
            {
                case "property_no_field":
                    data = data.OrderByDirection(state.SortDirection, o => o.property_no);
                    break;
                case "name_field":
                    data = data.OrderByDirection(state.SortDirection, o => o.name);
                    break;
            }
        return new TableData<Item>() { TotalItems = totalItems, Items = data };
    }
    private void Refresh()
    {
        // need to reset SortLabel and SortDirection here

        itemTable.ReloadServerData();
    }
}

My question is, is there a way to manually change the SortLabel and SortDirection of the MudTable, other than clicking on the Column Header? When I execute MudTable.ReloadServerData(), the SortLabel and SortDirection of the table are not reset, but I would like them to reset when the table reloads data from the database.

I have tried to manually manipulate the sorting direction using SortDirection and the onClick event in MudTableSortLabel.

<MudTh> <MudTableSortLabel SortLabel="property_no_field" T="Item" SortDirection=dire @onclick="@(() => {dire = ChangeDirection(dire;})"> Serial Number <MudTableSortLabel> <MudTh>

However, when I override onClick and click on the Column Header, the TableState does not update SortDirection and SortLabel. This means that I cannot control the SortDirection and SortLabel that TableState carries through setting SortDirection and the onClick event.

Answer 1

First set an InitialDirection in MudTableSortLabel :

<MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortLabel="property_no_field" T="Item">Serial Number</MudTableSortLabel></MudTh>

Then, in Refresh, you can call InitializeSorting() to reset to the InitialDirection

private void Refresh()
{
    // need to reset SortLabel and SortDirection here
    itemTable.TableContext.InitializeSorting();
    
    itemTable.ReloadServerData();
}