Table

Default

Table with Header and Body.

Status with Badge

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

Footer totals

TableFooter holds a summary row. Span leading cells with colspan so the total aligns under the last column.

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.

<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>

API Reference