Ravox KitData
Table
The parts of a real HTML table with the Kit's look: right-aligned numbers with tabular figures, a header that sticks on scroll, selected row, stripes, a totals footer and three densities. Works in a Server Component.
Settings
Toggles
Examples
Sticky header on scroll
Compare plans (row heading)
Compact and striped (log)
Installation
The command creates components/ui/table.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add tableProps
| Prop | Type | Default | Description |
|---|---|---|---|
| density | "compact" | "normal" | "relaxed" | "normal" | Spacing of all cells at once: 32, 44 or 56px of height per row. |
| stickyHeader | boolean | false | The header sticks to the top while the body scrolls. Use with maxHeight. |
| maxHeight | number | string | — | Maximum height of the frame (320, "60vh"). Past that, it scrolls; the frame enters the Tab order so it can be scrolled by keyboard. |
| striped | boolean | false | Alternating background on the body rows, for wide tables. |
| label | string | — | Name of the scroll area for screen readers (when the table scrolls). |
| wrapperClassName | string | — | Classes for the bordered frame; className goes on the <table>. |
| TableHead · numeric | boolean | false | On the <th>: right-aligns the title of a number column. scope="col" is already set; use scope="row" on a row heading. |
| TableCell · numeric | boolean | false | On the <td>: right-aligned, with tabular-nums (decimal places line up one below the other). |
| TableRow · selected | boolean | false | Paints the row as selected. The checkbox inside it is what announces the selection. |
| TableCaption | ComponentProps<"caption"> | — | The <caption>: the name of the table, below it. With className="sr-only" it is for screen readers only. |
| TableHeader · TableBody · TableFooter | ComponentProps<"thead" | "tbody" | "tfoot"> | — | The sections of the table. The footer gets a light background and medium weight (totals). |