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.
Usage
@using Lumeo <Table />
When to Use
- 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.
| 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 |
| Name | Role | Department |
|---|---|---|
| Alice Johnson | Engineer | Engineering |
| Bob Smith | Designer | Product |
| Carol Williams | Manager | Operations |
| 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 |
| Name | Role | Department |
|---|---|---|
| No team members yet. | ||
| Invoice | Status | Method | Amount |
|---|
| 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 |
| 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
API Reference
Table Components
| Component | Element | Description |
|---|---|---|
| Table | <table> | Root table element wrapped in a scrollable container. Set Striped (bool, default false) to alternate body row background for dense data. |
| 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. |
| TableFooter | <tfoot> | Footer section for totals/summary rows, with a top border and muted fill. |
| TableEmpty | <tr><td> | Empty-state row for use inside TableBody. ColumnCount (int, default 1) sets the colspan to match your column count; Text (string?, default null) supplies the message, overridden by ChildContent when provided; falls back to a localized "No results" string. |
| TableSkeleton | <tr> (multiple) | Loading placeholder for use inside TableBody. Rows (int, default 3) and Columns (int, default 4) control the grid of shimmering skeleton cells; Animation (Skeleton.SkeletonAnimation, default Pulse) sets the skeleton animation style. |
Component-specific properties
Full parameter list per sub-component (Class/ChildContent/AdditionalAttributes are shared by every one).
Table
TableHeader
TableBody
TableFooter
TableRow
TableHead
TableCell
TableCaption
TableEmpty
TableSkeleton
Related Components
- 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.