Blazor DataGrid using DataTable

Viewed 179

I need a DataGrid in Blazor that uses a DataTable/DataSet

1 Answers

I was curious myself and I gave it a try. This works:

@using System.Data
@using Microsoft.AspNetCore.Components.QuickGrid
@inject DataService DataService

@if (table.Rows.Count > 0)
{
    <div style="height:25em; overflow:scroll">
        <QuickGrid TGridItem="DataRow" ItemsProvider="provider" Virtualize="true" ItemSize="35">
            @foreach (DataColumn column in table.Columns)
            {
                <PropertyColumn Property="@(c => c[column.ColumnName])" Sortable="true">
                    <HeaderTemplate>
                        @column.ColumnName
                    </HeaderTemplate>
                </PropertyColumn>
            }
        </QuickGrid>
    </div>
}

@code
{
    DataTable table = new();
    //IQueryable<DataRow> = table.AsQueryable();
    GridItemsProvider<DataRow>? provider;

    void Load(int setNum)
    {
        table = DataService.GetDataTable(setNum);   // some testdata
        var rows = table.AsEnumerable().ToList(); 
        var providerResult = GridItemsProviderResult
            .From<DataRow>(rows, rows.Count);
        provider = req => ValueTask.FromResult(providerResult);
    }

    protected override void OnInitialized()
    {
        Load(1);
    }
}

As you can see you will need some wrapping. DataTable is not Linq compatible, DataTable.Rows is an ICollection but not an ICollection<DataRow>.

The Virtualize option makes rendering a snap, even with 100k records.
I didn't look at Sorting yet, shouldn't be too difficult to implement.

Related