Table

Styled table primitives for tabular data.

Invoice	Status	Amount
INV-001	Paid	$450.00
INV-002	Pending	$300.00
INV-003	Overdue	$650.00

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/table.json

Usage

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Dhrumil</TableCell>
    </TableRow>
  </TableBody>
</Table>

These are styled native table elements: fully static, server-renderable, no JavaScript. For sorting, filtering, and pagination use Data Table.

Accessibility

Native table semantics come free; add a TableCaption describing the data for screen reader users on complex tables.
Right-align numeric columns and use tabular-nums so figures line up.

Card

Surface for grouping related content and actions.

Data Table

Sortable, filterable, paginated table on TanStack Table.

On this page

Install Usage Accessibility