[ [UI.25] Data Display ] Table

Table

> A semantic table component with header, body, footer, and caption support for displaying structured data.

Import

[ [0x5B] IMPORT ]

1import {
2  Table,
3  TableBody,
4  TableCaption,
5  TableCell,
6  TableFooter,
7  TableHead,
8  TableHeader,
9  TableRow,
10} from "@/components/ui/table";

Preview

[ [0x00] TABLE ]

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$750.00

1<Table>
2  <TableCaption>A list of your recent invoices.</TableCaption>
3  <TableHeader>
4    <TableRow>
5      <TableHead>Invoice</TableHead>
6      <TableHead>Status</TableHead>
7      <TableHead>Method</TableHead>
8      <TableHead className="text-right">Amount</TableHead>
9    </TableRow>
10  </TableHeader>
11  <TableBody>
12    <TableRow>
13      <TableCell className="font-medium">INV001</TableCell>
14      <TableCell>Paid</TableCell>
15      <TableCell>Credit Card</TableCell>
16      <TableCell className="text-right">$250.00</TableCell>
17    </TableRow>
18    {/* More rows... */}
19  </TableBody>
20  <TableFooter>
21    <TableRow>
22      <TableCell colSpan={3}>Total</TableCell>
23      <TableCell className="text-right">$750.00</TableCell>
24    </TableRow>
25  </TableFooter>
26</Table>

Variants

[ [0x00] SIMPLE TABLE ]

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Editor

1<Table>
2  <TableHeader>
3    <TableRow>
4      <TableHead>Name</TableHead>
5      <TableHead>Email</TableHead>
6      <TableHead>Role</TableHead>
7    </TableRow>
8  </TableHeader>
9  <TableBody>
10    <TableRow>
11      <TableCell>John Doe</TableCell>
12      <TableCell>john@example.com</TableCell>
13      <TableCell>Admin</TableCell>
14    </TableRow>
15  </TableBody>
16</Table>

[ [0x00] SELECTED ROWS ]

Product	Price	Stock
Laptop	$999	15
Keyboard	$79	42
Mouse	$29	103

1<Table>
2  <TableHeader>
3    <TableRow>
4      <TableHead>Product</TableHead>
5      <TableHead>Price</TableHead>
6      <TableHead>Stock</TableHead>
7    </TableRow>
8  </TableHeader>
9  <TableBody>
10    <TableRow data-state="selected">
11      <TableCell>Keyboard</TableCell>
12      <TableCell>$79</TableCell>
13      <TableCell>42</TableCell>
14    </TableRow>
15  </TableBody>
16</Table>

[ [0x00] RESPONSIVE TABLE ]

ID	Customer	Product	Quantity	Status	Total
#ORD-001	Alice Cooper	Premium Plan	1	Completed	$99.00
#ORD-002	Bob Dylan	Starter Plan	2	Processing	$98.00

1<Table>
2  <TableHeader>
3    <TableRow>
4      <TableHead>ID</TableHead>
5      <TableHead>Customer</TableHead>
6      <TableHead>Product</TableHead>
7      <TableHead>Quantity</TableHead>
8      <TableHead>Status</TableHead>
9      <TableHead className="text-right">Total</TableHead>
10    </TableRow>
11  </TableHeader>
12  <TableBody>
13    {/* Rows with horizontal scroll on mobile */}
14  </TableBody>
15</Table>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
className	`string`	-	Additional CSS classes

Accessibility

[ [0x58] A11Y ]

Uses semantic HTML table elements (table, thead, tbody, tfoot)
TableHead elements have scope='col' by default for screen readers
TableCaption provides accessible description of table content
Responsive wrapper prevents horizontal overflow on mobile
Hover states on rows improve visual feedback
Selected rows use data-state attribute for styling

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Table when:

• Displaying structured data with multiple columns (invoices, orders, user lists)
• User needs to compare values across rows or scan columns vertically
• Data has clear column headers and consistent row structure
• Sorting, filtering, or pagination would improve data browsing
• 10+ rows of data that benefit from tabular organization

