Table

Installation

npx shadcn@latest add table

yarn dlx shadcn@latest add table

pnpm dlx shadcn@latest add table

Usage

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

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Component API

Root table component with responsive wrapper.

function Table({ className, ...props }: React.ComponentProps<"table">)

TableHeader

Table header section.

function TableHeader({ className, ...props }: React.ComponentProps<"thead">)

TableBody

Table body section.

function TableBody({ className, ...props }: React.ComponentProps<"tbody">)

TableFooter

Table footer section.

function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">)

TableRow

Table row with hover state.

function TableRow({ className, ...props }: React.ComponentProps<"tr">)

TableHead

Table header cell.

function TableHead({ className, ...props }: React.ComponentProps<"th">)

TableCell

Table data cell.

function TableCell({ className, ...props }: React.ComponentProps<"td">)

TableCaption

Table caption/title.

function TableCaption({ className, ...props }: React.ComponentProps<"caption">)

Examples

Basic Table

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Developer</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>jane@example.com</TableCell>
      <TableCell>Designer</TableCell>
    </TableRow>
  </TableBody>
</Table>

With Footer

Table with footer totals:

<Table>
  <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>
    <TableRow>
      <TableCell>INV002</TableCell>
      <TableCell className="text-right">$150.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>Total</TableCell>
      <TableCell className="text-right">$400.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

With Actions

Table with action buttons:

import { MoreHorizontal } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Actions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {items.map((item) => (
      <TableRow key={item.id}>
        <TableCell>{item.name}</TableCell>
        <TableCell>{item.status}</TableCell>
        <TableCell className="text-right">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>Edit</DropdownMenuItem>
              <DropdownMenuItem>Delete</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Selectable Rows

Table with checkbox selection:

function SelectableTable() {
  const [selected, setSelected] = React.useState<string[]>([])

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[50px]">
            <Checkbox />
          </TableHead>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell>
              <Checkbox
                checked={selected.includes(user.id)}
                onCheckedChange={(checked) => {
                  setSelected(
                    checked
                      ? [...selected, user.id]
                      : selected.filter((id) => id !== user.id)
                  )
                }}
              />
            </TableCell>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Sortable Headers

Clickable headers for sorting:

function SortableTable() {
  const [sortBy, setSortBy] = React.useState("name")
  const [sortOrder, setSortOrder] = React.useState<"asc" | "desc">("asc")

  const handleSort = (key: string) => {
    if (sortBy === key) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc")
    } else {
      setSortBy(key)
      setSortOrder("asc")
    }
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead
            className="cursor-pointer"
            onClick={() => handleSort("name")}
          >
            Name {sortBy === "name" && (sortOrder === "asc" ? "↑" : "↓")}
          </TableHead>
          <TableHead
            className="cursor-pointer"
            onClick={() => handleSort("email")}
          >
            Email {sortBy === "email" && (sortOrder === "asc" ? "↑" : "↓")}
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {/* Sorted data */}
      </TableBody>
    </Table>
  )
}

Striped Rows

Alternating row colors:

<Table>
  <TableBody>
    {items.map((item, index) => (
      <TableRow
        key={item.id}
        className={index % 2 === 0 ? "bg-muted/50" : ""}
      >
        <TableCell>{item.name}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Empty State

Show message when no data:

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {items.length === 0 ? (
      <TableRow>
        <TableCell colSpan={2} className="h-24 text-center">
          No results.
        </TableCell>
      </TableRow>
    ) : (
      items.map((item) => (
        <TableRow key={item.id}>
          <TableCell>{item.name}</TableCell>
          <TableCell>{item.email}</TableCell>
        </TableRow>
      ))
    )}
  </TableBody>
</Table>

Data Tables

For advanced data tables with sorting, filtering, and pagination, combine the Table component with @tanstack/react-table. See the Data Table documentation for a complete example.

Accessibility

Semantic HTML table elements
Proper header associations
Responsive overflow handling
Screen reader support
Keyboard navigation

​Installation

​Usage

​Component API

​Table

​TableHeader

​TableBody

​TableFooter

​TableRow

​TableHead

​TableCell

​TableCaption

​Examples

​Basic Table

​With Footer

​With Actions

​Selectable Rows

​Sortable Headers

​Striped Rows

​Empty State

​Data Tables

​Accessibility