Create Next App

Docs

table

A responsive table component.

Preview
Code

A list of your recent invoices.
Invoice	Status	Method	Amount
INV101	Unpaid	Apple Pay	$180.00
INV102	Paid	Credit Card	$720.00
INV103	Pending	PayPal	$95.00
INV104	Paid	Bank Transfer	$1,250.00
INV105	Unpaid	Debit Card	$430.00
INV106	Pending	Apple Pay	$610.00
INV107	Paid	Google Pay	$390.00
Total			$2,500.00

Installation

Usage

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

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>

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

Data Table

You can use the <Table /> component to build more complex data tables. Combine it with @gentleduck/table to create tables with sorting, filtering and pagination.

See the Data Table documentation for more information.

You can also see an example of a data table in the Tasks demo.

API Reference

Table

props (React.ComponentProps<'table'>): Native props forwarded to the <table> element.

TableHeader

props (React.ComponentProps<'thead'>): Native props forwarded to the <thead> element.

TableBody

props (React.ComponentProps<'tbody'>): Native props forwarded to the <tbody> element.

TableFooter

props (React.ComponentProps<'tfoot'>): Native props forwarded to the <tfoot> element.

TableRow

props (React.ComponentProps<'tr'>): Native props forwarded to the <tr> element.

TableHead

props (React.ComponentProps<'th'>): Native props forwarded to the <th> element.

TableCell

props (React.ComponentProps<'td'>): Native props forwarded to the <td> element.

TableCaption

props (React.ComponentProps<'caption'>): Native props forwarded to the <caption> element.

Behavior: These components provide a styled, accessible table structure with flexible customization via className and props forwarding. The Table component wraps the native <table> in a div for responsive overflow. Header, body, footer, rows, heads, cells, and caption have default styling with support for hover, selection, and alignment adjustments — including special handling for checkboxes inside cells.

Switch Tabs