DataGrid

A full-featured data grid for Blazor with sorting, filtering, paging, virtual scrolling, grouping, inline editing, row selection, column templates, column reorder, stacked headers, infinite scroll, cell tooltips, copy with headers, conditional formatting, ObservableCollection binding, and CSV/Excel/PDF export. Works in Server, WebAssembly, and Auto render modes.

Installation

dotnet add package Arcadia.DataGrid

Add the stylesheet to your App.razor or _Host.cshtml:

<link href="_content/Arcadia.DataGrid/css/arcadia-datagrid.css" rel="stylesheet" />

No service registration is required. The component is ready to use after adding the package and stylesheet.

Basic Usage

<ArcadiaDataGrid TItem="Employee" Data="@employees">
    <ArcadiaColumn TItem="Employee" Title="Name" Field="@(e => e.Name)" />
    <ArcadiaColumn TItem="Employee" Title="Department" Field="@(e => e.Department)" />
    <ArcadiaColumn TItem="Employee" Title="Salary" Field="@(e => e.Salary)" Format="C0" Align="right" />
</ArcadiaDataGrid>

@code {
    private List<Employee> employees = new()
    {
        new("Alice", "Engineering", 95000),
        new("Bob", "Marketing", 72000),
        new("Carol", "Engineering", 105000),
    };

    record Employee(string Name, string Department, decimal Salary);
}

ArcadiaDataGrid Parameters

ArcadiaColumn Parameters

Live Data (ObservableCollection)

The DataGrid automatically detects when Data is an ObservableCollection<T> and re-renders when items are added, removed, or cleared. No manual StateHasChanged() needed.

Basic Usage

@using System.Collections.ObjectModel

<ArcadiaDataGrid TItem="Order" Data="@_orders">
    <ArcadiaColumn TItem="Order" Field="@(d => (object)d.Id)" Title="ID" />
    <ArcadiaColumn TItem="Order" Field="@(d => (object)d.Product)" Title="Product" />
</ArcadiaDataGrid>

@code {
    private ObservableCollection<Order> _orders = new(initialData);

    // Adding an item auto-updates the grid — no StateHasChanged needed
    private void AddOrder() => _orders.Add(new Order(...));
}

SignalR Integration

// In a Blazor Server component
hubConnection.On<Order>("NewOrder", order =>
{
    _orders.Insert(0, order);
    // Grid updates automatically!
});

Batch Edit Guard

During batch editing, live updates are suppressed to avoid disrupting the user’s in-progress edits. Updates resume automatically when the batch is committed or discarded.

Debouncing

Rapid changes (e.g., 100 items added in 50ms) are automatically debounced into a single re-render for optimal performance.

Feature Pages

• Sorting — Click-to-sort, multi-direction cycling, SortChanged event
• Filtering — Per-column filter row, FilterDescriptor, operators
• Selection — Single and multi-select, checkbox column, SelectedItems binding
• Editing — Inline editing, EditTemplate, OnRowEdit event
• Grouping — GroupBy column key, collapsible groups
• Templates — Cell, header, footer, detail templates and aggregates
• Virtual Scrolling — Render 10K+ rows at 60fps
• Themes — 6 built-in themes, 3 density modes, CSS custom properties
• Export — CSV export respecting current sort and filters