Create a reusable DataGrid component by wrapping the exisintg Table component

[nyikozoli]

Hi,
I want to create a grid component to add custom logic and markup around the existing functionalities of the Table component, which then can be reused easily, and provides consistency in the application.

This is how the custom grid component DataGrid.razor looks like, using Ant Design Table component. It's not inherited from the Table component!

@typeparam TItem

<Table @ref="_tableRef" Class="data-grid" TItem="TItem" DataSource="@Items" Responsive>
    <TitleTemplate>
        @* my custom title template *@
    </TitleTemplate>

    <ColumnDefinitions>
        <Selection Width="50" Key="@(context.Id.ToString())" Fixed="left" />

        <ActionColumn Fixed="left" Width="100">
          @* my custom action columns *@
        </ActionColumn>

        @if (@ChildContent != null)
        {
            <CascadingValue Value="@_tableRef" TValue="ITable" IsFixed>
                <CascadingValue Value=@typeof(TItem) Name="ItemType" IsFixed>
                    @ChildContent
                </CascadingValue>
            </CascadingValue>
        }
        else
        {
            <GenerateColumns Range="1.." Definitions=@SetColumnDefinitions />
        }
    </ColumnDefinitions>
</Table>

Usage:

<DataGrid OnAdd="CreateUser"
          OnDelete="DeleteUser"
          OnEdit="EditUser"
          Title="@Locals[Translations.User_Management]"
          TItem="EmailLogin"
          Items="_users">

    @* this works because I specified the TItem, TProp params *@
    <PropertyColumn TItem="EmailLogin" TProp="string" Property="c=>c.User.UserName" Sortable Filterable  />

    @* this doesn't works because I didn't specified the TItem, TProp params explicitly *@    
    <PropertyColumn Property="c=>c.Email" Sortable Filterable />

</DataGrid>

As you can see I'm having difficulties to figure out how can i achive a clean, elagant solution just by using CascadingValue to pass down the right parameters, to not have to specify explicitly the PropertyColumn TItem, and TProp parameters.
I wonder if this is the right approach, or if it's achieveable what I want :)

Thanks for your answer in advance!

[ElderJames]

Hello @nyikozoli , please try to setup [CascadingTypeParameter(nameof(TItem))] for the DataGrid component.

[nyikozoli]

Thanks!

[ElderJames]

Hi @nyikozoli, would you please share your DataGrid component with us? It maybe help people achieve more.

[nyikozoli]

Well maybe it's a bit specific to our use case, but we wanted a component to easily and quickly handle simple crud operations without too much code repetition.
So we have a component CrudPage where we use this DataGrid and a Drawer with a form, so we can quickly create a simple crud page for a view model with in place validations, and we can focus more on the real features 😄

@typeparam TItem
@attribute [CascadingTypeParameter(nameof(TItem))]

<Table Class="data-grid" TItem="TItem" DataSource="@Items" Loading="@_isLoading" Responsive>
    <TitleTemplate>
        @* title template *@
    </TitleTemplate>

    <ColumnDefinitions>
        @if (ChildContent != null)
        {
            @ChildContent(context)
        }
        else
        {
            <GenerateColumns Range="1.." Definitions=@SetColumnDefinitions/>
        }
        <ActionColumn Class="action-columns" Fixed="right" Width="100" Title="Title">
            @* action columns *@
        </ActionColumn>
    </ColumnDefinitions>
</Table>