✗ Don't use when:

• Small amounts of data (1-5 items, use Card or List instead)
• Data doesn't have consistent columns (use Card grid or List)
• Content is primarily text paragraphs or narrative (use typography)
• Mobile-first design with narrow viewport (tables scroll poorly, consider Card layout)
• Complex nested data (use Tree view or collapsible structure)

Best Practices:

• Use TableCaption to describe table content for screen readers
• Right-align numeric columns (amounts, quantities) with className="text-right"
• Use font-medium on first column for hierarchy (IDs, names)
• Add TableFooter for totals or summary rows
• Use data-state="selected" for highlighting active rows
• Wrap in responsive container for horizontal scroll on mobile
• Limit visible rows and add pagination for 50+ items
• Use consistent column widths (w-[100px] for narrow columns)

Preview

[ [0x00] TABLE ]

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$750.00

1<Table>
2  <TableCaption>A list of your recent invoices.</TableCaption>
3  <TableHeader>
4    <TableRow>
5      <TableHead>Invoice</TableHead>
6      <TableHead>Status</TableHead>
7      <TableHead>Method</TableHead>
8      <TableHead className="text-right">Amount</TableHead>
9    </TableRow>
10  </TableHeader>
11  <TableBody>
12    <TableRow>
13      <TableCell className="font-medium">INV001</TableCell>
14      <TableCell>Paid</TableCell>
15      <TableCell>Credit Card</TableCell>
16      <TableCell className="text-right">$250.00</TableCell>
17    </TableRow>
18    {/* More rows... */}
19  </TableBody>
20  <TableFooter>
21    <TableRow>
22      <TableCell colSpan={3}>Total</TableCell>
23      <TableCell className="text-right">$750.00</TableCell>
24    </TableRow>
25  </TableFooter>
26</Table>

Variants

[ [0x00] SIMPLE TABLE ]

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	Editor

1<Table>
2  <TableHeader>
3    <TableRow>
4      <TableHead>Name</TableHead>
5      <TableHead>Email</TableHead>
6      <TableHead>Role</TableHead>
7    </TableRow>
8  </TableHeader>
9  <TableBody>
10    <TableRow>
11      <TableCell>John Doe</TableCell>
12      <TableCell>john@example.com</TableCell>
13      <TableCell>Admin</TableCell>
14    </TableRow>
15  </TableBody>
16</Table>

[ [0x00] SELECTED ROWS ]

Product	Price	Stock
Laptop	$999	15
Keyboard	$79	42
Mouse	$29	103

1<Table>
2  <TableHeader>
3    <TableRow>
4      <TableHead>Product</TableHead>
5      <TableHead>Price</TableHead>
6      <TableHead>Stock</TableHead>
7    </TableRow>
8  </TableHeader>
9  <TableBody>
10    <TableRow data-state="selected">
11      <TableCell>Keyboard</TableCell>
12      <TableCell>$79</TableCell>
13      <TableCell>42</TableCell>
14    </TableRow>
15  </TableBody>
16</Table>

[ [0x00] RESPONSIVE TABLE ]

ID	Customer	Product	Quantity	Status	Total
#ORD-001	Alice Cooper	Premium Plan	1	Completed	$99.00
#ORD-002	Bob Dylan	Starter Plan	2	Processing	$98.00

1<Table>
2  <TableHeader>
3    <TableRow>
4      <TableHead>ID</TableHead>
5      <TableHead>Customer</TableHead>
6      <TableHead>Product</TableHead>
7      <TableHead>Quantity</TableHead>
8      <TableHead>Status</TableHead>
9      <TableHead className="text-right">Total</TableHead>
10    </TableRow>
11  </TableHeader>
12  <TableBody>
13    {/* Rows with horizontal scroll on mobile */}
14  </TableBody>
15</Table>

Prop

Type

Default

Description

className

string

Additional CSS classes