Content & statusBrick 0.1.2

Table

Table presents static row-and-column relationships with native HTML semantics, finished visual recipes, logical alignment, and explicit responsive containment. Atom owns the semantic table primitives and sort metadata; Brick owns presentation.

Live example

Built from the published package

Interactive

Release results
Package	Status
Atom	Published
Brick	Published

Choose with confidence

Know when Table is the right part

Use it when

Use Table when people compare values across meaningful columns, including reports, invoices, inventories, pricing, and audit results. Use Data Grid when the tabular region itself needs arrow-key cell navigation or row selection. reports, invoices, inventories, pricing, and audit results.

Choose another path when

Use Data Grid when the tabular region itself needs arrow-key cell navigation or row selection. Table does not own data mapping, sorting, filtering, pagination, editing, resizing, virtualization, or responsive card conversion.

Installation and imports

tsx

import { Table } from "@flowstack-ui/brick";
// or import { Table } from "@flowstack-ui/brick/table";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/table.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Public exports include Table, TableContainer, TableRoot, TableCaption, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableSortIndicator, TableContainerProps, TableRootProps, TableCaptionProps, TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeadProps, TableCellProps, TableSortIndicatorProps, TableVariant, TableSize, TableDensity, TableCaptionSide, and TableCellAlign.

Quick start

tsx

<Table.Root>
  <Table.Caption>Release results</Table.Caption>
  <Table.Body><Table.Row><Table.Cell>Ready</Table.Cell></Table.Row></Table.Body>
</Table.Root>

Visual recipes and states

Line separates rows; outline adds the outer and column boundaries. Size owns typography and row metrics, density owns block padding, stripe affects only alternating body rows, and sticky affects only header positioning. Table adds no hover, selected, focus, loading, empty, or error state.

Sorting

Table does not sort. Put a named Button inside Head, keep the data and direction in application state, and pass the current direction to sortDirection. SortIndicator is decorative only.

tsx

<Table.Head sortDirection="ascending">
  <Button onClick={sortRows}>Name<Table.SortIndicator /></Button>
</Table.Head>

Only the currently sorted header should expose a direction.

Examples

See sorting above. For wide content, wrap Root explicitly in Container and set --brick-table-min-inline-size to the smallest honest comparison width. For a summary, author Footer with row headers and numeric Cells exactly like Body.

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Prop	Values	Default
`variant`	`line`, `outline`	defaults to `"line"`
`size`	`sm`, `md`, `lg`	defaults to `"md"`
`density`	`compact`, `comfortable`	defaults to `"comfortable"`
`striped`	boolean	`false`
`stickyHeader`	boolean	`false`
`side`	`top`, `bottom`	defaults to `"top"`
`align`	`start`, `center`, `end`	`start`, or `end` when numeric
`numeric`	boolean	`false`

All Atom and native props remain available, including scope, headers, colSpan, rowSpan, sortDirection, render, asChild, classes, styles, slots, events, and refs. The deprecated physical native align values are intentionally replaced by logical values.

Shared responsibility

Accessibility

Prefer Caption when the table needs a visible name; otherwise use surrounding prose or an appropriate aria-label/aria-labelledby. Head defaults to scope="col"; author scope="row" for row headers. Use id/headers for complex associations. Table adds no keyboard handler or focus target. Interactive descendants remain independent tab stops with their own names and behavior.

Responsive behavior

Author Table.Container when wide data needs native horizontal overflow. It contains overflow without hiding columns, cloning labels, or changing table semantics. For a labelled, focusable custom scrollbar region, compose Scroll Area instead. Sticky Header is presentation only: the application supplies the bounded vertical scroll region, block size, and optional sticky offset.

Stable visual contract

Styling and tokens

Customization

Prefer closed recipes, then override public variables on Root for a deliberate exception. Container accepts ordinary div classes and styles independently.

Tokens and CSS hooks

Stable classes are .brick-table-container, .brick-table, .brick-table__caption, __header, __body, __footer, __row, __head, __cell, and __sort-indicator; matching slots use table-* names. Public variables use the --brick-table-* prefix and cover inline/minimum size, borders, radius, section colors, cell padding, row minimum size, caption gap, sticky offset/z-index, and sort-indicator size/color.

Public state attributes are data-variant, data-size, data-density, data-striped, data-sticky-header, data-side, data-align, data-numeric, and data-slot.

Public variables:

--brick-table-inline-size
--brick-table-min-inline-size
--brick-table-border-color
--brick-table-border-width
--brick-table-radius
--brick-table-header-background
--brick-table-header-foreground
--brick-table-body-background
--brick-table-row-stripe-background
--brick-table-footer-background
--brick-table-footer-foreground
--brick-table-cell-foreground
--brick-table-cell-padding-inline
--brick-table-cell-padding-block
--brick-table-row-min-block-size
--brick-table-caption-foreground
--brick-table-caption-gap
--brick-table-sticky-offset
--brick-table-sticky-z-index
--brick-table-sort-indicator-size
--brick-table-sort-indicator-color

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground