Dynamic Table Columns

[hsin19]

I want to dynamically display the columns on the table.

Data Model

public class VM
{
    public string Fix { get; set; }

    public Dictionary<string, string> Dynamic { get; set; }
}

.razor

<TableColumns>
    <TableColumn @bind-Field="@context.Fix" Sortable="true" Filterable="true" />
    @foreach (var element in DynamicList)
    {
        <TableColumn @bind-Field="@context.Dynamic" Text="@element" Filterable="true">
            <Template Context="value">
                <div>@(value.Value.TryGetValue(element, out string? v) ? v : "")</div>
            </Template>
            <FilterTemplate>
                <MyStringFilter FieldName="@element"/>
            </FilterTemplate>
        </TableColumn>
    }
</TableColumns>

Everything works as expected, except for filter and sort icons and column lists. They will act at the same time because they use the same field name.

I tried to set the FieldName but that gives more errors.

Describe the solution you'd like

I currently make DMO implement DynamicObject and modify GetPropertyValueLambda to support dynamic.

public class VM : System.Dynamic.DynamicObject
{
    public override bool TryGetMember(GetMemberBinder binder, out object? result)
    {
        ...
    }

    public override bool TrySetMember(SetMemberBinder binder, object? value)
    {
        ...
    }

@foreach (var element in DynamicList)
{
    <TableColumn Field="@element" FieldName="@element" Text="@element" Filterable="true />
}

I hope this can be merged or any other way to support dynamic columns.

[ArgoZhang]

@hsin19 great work. can you submit a branch and repro this? let us review this feature

[hsin19]

@ArgoZhang I have uploaded my modifications here feat-dynamic, or you want a demo?

Actually, it's tricky and uncommon, maybe TableColumn for the Dictionary is more general.

<DictionaryTableColumn @bind-Field="@context.Dic" Key="@key">

[ArgoZhang]

@hsin19 sorry for the delayed reply. let me take a look

[ArgoZhang]

@hsin19 hi, can you submit a sample for this feature in the feat-dynamic branch?

[hsin19]

@ArgoZhang Sample has been pushed, and currently supports BootstrapBlazor.Components.IDynamicObject too, maybe this is better.

[ArgoZhang]

@hsin19 bro. I have to take a look at this sample. it's a good job. I have some question

1. DynamicList is wired and needs to find a better way

private readonly string[] DynamicList = new[] { "A", "B", "C", "Z" };

2. System.Dynamic.DynamicObject.GetDynamicMemberNames should be use. how?

BTW: I update the sample. please take a look when your feel free.

[hsin19]

@ArgoZhang I have changed the sample which close to what I actually use.

1. DynamicList will not be the readonly array, people need to change this according to their needs. https://github.com/dotnetcore/BootstrapBlazor/blob/3e789dd7c64f65e219221b28fdd37389720e91dc/src/BootstrapBlazor.Shared/Samples/Table/TablesDynamicObject.razor.cs#L31

   It will use the last five minutes as a column here.

2. You can override it, but I think it is not necessary.

   https://github.com/dotnetcore/BootstrapBlazor/blob/3e789dd7c64f65e219221b28fdd37389720e91dc/src/BootstrapBlazor.Shared/Data/CustomDynamicData.cs#L42-L45

[ArgoZhang]

@hsin19 I updated the sample. please submit a PR if you feel is ok. thank you very much