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:

• Header drag: grab a column header's grip, or drag from anywhere in the header's title/sort area — a small movement threshold (mouse) keeps a plain click free to sort, while a brief press-and-hold arms the drag on touch/pen so a quick tap still sorts and a swipe still scrolls the page. The dragged header lifts slightly (a subtle scale + shadow) and follows your pointer in place — no ghost image, no drop-indicator line. Neighbouring columns live-shift aside as you cross their midpoint, continuously previewing the final order; release settles the column into its slot with a short animation, and the container auto-scrolls if you hold near its edge. Attempting to drag a locked (non-reorderable) column instead gives it a small nudge to signal it can't move. One unified pointer-based path drives mouse, touch, and pen — native HTML5 drag-and-drop is not used at all, for reordering OR for drag-to-group (see below): the same drag that reorders a column within the header row also groups it if you release over the group panel instead, which is what makes drag-to-group work on touch too (native HTML5 DnD never fired there).
• Keyboard: focus a column header (roving tab stop, like the rest of the grid) and press Alt+← / Alt+→ to move it one slot at a time within its pin partition. The move is announced to screen readers via a polite live region.
• Columns panel: open the Toggle Columns popover from the toolbar and drag the column rows to reorder them. The list is keyboard-reorderable, making it another pointer-free path for users who can't drag the header.

Reordering is constrained to a column's pin partition: a left-pinned column can only move among the left-pinned columns, an unpinned column among the unpinned columns, and so on — a cross-boundary drop is rejected. To lock an individual column's position entirely (for example, a required identifier), set Reorderable="false" on that DataGridColumnDef; both the header drag and the Columns panel respect the 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.