Blazor, MudBlazor and dynamically creating a MudTable from a data source with an unknown number of columns

Question

new to Blazor and MudBlazor. I have picked up a Blazor project that is using MudBlazor for the UI. I have a requirement to be able to dynamically create a sortable, orderable and filterable table and I am told that I need to use MudBlazor to do this. Previously I have been easily able to do this using Javascript and HTML but my problem is I dont quite understand how to create a table dynamically using MudBlazor and their own documentation is not very clear either. This is what I am trying to do:

<MudTable ServerData="@(new Func<TableState, Task<TableData<EntityRowDto>>>(GetEntityRowData))" @ref="rowTable" Elevation="1" Hover Striped Loading>
<HeaderContent>
    @{
        for (int i = 0; i < rowTable.Items.ElementAt(0).SourceRowJsonProperties.Keys.Count; i++)
        {
            <MudTh>@rowTable.Items.ElementAt(0).SourceRowJsonProperties.ElementAt(i).Key</MudTh>
        }
    }
</HeaderContent>
<RowTemplate>
    @{
        for (int outer = 0; outer < rowTable.Items.Count(); outer++)
        {
            @for (int i = 0; i < rowTable.Items.ElementAt(outer).SourceRowJsonProperties.Keys.Count; i++)
            {
                <MudTd>@rowTable.Items.ElementAt(outer).SourceRowJsonProperties.ElementAt(i).Value</MudTd>
            }
        }
    }
</RowTemplate>
<NoRecordsContent>
    <MudText>No rows found</MudText>
</NoRecordsContent>
<LoadingContent>
    <MudText>
        Loading...
    </MudText>
</LoadingContent>
<PagerContent>
    <MudTablePager />
</PagerContent>

@code {
private MudTable<EntityRowDto>? rowTable;

private async Task<TableData<EntityRowDto>> GetEntityRowData(TableState state)
{
    var pageNumber = state.Page == 0 ? 1 : state.Page;
    var url = $"api/entityrow?pageNumber={pageNumber}&pageSize={state.PageSize}";

    var response = await Http.GetFromJsonAsync<PagedResponse<EntityRowDto>>(url);

    return new TableData<EntityRowDto>
        {
            TotalItems = response?.Metadata.TotalItemCount ?? 0,
            Items = response?.Items ?? Enumerable.Empty<EntityRowDto>()
        };
}

}

This compiles ok but it errors when I run it and I assume it is because I am not accessing the data context correctly for the MudTable?

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Value cannot be null. (Parameter 'source') System.ArgumentNullException: Value cannot be null. (Parameter 'source') at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument) at System.Linq.Enumerable.ElementAt[EntityRowDto](IEnumerable`1 source, Int32 index) at Deltafs.Integrations.Dashboard.Client.Components.EntityRows.EntityRowTable.b__0_0(RenderTreeBuilder __builder2) in C:\Data Migration V2\DataMigration.Reporting\Deltafs.Integrations.Dashboard.Client\Components\EntityRows\EntityRowTable.razor:line 10

Is what I am trying to do possible? How do I access the data context for the mudTable once it has been assigned?

Any advice greatly appreciated.

Answer 1

Can you post the working code for this? This would be very helpful for others running into the same problem.

Thanks

Mark