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.