Data grid

DataGrid<TRowData> renders a <table> from the DataGridColumn<TRowData> components it contains:

@page "/datagrid"
@inject WeatherForecastClient WeatherForecastClient

<h1>DataGrid</h1>

<DataGrid Items="@data" class="table">
    <DataGridColumn TRowData="WeatherForecast" Expression="item=>item.Date" Format="D" />
    <DataGridColumn TRowData="WeatherForecast" Expression="item=>item.Summary" />
    <DataGridColumn TRowData="WeatherForecast" Expression="item=>item.TemperatureC" Title="Temp. (C)" />
    <DataGridColumn TRowData="WeatherForecast" Title="Temp. (F)">@context.TemperatureF</DataGridColumn>
</DataGrid>

@code {
    private IReadOnlyList<WeatherForecast>? data;

    protected override async Task OnInitializedAsync()
    {
        data = await WeatherForecastClient.GetAsync();
    }
}

A column displays the value of its Expression, or its content when it has one; the content receives the row as context. Columns must be inside a DataGrid: a column outside one throws an InvalidOperationException.

Columns

The title can only be inferred from a member access, such as item => item.Date. For any other expression, set Title, or rendering throws a NotSupportedException.

TRowData must be set on each column, because a column cannot infer it from the grid.

Rows

<DataGrid Items="@orders" class="table" RowKey="@(order => order.Id)" RowClass="@GetRowClass">
    <DataGridColumn TRowData="Order" Expression="order => order.Id" Title="#" />
    <DataGridColumn TRowData="Order" Expression="order => order.Customer" />
    <DataGridColumn TRowData="Order" Expression="order => order.Total" Format="0.00" />
    <DataGridColumn TRowData="Order" Title="Status">
        @(context.IsLate ? "Late" : "On time")
    </DataGridColumn>
</DataGrid>

@code {
    private readonly List<Order> orders =
    [
        new Order(1, "Alice", 12.5m, IsLate: false),
        new Order(2, "Bob", 99m, IsLate: true),
    ];

    private static string GetRowClass(Order order, int rowIndex)
    {
        if (order.IsLate)
            return "table-warning";

        return rowIndex % 2 == 0 ? "even" : "odd";
    }

    private sealed record Order(int Id, string Customer, decimal Total, bool IsLate);
}

• RowClass returns the CSS class of a row from the item and its index.
• RowKey returns a stable, unique key for each row, used as the @key of the <tr>. With a key, Blazor keeps the right row elements when items are inserted, removed or reordered. Without it, the row index is used. Keys must be unique: a duplicate key makes the renderer throw.
• Any other attribute, such as class, is applied to the <table> element.

Columns can be added or removed conditionally (@if around a column): the grid follows.