DataGrid

Toolbar customization

The toolbar is composed of independent slots — Search, Columns, Export, and Expand — each togglable with its own parameter. Defaults preserve the full toolbar; opt-out by setting any of ShowSearch, ShowColumnChooser, ShowExport, or Expandable to false. For fine-grained control over which file formats appear in the Export dropdown, use the ExportFormats flags enum. This is especially useful in Blazor WebAssembly, where PDF generators like QuestPDF throw PlatformNotSupportedException — hide PDF by setting ExportFormats="DataGridExportFormat.Csv | DataGridExportFormat.Excel".

Filtering Extensibility

Column filters pick sensible defaults from FilterType, but two extension points let you customize the experience per-column without forking the grid.

Restricting operators per column

Pass a List<FilterOperator> to the Operators parameter to limit which operators the built-in filter popover shows. The grid intersects this list with the defaults for the column's FilterType, so nonsensical combinations (e.g. StartsWith on a Number column) are filtered out automatically.

<DataGridColumnDef TItem="Employee"
                   Title="Name"
                   Field="Name"
                   Filterable="true"
                   Operators="@(new List<FilterOperator> { FilterOperator.Equals, FilterOperator.StartsWith })" />

Custom filter UI via FilterTemplate

For columns that need a bespoke experience (range sliders, relative-date pickers, tag pickers, ...), supply a FilterTemplate. The render fragment receives a DataGridFilterTemplateContext exposing the field name, the currently-applied FilterDescriptor (or null), and an Apply callback. Invoke Apply with a descriptor to commit the filter, or with null to clear it.

<DataGridColumnDef TItem="Employee" Title="Salary" Field="Salary" Filterable="true">
    <FilterTemplate Context="ctx">
        <Slider Min="0" Max="200000" Value="_min" ValueChanged="v => _min = v" />
        <Button OnClick="@(async () => await ctx.Apply(
            new FilterDescriptor(ctx.Field!, FilterOperator.GreaterThanOrEqual, _min, FilterType: DataGridFilterType.Number)))">
            Apply
        </Button>
        <Button Variant="Button.ButtonVariant.Ghost" OnClick="@(async () => await ctx.Apply(null))">
            Clear
        </Button>
    </FilterTemplate>
</DataGridColumnDef>

What is not pluggable today (tracked for a future release): registering brand-new FilterOperator values, combining column filters with OR logic, and LINQ-expression compilation for server-side evaluation. Filters are always AND-combined across columns; within a column you get one operator + value at a time.

Saving and loading layouts

For full control over where layouts are stored (your own database, a REST API, cookies, etc.), use the programmatic JSON API. Capture a grid reference with @ref, then call ExportLayout() to get a JSON string and ApplyLayoutJsonAsync(json) to round-trip it later. The snapshot covers column order, widths, visibility, pin state, sorts, filters, global search, current page, page size, and the group panel (multi-level group fields) — both single and multi-level grouping levels round-trip.

<DataGrid @ref="_grid" TItem="Order" Items="_orders">
    <DataGridColumnDef TItem="Order" Field="Id" Title="ID" />
    <DataGridColumnDef TItem="Order" Field="Customer" Title="Customer" />
    <DataGridColumnDef TItem="Order" Field="Total" Title="Total" Format="C2" />
</DataGrid>

<Button OnClick="SaveLayout">Save layout</Button>
<Button OnClick="LoadLayout">Load layout</Button>

@code {
    private DataGrid<Order>? _grid;
    [Inject] MyAppDbContext Db { get; set; } = default!;

    private async Task SaveLayout()
    {
        if (_grid is null) return;
        var json = _grid.ExportLayout();
        await Db.UserLayouts.AddAsync(new UserLayout {
            UserId = CurrentUserId,
            GridKey = "orders",
            Json = json,
            SavedAt = DateTime.UtcNow
        });
        await Db.SaveChangesAsync();
    }

    private async Task LoadLayout()
    {
        if (_grid is null) return;
        var latest = await Db.UserLayouts
            .Where(l => l.UserId == CurrentUserId && l.GridKey == "orders")
            .OrderByDescending(l => l.SavedAt)
            .FirstOrDefaultAsync();
        if (latest is not null)
            await _grid.ApplyLayoutJsonAsync(latest.Json);
    }
}

The JSON shape is the public DataGridLayoutSnapshot record. The snapshot is versioned (Version: 2 today) so future breaking changes can be migrated; v1 payloads still load — the legacy single-level GroupBy field is honoured as a fallback when GroupByFields is absent. Columns referenced in a snapshot that no longer exist on the grid are silently ignored; columns present on the grid but missing from the snapshot are appended at the end.

Reorder columns

Set Reorderable="true" on the grid to enable column reordering. Users can reorder columns two ways:

• Drag-and-drop: grab a column header and drag it left or right. A 2px vertical drop indicator renders at the nearest column boundary to show where the column will land when released.
• Keyboard / menu arrows: open the Toggle Columns popover from the toolbar and use the up/down arrow buttons next to each column. This path is the accessible fallback for users who can't use pointer drag-and-drop.

To pin an individual column so it cannot be reordered (for example, a required identifier column), set Reorderable="false" on that DataGridColumnDef. Both the drag handle and the menu arrows respect this flag.

<DataGrid TItem="Order" Items="_orders" Reorderable="true">
    <DataGridColumnDef TItem="Order" Field="Id" Title="ID" Reorderable="false" />
    <DataGridColumnDef TItem="Order" Field="Customer" Title="Customer" />
    <DataGridColumnDef TItem="Order" Field="Total" Title="Total" Format="C2" />
</DataGrid>

Virtualization & large datasets

Lumeo's DataGrid supports two distinct strategies for large datasets — pick the one that matches where your data lives:

• Client virtualization — items are already in memory. Set ShowPagination="false" and pass all rows; once the row count exceeds VirtualizeThreshold (default 500), Blazor's built-in <Virtualize> renders only the rows in the viewport. Tune VirtualItemSize if your rows are denser/taller than the 41 px default — an inaccurate value makes the scrollbar drift. Paged grids never trigger this path because they only render PageSize rows at a time.
• Server-side paging — items live on a backend. Set ServerMode="true", handle OnServerRequest (Skip/Take/Sort/Filter), and report TotalCount. The grid shows numbered pages and the PageSizeOptions selector. Use this when you have many pages of data but only want to fetch one page at a time.

• Virtualised server mode (infinite scroll) — the third mode. Set Virtualized="true" + provide an OnRangeRequest callback. The grid drops pagination, renders one tall scrollable body, and fetches a sliding window of rows from your backend as the user scrolls. Sort, column filters and global search all trigger an automatic refetch via Virtualize.RefreshDataAsync() — no manual wiring needed. Use this when you have hundreds of thousands of rows and want a grid that feels native, not paged.