Lumeo

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	ken@example.com	$316.00
Success	abe@example.com	$242.00
Pending	monserrat@example.com	$837.00
Failed	silas@example.com	$874.00
Success	carmella@example.com	$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	alice@example.com	Admin
Bob Smith	bob@example.com	User
Carol White	carol@example.com	Editor
Dave Brown	dave@example.com	User

Virtualized (Large Dataset)

Name	Email	Role

Row Selection

	Name	Email	Role
	Alice Johnson	alice@example.com	Admin
	Bob Smith	bob@example.com	User
	Carol White	carol@example.com	Editor
	Dave Brown	dave@example.com	User

0 of 4 row(s) selected

API Reference

DataTable<TItem>

DataTableSortableHeader

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