Table

Overview

Use Table for structured data arranged in rows and columns.

Tables are useful for invoices, users, orders, logs, permissions, metrics, and any data where users compare values across rows.

Anatomy

A table has a caption or surrounding heading, header rows, body rows, cells, and optional footer. Headers should describe the data in each column.

Usage guidance

Use tables for comparison. Use cards or lists when each item has varied content and users do not need column alignment.

Accessibility

Use table headers correctly so screen readers can understand row and column relationships. Keep action buttons inside rows clearly labeled.

Installation

npx love-ui@latest add table

Usage

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

<Table>
  <TableCaption>Caption</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Header</TableHead>
      <TableHead>Header</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Cell</TableCell>
      <TableCell>Cell</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

The examples show a basic table and a framed table surface.

Framed Table