ShadcnStore

Appearance

Shadcn Table ​

The shadcn/ui Table is a set of styled, semantic table components, built with Tailwind CSS v4. It gives you a header, body, footer, rows, cells, and a caption for clean, accessible tabular data. For sorting and pagination, layer TanStack on top as a Data Table. Tables display records across ShadcnStore blocks.

Key features ​

  • Semantic table markup: header, body, footer, caption.
  • Consistent spacing, borders, and hover styles.
  • Right-aligned numeric columns with utilities.
  • Composable rows and cells for any data shape.
  • The base for the Data Table pattern.

Installation ​

bash
npx shadcn@latest add table

Usage ​

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

export function Example() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>INV001</TableCell>
          <TableCell className="text-right">$250.00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

No primitive dependency ​

The Table is styled markup with no primitive dependency.

Accessibility ​

  • Use TableHead for real th headers so screen readers announce columns.
  • Add a TableCaption that names what the table contains.
  • Keep data in semantic cells; do not fake tables with divs.

When to use the Table ​

Use the Table primitive for static or simple tabular data: invoices, specs, pricing comparisons, and summaries. When you need sorting, filtering, pagination, or row selection, build a Data Table with TanStack. For key-value details, a description list or Card is clearer.

Used in these blocks ​

For interactive tables use a Data Table; add a Badge for status cells, a Dropdown Menu for row actions, and Pagination below.

FAQ ​

What is the shadcn table? ​

The Table is a set of styled, semantic table components (header, body, footer, row, cell, caption) for displaying static or simple tabular data.

What is the difference between Table and Data Table? ​

Table is the styled markup primitive. The Data Table pattern adds TanStack Table on top for sorting, filtering, and pagination.

How do I make a table responsive? ​

Wrap the table in a container with overflow-x-auto so it scrolls horizontally on small screens.

How do I right-align a numeric column? ​

Add text-right to the relevant TableHead and TableCell.

Copyright © 2025-2026 ShadcnStore