Child components as Parent properties in Blazor

[furqansafdar]

How to create a DataGrid component that can specify GridColumns as shown in the code below:

<DataGrid Items="@GridData">
    <DataGridColumns>
        <DataGridColumn Field="OrderId" Header="Order Id" Width="100"></GridColumn>
        <DataGridColumn Field="OrderDate" Header="Order Date" Width="120"></GridColumn>
    </GridColumns>
</DataGrid>

DataGrid is a templated component definition is as below:

@typeparam TItem
 
@functions {
    [Parameter] RenderFragment GridColumns { get; set; }
    [Parameter] IReadOnlyList<TItem> Items { get; set; }
}

Till now i have been able to get the Contents in DataGridColumns property. But my intent is to get the each DataGridColumn as collection to customize the rendering of the HTML by looping through each element but so far i am unable to work out how to approach this solution.

Desired HTML rendering for example:

<div>
    <colgroup>
        <col style="width: 100px;">
        <col style="width: 120px;">
    </colgroup>
    <thread>
        <tr>
            <th>
                <div style="text-align: right;">
                    <span>Order Id</span>
                </div>
            </th>
            <th>
                <div style="text-align: right;">
                    <span>Order Date</span>
                </div>
            </th>
        </tr>
    </thread>
    <!-- ... Rest of the HTML ... -->
</div>

[mkArtakMSFT]

Thanks for contacting us, @furqansafdar.
This is not very straight-forward currently. We plan to make this experience much better as part of #7268.
For now, you can have a look how community has created similar components.