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 />

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

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>?	null	The data source for table rows.
HeaderTemplate	RenderFragment?	null	Template for the table header row (th elements).
RowTemplate	RenderFragment<TItem>?	null	Template for each data row. Receives the item as context.
LoadingTemplate	RenderFragment?	null	Template for skeleton loading rows shown when IsLoading is true.
EmptyTemplate	RenderFragment?	null	Template shown when Items is null or empty.
IsLoading	bool	false	Show loading skeleton rows instead of data.
SkeletonRows	int	5	Number of skeleton rows to display when loading.
SortColumn	string?	null	The currently sorted column key. Use with @bind-SortColumn.
SortColumnChanged	EventCallback<string?>	-	Callback when the sort column changes.
SortDir	SortDirection	Ascending	The current sort direction. Values: None, Ascending, Descending.
SortDirChanged	EventCallback<SortDirection>	-	Callback when the sort direction changes.
OnSort	EventCallback<(string, SortDirection)>	-	Callback with column key and new direction when a sortable header is clicked.
Selectable	bool	false	When true, adds a checkbox column for row selection.
SelectedItems	HashSet<TItem>?	null	The set of currently selected items. Use with @bind-SelectedItems.
SelectedItemsChanged	EventCallback<HashSet<TItem>>	-	Callback when the selected items set changes.
Virtualize	bool	false	Enables virtualized rendering for large datasets.
ItemSize	float	48	Estimated height (px) of each row, used when Virtualize is true.
Class	string?	null	Additional CSS classes for the table element.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

DataTableSortableHeader

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	The header label content.
Column	string	""	The column key this header controls sorting for. Required.
SortColumn	string?	null	The currently active sort column, used to highlight this header.
SortDirection	DataTable<object>.SortDirection	None	The current sort direction, used to render the appropriate arrow icon.
OnSort	EventCallback<(string, SortDirection)>	-	Callback invoked with the column key and toggled direction when clicked.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

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