Table

A semantic HTML table with consistent Aether UI styling. Composed of eight sub-components that map directly to HTML table elements: Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption.

✓Wraps in an overflow-auto container for horizontal scrolling on small screens
✓Hover and selected row states
✓TableFooter for summary rows
✓TableCaption for screen reader context
✓All sub-components forward refs

Name	Role	Status
Alice Chen	Admin	Active
Bob Marsh	Editor	Active
Carla Voss	Viewer	Inactive

import { Table }from "@aetherstack/ui"

table.tsx

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

const users = [
  { name: "Alice Chen", role: "Admin", status: "Active" },
  { name: "Bob Marsh", role: "Editor", status: "Active" },
  { name: "Carla Voss", role: "Viewer", status: "Inactive" },
]

export function TableDemo() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Role</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.name}>
            <TableCell className="font-medium">{user.name}</TableCell>
            <TableCell>{user.role}</TableCell>
            <TableCell>
              <Badge variant={user.status === "Active" ? "default" : "secondary"}>
                {user.status}
              </Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Usage

Full table with footer

Use TableFooter for summary rows like totals.

Team member list
Name	Email	Role	Joined
Alice Chen	alice@acme.com	Admin	Jan 2025
Bob Marsh	bob@acme.com	Editor	Jan 2025
Carla Voss	carla@acme.com	Viewer	Jan 2025
Dave Yu	dave@acme.com	Editor	Jan 2025
Total			4 members

With row actions

Add an actions column with inline buttons.

Name	Role	Actions
Alice Chen	Admin
Bob Marsh	Editor
Carla Voss	Viewer

Props

Prop	Type	Default	Description

Table

Prop	Type	Default	Description
className	string	—	Applied to the inner <table> element. The outer wrapper is always w-full overflow-auto.
...props	React.HTMLAttributes<HTMLTableElement>	—	All standard HTML table attributes.

TableRow

Prop	Type	Default	Description
data-[state=selected]	—	—	Add data-state='selected' to highlight a selected row.
className	string	—	Additional classes.

TableHead

Prop	Type	Default	Description
className	string	—	Applied to <th>. Defaults to h-12 px-4 text-left align-middle font-medium text-muted-foreground.

TableCell

Prop	Type	Default	Description
colSpan	number	—	Spans multiple columns (for footer totals, etc.).
className	string	—	Applied to <td>. Defaults to p-4 align-middle.

TableCaption

Prop	Type	Default	Description
className	string	—	Applied to <caption>. Defaults to mt-4 text-sm text-muted-foreground.

* Required props

Accessibility

→Use TableCaption to provide a text description of the table — screen readers announce it before reading the table content.
→Use TableHead (<th>) for column headers — this creates the correct ARIA column header semantics.
→For row headers (first column), add scope='row' to TableCell elements.
→Use aria-sort on TableHead elements for sortable columns.