Components · tables
Tables. Sortable, sticky, responsive.
Styled native <table> with striped rows, hover highlight, sticky header, click-to-sort columns, and a container-query responsive stack mode.
01 · base
.lsd-table
Base styles apply to any <table>. Stack modifiers — --striped, --hover-rows, --bordered, --condensed — compose freely.
base
Striped + hover-rows + condensed
All three modifiers stacked.
| Name | Role | Joined | Status |
|---|---|---|---|
| Plover Hexstrom | Engineer | 2026-01-04 | Active |
| Plover Hexstrom | Designer | 2025-11-19 | Active |
| Plover Hexstrom | PM | 2026-03-22 | Away |
| Plover Hexstrom | Engineer | 2025-09-30 | Offline |
.lsd-table.lsd-table--striped
.lsd-table--hover-rows02 · variants
Four variants
.lsd-table (default)
Default
Borderless rows, monospace headers.
| Plan | Price | Users |
|---|---|---|
| Starter | $0 | 1 |
| Pro | $24 | 10 |
| Team | $80 | ∞ |
.lsd-table
.lsd-table--sortable
Sortable headers
Click a column header to sort ascending/descending. JS toggles aria-sort.
| Name | Score | City |
|---|---|---|
| Ada | 92 | Berlin |
| Linus | 78 | Stockholm |
| Mira | 85 | Pune |
| Rex | 69 | Osaka |
.lsd-table--sortable <th data-sort="name">
.lsd-table--sticky-header
Sticky header
Header stays put while body scrolls.
| # | Item | Qty |
|---|---|---|
| 1 | Widget #1 | 0 |
| 2 | Widget #2 | 7 |
| 3 | Widget #3 | 14 |
| 4 | Widget #4 | 21 |
| 5 | Widget #5 | 28 |
| 6 | Widget #6 | 35 |
| 7 | Widget #7 | 42 |
| 8 | Widget #8 | 49 |
| 9 | Widget #9 | 56 |
| 10 | Widget #10 | 63 |
| 11 | Widget #11 | 70 |
| 12 | Widget #12 | 77 |
| 13 | Widget #13 | 84 |
| 14 | Widget #14 | 91 |
| 15 | Widget #15 | 98 |
| 16 | Widget #16 | 6 |
| 17 | Widget #17 | 13 |
| 18 | Widget #18 | 20 |
| 19 | Widget #19 | 27 |
| 20 | Widget #20 | 34 |
.lsd-table--sticky-header
.lsd-table--responsive-stack
Responsive stack (container query)
Below 440px container width, rows collapse to a label-value stack. Resize the card in dev tools to see.
| Name | Role | City |
|---|---|---|
| Ada | Engineer | Berlin |
| Linus | Designer | Stockholm |
@container tbl (max-width: 440px)
03 · animations
Row reveal on scroll
Chain .lsd-fx--fade-in + .lsd-fx--stagger-children on tbody for cinematic table reveals via scroll-trigger.
.lsd-fx--stagger-children
Stagger reveal
Rows fade-up in sequence on mount.
| Step | What |
|---|---|
| 1 | First |
| 2 | Second |
| 3 | Third |
| 4 | Fourth |
.lsd-fx--stagger-children
Components · LSD primitives