Components

Table

Shows small, read-only data in a semantic HTML table.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Table } from '@bigbang/ui';
Source: Table.tsx
Storybook: Table · Playground

Table is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab.

import { Table } from '@bigbang/ui';

<Table caption="Item list">
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>Name</Table.HeaderCell>
      <Table.HeaderCell numeric>Count</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.RowHeader>First item</Table.RowHeader>
      <Table.Cell numeric>12</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

The part prop types are exported too: TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeaderCellProps, TableRowHeaderProps, TableCellProps.

Props

captionRequired

Description: The table's title. It names the table for screen readers and, when scrollable, the scroll region. Always required; hide it visually with captionHidden.
Type: ReactNode

captionHidden

Description: Hides the caption visually and keeps it for assistive technology. Use it when a heading above the table already says the same.
Type: boolean
Default: false

scrollable

Description: Wraps the table in a focusable, named scroll region so keyboard users can scroll a table wider or taller than its container. Turn it off when the table never overflows.
Type: boolean
Default: true

density

Description: Minimum row height: compact 32 px, standard 40 px, comfortable 48 px. The header row is 40 px at the standard density.
Type: 'compact' | 'standard' | 'comfortable'
Default: 'standard'

striped

Description: Tints every second body row to help the eye follow a row across wide tables.
Type: boolean
Default: false

stickyHeader

Description: Keeps the header cells at the top while the body scrolls. Give the container a height with className, such as max-h-96; the header sticks inside it.
Type: boolean
Default: false

hoverable

Description: Tints a body row on hover with a colour change only; rows never lift. It helps the eye follow a row; turn it off for a table that only shows a few values.
Type: boolean
Default: true

dividers

Description: Lines between rows: rows draws a 1 px divider under each row, none removes them.
Type: 'rows' | 'none'
Default: 'rows'

className

Description: For layout only: width, margins and max-h-* for a sticky header. This class lands on the scroll container.
Type: string

children

Description: The table parts: Table.Header, Table.Body and Table.Footer.
Type: ReactNode

Native <table> attributes (id, aria-*) pass through to the <table> element. className goes to the scroll container.

Parts

Part	Element	Props
`Table.Header`	`<thead>`	Native attributes and `className`.
`Table.Body`	`<tbody>`	Native attributes and `className`.
`Table.Footer`	`<tfoot>`	Native attributes and `className`. Takes the header colour.
`Table.Row`	`<tr>`	`selected` (`data-selected` and the selected background; no `aria-selected`), native attributes.
`Table.HeaderCell`	`<th scope="col">`	`align` (`start`, `center`, `end`), `numeric`, `scope`, native attributes.
`Table.RowHeader`	`<th scope="row">`	`align`, `numeric`, `scope`, native attributes.
`Table.Cell`	`<td>`	`align`, `numeric`, `truncate`, native attributes.

Data attributes

data-component="table": on the scroll container.
data-density, data-dividers, data-striped, data-hoverable, data-sticky: on the <table> element. The parts read the options through these attributes, so the same parts work under another root.
data-part: caption, header, body, footer, row, header-cell, row-header, cell.
data-selected: on a selected row.

Styles

tableStyles is the tv definition of the parts (container, table, caption, header, body, footer, row, headerCell, rowHeader, cell). DataTable reuses the same definition; you can use it when you build your own table too.

<Table caption="Item list" stickyHeader className="max-h-96">
  …
</Table>