HextaUI

Table: Default

The default variant has no surface, just hairlines between rows, for tables that sit inside a card or a page section. <TableCaption /> describes the table below it.

Recent releases.
VersionReleasedChanges
2.4.0Oct 2, 202618
2.3.1Sep 21, 20264
2.3.0Sep 12, 202623
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const releases = [
  { version: "2.4.0", date: "Oct 2, 2026", changes: 18 },
  { version: "2.3.1", date: "Sep 21, 2026", changes: 4 },
  { version: "2.3.0", date: "Sep 12, 2026", changes: 23 },
]

export function TablePlain() {
  return (
    <Table>
      <TableCaption>Recent releases.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Version</TableHead>
          <TableHead>Released</TableHead>
          <TableHead align="end">Changes</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {releases.map((release) => (
          <TableRow key={release.version}>
            <TableHead scope="row">{release.version}</TableHead>
            <TableCell>{release.date}</TableCell>
            <TableCell align="end">{release.changes}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

This adds the example as components/examples/table/plain.tsx, together with the Table component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/table-plain.json

To add only the component, follow the Table installation.

Props in this example

The Table props this example sets, from the API reference.

PropTypeDefault
scopeUse row for the cell that names a row. Inside the body it gets cell padding and foreground text.
"col" | "row"–
alignend also switches to tabular numbers so digits line up.
"start" | "center" | "end""start"
PropTypeDefault
alignend also switches to tabular numbers so digits line up.
"start" | "center" | "end""start"

Every prop is in the Table API reference.

See them all, with keyboard support and accessibility notes, on the Table page.