Tables
A single Table component styles the table element; you compose the rows
with native thead/tbody/tr/th/td
markup. The whole system is driven by —bs-table-* custom properties that
inherit down to every cell.
Import
import { Table } from '@metatoy/bootstrap-styled';The library exports a single Table component — there are no wrapper components for the
table sections. Use the native <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>
elements as children, exactly as you would in plain HTML.
Basic table
Style modifiers
Each modifier is a boolean prop: striped, stripedColumns, hover, bordered,
borderless, plus size="sm" for compact cells. They combine freely.
Contextual colors
Color the whole table with variant (one of the eight contextual colors). To color a
single row or cell, add the table-<color> className to that <tr>/<td>; table-active
highlights a row. Combine variant="dark" with striped/hover for a dark table.
Caption, group divider & responsive
A native <caption> renders below the table (add the caption-top className to move it
up); .table-group-divider on a <tbody> draws a heavier separator. Set responsive to
wrap the table in a horizontal-scroll container, or responsive="md" to only scroll below
a breakpoint.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| striped | boolean | — | `.table-striped` — zebra-stripe the tbody rows. |
| stripedColumns | boolean | — | `.table-striped-columns` — zebra-stripe alternate columns. |
| hover | boolean | — | `.table-hover` — hover highlight on tbody rows. |
| bordered | boolean | — | `.table-bordered` — borders on all sides of every cell. |
| borderless | boolean | — | `.table-borderless` — remove all borders. |
| size | TableSize | — | `.table-sm` — halve the cell padding. |
| variant | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | — | `.table-<color>` — contextual color for the whole table. |
| responsive | boolean | ResponsiveBreakpoint | — | Wrap in `.table-responsive` (true) or `.table-responsive-<bp>`. |
| as | React.ElementType | — | — |
Table also accepts all native <table> attributes and can be retargeted with as.
Theming
Every visual detail resolves from --bs-table-* custom properties, which inherit from the
table down to each cell. The base set includes --bs-table-color, --bs-table-bg,
--bs-table-border-color, --bs-table-striped-bg, --bs-table-hover-bg, and
--bs-table-active-bg (all derived from --bs-emphasis-color / --bs-body-bg /
--bs-border-color). A contextual variant — or a table-<color> class — simply re-sets
these variables, and each cell repaints for free. To reskin one table, override the
--bs-table-* variables on it (or on a scoped wrapper); to reskin globally, override the
underlying --bs-emphasis-color / --bs-border-color tokens on the theme.
Accessibility
Use real table semantics: <th scope="col"> for column headers and <th scope="row">
for row headers so screen readers can associate each cell with its headers. Add a
<caption> to describe the table’s purpose. Contextual colors carry no meaning to
assistive tech — if a colored row conveys status, include that status in the cell text.
The responsive wrapper is keyboard-scrollable; keep tables usable when scrolled.
Explore in Ladle
Browse every table modifier in the interactive component gallery: Open in Ladle.