LilyDesignSystem.Blazor.DataGrid 0.9.0

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package LilyDesignSystem.Blazor.DataGrid --version 0.9.0
                    


                    

                
NuGet\Install-Package LilyDesignSystem.Blazor.DataGrid -Version 0.9.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="LilyDesignSystem.Blazor.DataGrid" Version="0.9.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="LilyDesignSystem.Blazor.DataGrid" Version="0.9.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="LilyDesignSystem.Blazor.DataGrid" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add LilyDesignSystem.Blazor.DataGrid --version 0.9.0
                    


                    

                
#r "nuget: LilyDesignSystem.Blazor.DataGrid, 0.9.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package LilyDesignSystem.Blazor.DataGrid@0.9.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=LilyDesignSystem.Blazor.DataGrid&version=0.9.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=LilyDesignSystem.Blazor.DataGrid&version=0.9.0
                    


                            Install as a Cake Tool

DataGrid (Blazor helper)

A reusable Blazor (.NET 10) headless interactive data grid. It composes LilyDesignSystem.Blazor.Headless's DataTable family — the same role="grid" container the headless catalog ships, with zero behaviour built in — and adds sort, client-side filter, row selection, column resize / visibility / reorder / pinning, pagination, WAI-ARIA APG Grid keyboard navigation, inline cell editing, row virtualization, export to CSV / TSV / Excel and twelve cell types (text, number, link, date, time, time with time zone, select, radio, person, file, rollup, formula). Ships no CSS: every visual detail is the consumer's, via kebab-case class hooks. Ported from the canonical @lilydesignsystem/svelte-data-grid, whose spec is the contract.

Usage

@using LilyDesignSystem.Blazor.Helpers

<DataGrid Label="Users" Columns="columns" Rows="rows" SelectionMode="DataGridSelectionMode.Multiple"
          @bind-Selected="selected" Labels="labels" />

@code {
    private IReadOnlyList<string> selected = Array.Empty<string>();

    private static readonly DataGridColumn[] columns =
    {
        new() { Id = "name", Header = "Name", Sortable = true, Resizable = true },
        new() { Id = "email", Header = "Email", Sortable = true },
        new() { Id = "role", Header = "Role", Sortable = true, Hidable = true },
    };

    private static readonly DataGridRow[] rows =
    {
        new() { ["name"] = "Alice", ["email"] = "alice@example.com", ["role"] = "Admin" },
        new() { ["name"] = "Bob", ["email"] = "bob@example.com", ["role"] = "Editor" },
    };

    private static readonly DataGridLabels labels = new()
    {
        Search = "Search users",
        SelectAll = "Select all rows",
        SelectRow = name => $"Select {name}",
    };
}

What is Blazor-specific

Svelte Blazor
selected, filter, sort, columnOrder, page (bindable) @bind-Selected, @bind-Filter, @bind-Sort, @bind-ColumnOrder, @bind-Page (a value plus a …Changed EventCallback)
a row (Record<string, unknown>) DataGridRow, a Dictionary<string, object?>; links are DataGridLink, zoned times DataGridZonedTime, people DataGridPerson, files DataGridFile
onCellEdit, onFilesSelected, onFileRemove, onRowActivate, onExport OnCellEdit, OnFilesSelected, OnFileRemove, OnRowActivate (EventCallbacks), OnExport, and ExportHandler (a Func<DataGridExport, bool>: return false to stop the save)
empty, footer, column cell, headerCell, avatar, personEditor snippets Empty, Footer, DataGridColumn.Cell, HeaderCell, Avatar, PersonEditor (RenderFragments)
the closed string unions (type, editor, pinned, align, aggregate, …) enums (DataGridCellType, DataGridEditor, DataGridPinned, …)
Intl.NumberFormat / Intl.DateTimeFormat options .NET format strings: NumberFormat, DateFormat, TimeFormat (a zone shows as its id, never a short name)
class CssClass; extra attributes splat onto the root

Everything else — columns, labels, rowId, selectionMode, pageSize, storageKey, mode, the keyboard model, the cell types, editing, export and virtualization — is as in the Svelte reference. Every user-facing string is a labels.* prop (a label's presence gates the control it names); nothing is hardcoded.

Install

dotnet add package LilyDesignSystem.Blazor.DataGrid

Requires LilyDesignSystem.Blazor.Headless.

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (4)

Showing the top 4 NuGet packages that depend on LilyDesignSystem.Blazor.DataGrid:

Package Downloads
LilyDesignSystem.Blazor.KanbanBoard

Lily Design System Blazor kanban board: a keyboard-accessible kanban board composing the headless KanbanTable family plus IconButton/Listbox for a per-card "Move to..." menu. Headless, SSR-safe, no CSS.
LilyDesignSystem.Blazor.GanttChart

Lily Design System Blazor Gantt chart: a keyboard-accessible Gantt chart composing the headless GanttTable family plus the sibling DateTimePicker helper (twice per edit session) for start/end date editing. Row hierarchy, milestones, percent-complete, today marker, finish-to-start dependency data. Headless, SSR-safe, no CSS.
LilyDesignSystem.Blazor.Calendar

Lily Design System Blazor calendar: a week, four-week and month calendar composing the headless CalendarTable family plus the sibling DateTimePicker helper civil-date arithmetic. WAI-ARIA APG Grid keyboard model, picked and disabled days, events per day. Headless, SSR-safe, no CSS.
LilyDesignSystem.Blazor.Filter

Lily Design System Blazor filter: a headless filter builder (conditions and groups over text, number, date, choice and yes/no fields; and / or / not) that outputs JSON, SQL, MongoDB, OData or a predicate. Headless, SSR-safe, no CSS.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.11.0 142 10/18/2026
0.10.0 131 10/17/2026
0.9.0 131 10/17/2026