Table

Status: stableAccessibility reviewedtenet-ui@0.4.0

Import

import { Table } from 'tenet-ui';

Also accepts every prop of TableHTMLAttributes<HTMLTableElement>.

Source: src/components/Table/Table.tsx

Usage guidelines

When to use: to present rows of structured, comparable data (repos, users, runs). Use the Table family — real <table> semantics — not a grid of styled <div>s.

Rules

• Compose Table.Head → Table.Row → Table.Header for the header, and Table.Body → Table.Row → Table.Cell for data. Header cells are real <th scope="col"> for screen readers.
• Wrap in Table.Container with Table.Title / Table.Subtitle when the table needs a heading or actions — don’t hand-build a bordered header.
• Use density (condensed | normal | spacious) for row height; never set row padding inline.
• Use align="end" on numeric columns (header and cells) so figures line up.
• For sortable columns set sortDirection on the Table.Header (it renders the indicator and aria-sort) and handle onClick.
• When the collection has zero records, render an EmptyState in place of the table; an empty filter result is one Table.Cell message inside the table.
• Never hardcode borders, row striping, or padding — they come from borderColor, bgColor, and the space scale.

Do / Don’t

• ✅ <Table.Header align="end" sortDirection="descending">Stars</Table.Header>
• ❌ <div className="row" style={{ display: 'flex', borderBottom: '1px solid #d0d7de' }}> — not a table, hardcoded border, no semantics.

See also: DataTable when users sort, search, or filter; EmptyState; system guideline data-display.

Examples

4 stories for Table — open in Storybook

• Basic components-table--basic
• In Container components-table--in-container
• Sortable components-table--sortable
• Densities components-table--densities

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Table

Prop	Type	Default	Description
density	'condensed' | 'normal' | 'spacious' TableDensity	normal	Row height / cell padding scale.
children	ReactNode	—

Table.Container

Prop	Type	Default	Description
children	ReactNode	—

Table.Title

Prop	Type	Default	Description
children	ReactNode	—

Table.Subtitle

Prop	Type	Default	Description
children	ReactNode	—

Table.Actions

Prop	Type	Default	Description
children	ReactNode	—

Table.Head

Prop	Type	Default	Description
children	ReactNode	—

Table.Body

Prop	Type	Default	Description
children	ReactNode	—

Table.Row

Prop	Type	Default	Description
children	ReactNode	—

Table.Header

Prop	Type	Default	Description
align	'start' | 'center' | 'end' CellAlign	start	Text alignment within the header cell.
sortDirection	'ascending' | 'descending' | 'none' SortDirection	—	When set, renders a sort indicator and exposes aria-sort. Combine with onClick.
children	ReactNode	—

Table.Cell

Prop	Type	Default	Description
align	'start' | 'center' | 'end' CellAlign	start	Text alignment within the cell.
children	ReactNode	—

Related components

• DataTable
• EmptyState
• Pagination
• Tag