Table

Organism

Responsive table. scope="col" headers, hover row highlight, empty-state message, and custom cell render support.

Preview

Users table
Name	Email	Role	Status
Jane Doe	jane@example.com	Admin	Active
John Smith	john@example.com	Member	Inactive

Code

<Table
  columns={[
    { key: 'name', header: 'Name' },
    { key: 'email', header: 'Email' },
    { key: 'status', header: 'Status', render: (row) => <Badge variant={row.status === 'Active' ? 'success' : 'neutral'}>{row.status}</Badge> },
  ]}
  rows={[{ name: 'Jane Doe', email: 'jane@example.com', status: 'Active' }]}
/>

Preview

Empty table
Name	Email
No users found. Invite your team to get started.

Code

<Table columns={[...]} rows={[]} emptyMessage="No users found." />

Preview

Sortable users table
Name	Email	Role
Zara Kim	zara@example.com	Admin
Alice Brown	alice@example.com	Member
Bob Lee	bob@example.com	Viewer

Code

<Table
  columns={[
    { key: 'name', header: 'Name', sortable: true },
    { key: 'role', header: 'Role', sortable: true },
  ]}
  rows={rows}
/>

Table

With data

Empty state

Sortable columns