Table
Table primitives for static data. For sort, filter, search, and pagination out of the box, use TableData (documented separately).
Default
Table with Header and Body.
Usage
Import the parts you need from the component's folder.
ts
import {
Table,
TableHeader,
TableBody,
TableFooter,
TableRow,
TableHead,
TableCell,
TableCaption,
TableEmpty,
} from "@/components/ui/table";Status with Badge
Common pattern: status column uses Badge plain so it does not dominate the row.
Row actions
A trailing column holds a DropdownMenu per row for Edit, Duplicate, and Delete actions.
Empty state
Use TableEmpty when there is no data. The colspan must match the column count.
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>