Table
It styles `thead` and `tbody`; the markup stays yours. Sorting and selection are deliberately left out, because every project wants them slightly differently.
import
import { Table } from '@joshicodes/cock';Selectable
Click a row. Selection is yours to track; the component only styles it.
| Name | Breed | Status | Eggs this week |
|---|---|---|---|
H Henrietta | Orpington | Laying | 6 |
G Gertrude | Sussex | Broody | 1 |
M Mabel | Leghorn | Laying | 7 |
D Doris | Silkie | Molting | 0 |
Dense
| Day | Nest | Weight |
|---|---|---|
| Monday | Box 1 | 61 g |
| Monday | Box 3 | 64 g |
| Tuesday | Flower bed | 58 g |
Behaviour
- `tone="accent"` carries the theme colour into the header, the stripes and the hover state.
- `<tr aria-selected="true">` marks a selected row in either tone.
- The wrapper scrolls sideways, so a wide table does not break the page on a phone.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Table
| Prop | Type | Default |
|---|---|---|
tone `accent` carries the theme colour into the header, stripes and hover. | 'neutral' | 'accent' | 'neutral' |
striped Tint every other row. | boolean | false |
hoverable Highlight rows on hover. | boolean | true |
dense | boolean | false |
bordered Wrap in a bordered, scrollable container. | boolean | true |
caption | string | — |
class | string | — |
Snippets of Table
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |