Table

Table primitives for static data. For sort, filter, search, and pagination out of the box, use TableData (documented separately).

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
</script>

<template>
  <Table>
    <TableCaption />
    <TableHeader>
      <TableRow>
        <TableHead />
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell />
      </TableRow>
    </TableBody>
    <TableFooter />
  </Table>
</template>

Default

Table with Header and Body.

Invoice	Method	Status	Amount
INV-001	Credit Card	Paid	$250.00
INV-002	PayPal	Pending	$150.00
INV-003	Bank Transfer	Unpaid	$350.00
INV-004	Credit Card	Paid	$450.00

Status with Badge

Common pattern: status column uses Badge plain so it does not dominate the row.

Order	Customer	Status
ORD-1042	Olivia Martin	Fulfilled
ORD-1041	Jackson Lee	Processing
ORD-1040	Isabella Nguyen	Refunded

Empty state

Use TableEmpty when there is no data. The colspan must match the column count.

Invoice	Method	Amount
No invoices yet. Create one to get started.

API Reference

Props, events, and slots for each sub-component.

Table

Props

Prop	Type	Default	Description
class	string	—	Main container. Already wrapped in relative w-full overflow-auto.

TableHead / TableCell

Props

Prop	Type	Default	Description
class	string	—	Override alignment (text-right, text-center) or width.

TableEmpty

Props

Prop	Type	Default	Description
colspan	number	1	Must match the number of columns in the header.

TableHeader / TableBody / TableFooter / TableRow / TableCaption

Props

Prop	Type	Default	Description
class	string	—	Semantic table sections. Render the matching thead/tbody/tfoot/tr/caption with design-system styling.

Tab Nav Table Data