Table

A structured data display component with rows and columns, supporting headers, body cells, and optional sorting or selection states.

Name	Email	Role	Status
Alex Johnson	alex@example.com	Admin	Active
Sam Williams	sam@example.com	Editor	Active
Jamie Brown	jamie@example.com	Viewer	Inactive

Installation

npx asteria-ui add table

Usage

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

<Table aria-label="Users">
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alex Johnson</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Striped

Name	Email	Role	Status
Alex Johnson	alex@example.com	Admin	Active
Sam Williams	sam@example.com	Editor	Active
Jamie Brown	jamie@example.com	Viewer	Inactive

Bordered

Name	Email	Role	Status
Alex Johnson	alex@example.com	Admin	Active
Sam Williams	sam@example.com	Editor	Active
Jamie Brown	jamie@example.com	Viewer	Inactive

API reference

Prop	Type	Default	Description
variant	"default" \| "striped" \| "bordered"	"default"	Row alternation and outer border/rounded treatment.

Accessibility

Native semantics. Renders a real <table>, not div-based markup — every cell, row, and header is natively understood by assistive tech without any extra ARIA.
Headers. TableHead renders <th scope="col">, linking each header to its column.
Sortable columns (when you add sorting yourself) should set aria-sort on the relevant TableHead.
Custom cell content (e.g. a row of custom widgets) can use role="row"/role="cell" if you must break from native table elements — prefer native elements whenever possible.

When to use

Use for structured data with multiple attributes — user lists, transactions, inventory. Best when users need to compare, sort, or scan data.

Do:

Right-align numeric columns
Include sortable headers where it helps
Use the striped variant for dense data
Keep columns to 8 or fewer

Don't:

Use a table for page layout
Show 20+ rows without pagination
Truncate critical data

Pagination — for table pages
Card — an alternative visual display
Skeleton — for loading states

On this page