Lustro tables
Every table pattern for the Lustro template: basic, striped, hover, compact, bordered, sticky header, sortable, search and column filters, pagination, selectable rows, row actions, expandable rows, numeric deltas, footer totals, empty state, loading skeleton and a mobile card layout. All data is fictitious and local.
Basic
Plain semantic table with status badges. Wrap every table in a scroll frame.
| Component | Status | Owner |
|---|---|---|
| Buttons | Ready | Design |
| Notifications | Review | Product |
| Graphs | Example | Motion |
| Toasts | Ready | Design |
Striped
| Component | Status | Owner |
|---|---|---|
| Buttons | Ready | Design |
| Notifications | Review | Product |
| Graphs | Example | Motion |
| Toasts | Ready | Design |
| Calendar | Review | Product |
| Messaging | Ready | Platform |
Hover rows
| Component | Status | Owner |
|---|---|---|
| Buttons | Ready | Design |
| Notifications | Review | Product |
| Graphs | Example | Motion |
| Toasts | Ready | Design |
Compact
Tighter padding for dense data.
| Component | Owner | Amount |
|---|---|---|
| Buttons | Design | $1,240 |
| Notifications | Product | $860 |
| Graphs | Motion | $2,310 |
| Toasts | Design | $430 |
| Calendar | Product | $1,980 |
| Messaging | Platform | $3,150 |
| Pricing | Growth | $720 |
Bordered
| Component | Status | Owner |
|---|---|---|
| Buttons | Ready | Design |
| Notifications | Review | Product |
| Graphs | Example | Motion |
| Toasts | Ready | Design |
Sticky header
The header stays visible while the body scrolls inside a fixed height.
| Component | Owner | Date | Amount |
|---|---|---|---|
| Buttons | Design | 2026-09-02 | $1,240 |
| Notifications | Product | 2026-09-05 | $860 |
| Graphs | Motion | 2026-09-11 | $2,310 |
| Toasts | Design | 2026-09-14 | $430 |
| Calendar | Product | 2026-09-18 | $1,980 |
| Messaging | Platform | 2026-09-21 | $3,150 |
| Pricing | Growth | 2026-09-25 | $720 |
| Dependency graph | Motion | 2026-09-28 | $1,560 |
| Shipping label | Platform | 2026-10-01 | $940 |
| Node flow | Motion | 2026-10-03 | $2,740 |
Sortable
Click a header to sort; click again to reverse.
| Buttons | Design | $1,240 |
| Calendar | Product | $1,980 |
| Dependency graph | Motion | $1,560 |
| Graphs | Motion | $2,310 |
| Messaging | Platform | $3,150 |
| Node flow | Motion | $2,740 |
Search and column filters
10 of 10 rows
| Component | Status | Owner |
|---|---|---|
| Buttons | Ready | Design |
| Notifications | Review | Product |
| Graphs | Example | Motion |
| Toasts | Ready | Design |
| Calendar | Review | Product |
| Messaging | Ready | Platform |
| Pricing | Example | Growth |
| Dependency graph | Review | Motion |
| Shipping label | Ready | Platform |
| Node flow | Example | Motion |
Pagination
| Component | Owner | Amount |
|---|---|---|
| Buttons | Design | $1,240 |
| Notifications | Product | $860 |
| Graphs | Motion | $2,310 |
| Toasts | Design | $430 |
Selectable rows
No rows selected
| Component | Owner | |
|---|---|---|
| Buttons | Design | |
| Notifications | Product | |
| Graphs | Motion | |
| Toasts | Design | |
| Calendar | Product | |
| Messaging | Platform |
Row actions
| Component | Owner | Actions |
|---|---|---|
| Buttons | Design | |
| Notifications | Product | |
| Graphs | Motion | |
| Toasts | Design |
Actions are local and fictitious.
Expandable rows
| Expand | Component | Status |
|---|---|---|
| Buttons | Ready | |
| Notifications | Review | |
| Graphs | Example | |
| Toasts | Ready |
Numeric columns with deltas
Right-align numbers, use tabular figures, and pair color with a sign so it does not rely on color alone.
| Component | Amount | Change |
|---|---|---|
| Buttons | $1,240 | ▲ +4.2% |
| Notifications | $860 | ▼ -1.8% |
| Graphs | $2,310 | ▲ +12.5% |
| Toasts | $430 | ▲ +0.6% |
| Calendar | $1,980 | ▼ -6.4% |
| Messaging | $3,150 | ▲ +8.9% |
Footer totals
| Component | Amount | Change |
|---|---|---|
| Buttons | $1,240 | +4.2% |
| Notifications | $860 | -1.8% |
| Graphs | $2,310 | +12.5% |
| Toasts | $430 | +0.6% |
| Calendar | $1,980 | -6.4% |
| Messaging | $3,150 | +8.9% |
| Pricing | $720 | -2.3% |
| Dependency graph | $1,560 | +3.1% |
| Shipping label | $940 | +1.4% |
| Node flow | $2,740 | -0.9% |
| Total / average | $15,930 | +1.9% |
Empty state
No components match “zzz”. Try a different search or clear your filters.
Loading skeleton
| Component | Status | Owner |
|---|---|---|
Responsive card layout
Under 640 px each row becomes a labeled card. Resize the window to see it.
| Component | Status | Owner | Amount |
|---|---|---|---|
| Buttons | Ready | Design | $1,240 |
| Notifications | Review | Product | $860 |
| Graphs | Example | Motion | $2,310 |
| Toasts | Ready | Design | $430 |
Production checklist
Use real th scope, a caption or heading for every table, aria-sort on sortable headers, and visible focus. Never rely on color alone for deltas. Data above is fictitious and local.