Table

Semantic glass data table — header, body, rows, and cells with hover chrome.

Preview

Live

Company Role Status
Acme Product designer Submitted
Northwind Frontend engineer Interview
Contoso Staff IC Draft 
<table class="ui-table">
  <thead class="ui-table__head">
    <tr class="ui-table__row">
      <th class="ui-table__header" scope="col">Company</th>
      <th class="ui-table__header" scope="col">Role</th>
      <th class="ui-table__header" scope="col">Status</th>
    </tr>
  </thead>
  <tbody class="ui-table__body">
    <tr class="ui-table__row">
      <td class="ui-table__cell">Acme</td>
      <td class="ui-table__cell">Product designer</td>
      <td class="ui-table__cell">Submitted</td>
    </tr>
  </tbody>
</table>

Variants

Basic

Header row + body rows — default glass chrome and hover on body cells.

Company Status
Acme Submitted
Northwind Interview

Scroll container

Wrap in overflow-x: auto when columns may exceed the viewport.

Company Role Status
Contoso Staff IC Draft

Column headers

Always set scope="col" on header cells (React defaults this).

Metric Value
Open roles 12

Accessibility

  • Use a real <table> with <thead> / <tbody> — not div grids for tabular data.
  • Header cells need scope="col" (or scope="row" when appropriate). React TableHeader defaults to col.
  • Prefer a caption or nearby heading that names the table when the context is not obvious.
  • Keep text contrast from semantic tokens; do not rely on hover alone to convey meaning.
  • For wide tables, wrap in a scroll region so content remains reachable on small viewports.

API

HTML classes

Class Description
.ui-table Root glass table.
.ui-table__head Header section (<thead>).
.ui-table__body Body section (<tbody>).
.ui-table__row Table row (<tr>).
.ui-table__header Header cell (<th>).
.ui-table__cell Data cell (<td>).

React props

From src/core/Table.tsx — thin wrappers over native table elements with class merging via cx.

Component Element Notes
Table <table> .ui-table; extends table HTML attributes.
TableHead <thead> .ui-table__head.
TableBody <tbody> .ui-table__body.
TableRow <tr> .ui-table__row.
TableHeader <th> .ui-table__header; scope defaults to 'col'.
TableCell <td> .ui-table__cell.