A summary of your recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Credit card	$250.00
INV-002	Pending	Bank transfer	$150.00
INV-003	Paid	Credit card	$350.00
Total			$750.00

Table

A responsive table with composable headers, rows, cells, a caption, and an optional footer. Wide tables scroll horizontally.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/table.json

Usage

tsx

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

<Table>
  <TableCaption>Team members and their roles.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alex Morgan</TableCell>
      <TableCell>Designer</TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Prop	Type	Default	Description
`Table.children`	`ReactNode`	`—`	Compose the caption, header, body, and footer.
`Table.className`	`string`	`—`	Additional classes on the table element. The wrapper scrolls horizontally.
`TableHeader / TableBody / TableFooter.children`	`ReactNode`	`—`	TableRow elements within each section.
`TableRow.children`	`ReactNode`	`—`	TableHead or TableCell elements.
`TableRow.data-state`	`string`	`—`	Set to "selected" to highlight a row.
`TableHead.scope`	`"col" \| "row" \| "colgroup" \| "rowgroup"`	`"col"`	Associates a header with columns or rows.
`TableHead / TableCell.colSpan`	`number`	`1 (browser default)`	Number of columns a cell spans.
`TableHead / TableCell.rowSpan`	`number`	`1 (browser default)`	Number of rows a cell spans.
`TableHead / TableCell.children`	`ReactNode`	`—`	Cell content.
`TableCaption.children`	`ReactNode`	`—`	Accessible description of the table.
`className`	`string`	`—`	Each table part accepts additional classes.
`Native props`	`ComponentProps<"table" \| "thead" \| "tbody" \| "tfoot" \| "tr" \| "th" \| "td" \| "caption">`	`—`	Each part forwards the native attributes and event handlers of its corresponding element.

Setup notes

Use the global theme tokens and Tailwind CSS v4. Borders use border-border, with no rounded classes. Use TableHead scope="row" for row headers, TableCaption to describe the table, and TableFooter for summary rows. Sorting and pagination can be composed separately.