Table

Table

<Table aria-label="Users" selectionMode="multiple">
  <TableHeader>
    <Column id="name" isRowHeader>Name</Column>
    <Column id="role">Role</Column>
    <Column id="status">Status</Column>
  </TableHeader>
  <TableBody>
    <Row>
      <Cell>Alice</Cell>
      <Cell>Owner</Cell>
      <Cell>Active</Cell>
    </Row>
  </TableBody>
</Table>

Install: @helixui/core

import { Table, TableHeader, TableBody, Row, Column, Cell } from '@helixui/core'

status: stable · since: 0.1.0

Tags: grid, rows, columns, sortable, selectable

Anatomy

┌─ Header  Header  Header ─┐
├──────────────────────────┤
│  cell    cell    cell    │
│  cell    cell    cell    │
│  cell    cell    cell    │
└──────────────────────────┘

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, scrolls horizontally on overflow
• stackable — false
• fullBleed — false

Visual

A row × column grid with a sticky header, hairline row dividers, and zebra hover. Sortable columns show a chevron when active. Selectable rows show a leading checkbox column.

Props

Name	Type	Default	Description
selectionMode	'none' | 'single' | 'multiple'	none	Row selection mode.
selectionBehavior	'replace' | 'toggle'	replace	How rows are selected.
sortDescriptor	SortDescriptor	—	Controlled sort state.
onSortChange	(d: SortDescriptor) => void	—	Sort change handler.

Slots

• Table children — TableHeader + TableBody
• Column children — header label
• Cell children — cell content

Tokens used

color.bg.surface.subtle, color.bg.action.brand.subtle, color.border.default, color.border.focus, color.text.primary, color.text.secondary, space.3, space.4, font.family.sans, font.size.sm, font.size.xs, font.weight.semibold

Accessibility

Role: grid

Keyboard

Key	Action
ArrowKeys	Move focus between cells.
Space	Toggle row selection.
Cmd/Ctrl+A	Select all (when selectionMode=multiple).

Composes with

Component	Relation	Note
FloatingBar	sibling	Use over a Table when rows are selected.
Pagination	sibling	Below the Table.
EmptyState	alternative	When no rows.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

sortable user table

“three-column table with sort and selection”

<Table selectionMode="multiple" onSortChange={setSort}>
  <TableHeader>
    <Column id="name" allowsSorting>Name</Column>
    <Column id="email">Email</Column>
    <Column id="role">Role</Column>
  </TableHeader>
  <TableBody>
    {rows.map(r => (
      <Row key={r.id}><Cell>{r.name}</Cell><Cell>{r.email}</Cell><Cell>{r.role}</Cell></Row>
    ))}
  </TableBody>
</Table>

Related

• Pagination