Package Lumeo.DataGridA11ycolumnheadergridDepends oncheckbox data-gridTested Tier 3 · 45 tests View source ↗

Data Table

A powerful table component with templated headers, rows, loading states, and empty states.

Installation

dotnet add package Lumeo.DataGrid

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<DataTable />

Tested Tier 3 · A11y + behavior

all components →

Render Behavior A11y Keyboard Scale E2E

45 tests across 7 files (no render-contract smoke — covered by its own tests). Auto-generated from the test suite.

When to Use

Displaying sortable and filterable datasets with column headers
Row selection for bulk actions like delete, export, or status changes
Paginated lists of records such as users, orders, or transactions

Default

Status	Email	Amount
Success	[email protected]	$316.00
Success	[email protected]	$242.00
Pending	[email protected]	$837.00
Failed	[email protected]	$874.00
Success	[email protected]	$721.00

Loading State

Status	Email	Amount

Empty State

Status	Email	Amount
No payments found There are no payments to display yet.

Sortable Columns


Alice Johnson	[email protected]	Admin
Bob Smith	[email protected]	User
Carol White	[email protected]	Editor
Dave Brown	[email protected]	User

Virtualized (Large Dataset)

Name	Email	Role

Row Selection

Name	Email	Role
Alice Johnson	[email protected]	Admin
Bob Smith	[email protected]	User
Carol White	[email protected]	Editor
Dave Brown	[email protected]	User

0 of 4 row(s) selected

API Reference

DataTable<TItem>

Prop	Type	Default	Description
Items	IEnumerable<TItem>?	—	The rows to render. Enumerated once per parameter set into _itemsList; null or empty renders EmptyTemplate (or the built-in "No results" placeholder) instead of the table body.
HeaderTemplate	RenderFragment?	—	Header cells rendered inside the single <tr> of <thead>, after the selection checkbox column (if Selectable is on). Typically one <th> per column, e.g. via DataTableSortableHeader.
RowTemplate	RenderFragment<TItem>?	—	Per-row content, rendered once for each item in Items and given the current item as its context. Typically one <td> per column.
LoadingTemplate	RenderFragment?	—	Content rendered inside each skeleton row while IsLoading is true. Rendered SkeletonRows times.
EmptyTemplate	RenderFragment?	—	Content shown in place of the table body when Items is null or empty. Falls back to a centered "No results." message when unset.
IsLoading	bool	false	Shows SkeletonRows loading rows (via LoadingTemplate) instead of the real data while true.
SkeletonRows	int	5	Number of skeleton rows rendered while IsLoading is true. Default 5.
Class	string?	—	Additional CSS classes merged onto the <table> element.
AdditionalAttributes	Dictionary<string, object>?	—	Captures any unmatched attributes and applies them to the outer scrollable wrapper <div>.
SortColumn	string?	—	The currently sorted column's identifier, as set by a header (e.g. Column). Two-way bindable via SortColumnChanged; the table itself does not sort Items — sorting is left to the consumer.
SortDir	SortDirection	SortDirection.Ascending	The current sort direction for SortColumn. Default Ascending.
Selectable	bool	false	Enables row selection: renders a checkbox column (with a "select all" checkbox in the header) and aria-selected/aria-multiselectable on the grid.
SelectedItems	HashSet<TItem>?	—	The currently selected rows. Two-way bindable via SelectedItemsChanged; membership is decided by ItemKey when supplied, otherwise by reference/value equality.
ItemKey	Func<TItem, object>?	—	Optional stable-key selector for selection membership. When TItem is a plain reference type (not a record / value type), the default HashSet{T} compares by object reference — so refreshing Items with new instances that are value-equal but reference-distinct silently drops the selection highlight. Supply a key (e.g. p => p.Id) and membership is decided by that key instead of reference identity, so selection survives a same-content refresh. When null, membership falls back to SelectedItems.Contains(item) (reference/value equality), preserving the original behaviour.
AriaColCount	int	0	Total column count reported via aria-colcount on the grid (including the selection column when Selectable is on). Set this when the header/row templates render a fixed number of columns so assistive tech can announce "column X of N". 0 (default) omits the attribute since the count can't be inferred from consumer templates.
Virtualize	bool	false	Virtualize the row list using Blazor's <Virtualize> — only renders rows in the viewport.
ItemSize	float	48	Estimated row height in pixels used by the virtualizer (default 41). Only relevant when Virtualize is true.

Events

SortColumnChanged	EventCallback<string?>	Raised when SortColumn changes.
SortDirChanged	EventCallback<SortDirection>	Raised when SortDir changes.
OnSort	EventCallback<(string Column, SortDirection Direction)>	Raised when a sortable header is clicked, with the target column and its new direction. Combine with SortColumn/SortDir (or their two-way bindings) to actually re-order Items.
SelectedItemsChanged	EventCallback<HashSet<TItem>>	Raised with a new HashSet{T} whenever selection changes (row toggle or select-all). Always a fresh instance so @bind-SelectedItems and change detection see the update.

DataTableSortableHeader

Prop	Type	Default	Description
ChildContent	RenderFragment?	—	The header's label content, rendered before the sort direction icon inside the clickable button.
Column*	string	""	Identifier for the column this header controls. Compared against SortColumn to decide which sort icon to show and passed back on OnSort.
SortColumn	string?	—	The DataTable{TItem}'s currently sorted column, typically bound to DataTable.SortColumn. When it matches Column, the header shows an active (ascending/descending) icon instead of the neutral one.
SortDirection	DataTable<object>.SortDirection	None	The current sort direction for this column when it is the active SortColumn, typically bound to DataTable.SortDir.
Class	string?	—	Additional CSS classes merged onto the <th> element.
AdditionalAttributes	Dictionary<string, object>?	—	Captures any unmatched attributes and applies them to the <th> element.

Events

OnSort

EventCallback<(string Column, DataTable<object>.SortDirection Direction)>

Raised on click with this header's Column and the next direction in the ascending → descending → none cycle.

Table — For simple static tables without sorting, selection, or loading states
Pagination — For navigating between pages of data in a table