Table

A responsive table component for displaying tabular data.

Installation

dotnet add package Lumeo

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

@using Lumeo

<Table />

Display structured, tabular data such as invoices, user lists, or logs.
Show comparison data with consistent columns and rows.
Present simple read-only lists. For sortable or interactive tables, consider DataTable.

Default

A list of recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00

Simple Table

Table with Status Badges

Task	Assignee	Priority	Status
Design onboarding flow	Alice Johnson	High	In Progress
Fix login bug	Bob Smith	Critical	Done
Write API docs	Carol Williams	Medium	Todo
Update homepage copy	David Lee	Low	In Progress
Code review: auth module	Alice Johnson	High	Todo

Table with Pagination

Showing 1–3 of 7 invoices
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

Page 1 of 3

Component	Element	Description
Table	<table>	Root table element wrapped in a scrollable container.
TableHeader	<thead>	Table header section containing header rows.
TableBody	<tbody>	Table body containing data rows.
TableRow	<tr>	A table row with hover highlight and border styling.
TableHead	<th>	A header cell with muted foreground text. All accept Class and AdditionalAttributes.
TableCell	<td>	A data cell with standard padding.
TableCaption	<caption>	Optional caption displayed below the table in muted text.

DataTable — Use for interactive tables with sorting, filtering, and row selection.
Pagination — Pair with Table for navigating large data sets across pages.
Card — An alternative layout for displaying individual records in a grid.