Table

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Table component provides a flexible and accessible way to display tabular data. Built with semantic HTML elements and responsive design, it supports sorting, filtering, and various data presentation patterns. Perfect for data grids, user lists, product catalogs, and any structured information display.

Basic Usage

View in Storybook

First Name	Last Name	Username
John	Doe	@johndoe
Sally	Ross	@sallyross
Jane	Doe	@janedoe
Bob	Ross	@bobross

With Caption and Footer

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
INV004	Paid	Credit Card	$450.00
Total			$1,200.00

User Management Table

User	Role	Status	Actions
JD John Doe john@example.com	Admin	Active
JS Jane Smith jane@example.com	Editor	Active
MJ Mike Johnson mike@example.com	Viewer	Inactive
SW Sarah Wilson sarah@example.com	Editor	Pending

Sortable Table

Alice Johnson	28	Engineering	$75,000
Bob Smith	34	Marketing	$65,000
Carol Davis	29	Design	$70,000
David Wilson	31	Engineering	$80,000

Table with Search and Filter

AllElectronicsFurnitureStationery

Product	Category	Price	Stock
Laptop Pro	Electronics	$1299	15
Wireless Mouse	Electronics	$29	50
Office Chair	Furniture	$199	8
Desk Lamp	Furniture	$49	25
Notebook	Stationery	$12	100
Pen Set	Stationery	$15	75

Showing 6 of 6 products

Selectable Rows

	Task	Status	Priority
	Task 1	Completed	High
	Task 2	In Progress	Medium
	Task 3	Pending	Low
	Task 4	Completed	High

Properties

Table

Property	Type	Description
className	string	Additional CSS classes for the table container.
children	ReactNode	Table content (header, body, footer, caption).

TableHeader

Property	Type	Description
className	string	Additional CSS classes for the table header.
children	ReactNode	Header content (typically TableRow with TableHead cells).

TableBody

Property	Type	Description
className	string	Additional CSS classes for the table body.
children	ReactNode	Body content (TableRow elements with TableCell).

TableFooter

Property	Type	Description
className	string	Additional CSS classes for the table footer.
children	ReactNode	Footer content (typically summary rows).

TableRow

Property	Type	Description
className	string	Additional CSS classes for the table row.
children	ReactNode	Row content (TableHead or TableCell elements).

TableHead

Property	Type	Description
className	string	Additional CSS classes for the header cell.
children	ReactNode	Header cell content.
colSpan	number	Number of columns the cell should span.
rowSpan	number	Number of rows the cell should span.

TableCell

Property	Type	Description
className	string	Additional CSS classes for the table cell.
children	ReactNode	Cell content.
colSpan	number	Number of columns the cell should span.
rowSpan	number	Number of rows the cell should span.

TableCaption

Property	Type	Description
className	string	Additional CSS classes for the table caption.
children	ReactNode	Caption text.

Accessibility

The Table component includes comprehensive accessibility features:

• Semantic HTML - Uses proper table elements (table, thead, tbody, th, td)
• Screen Reader Support - Proper table structure announced to screen readers
• Keyboard Navigation - Tab navigation through interactive elements
• ARIA Support - Can be enhanced with ARIA labels and descriptions
• Responsive Design - Horizontal scrolling on smaller screens
• Focus Management - Clear focus indicators for interactive elements

Common Use Cases

The Table component is perfect for:

• Data Grids - Displaying structured data with sorting and filtering
• User Management - User lists with actions and status indicators
• Product Catalogs - E-commerce product listings with details
• Financial Data - Invoices, transactions, and financial reports
• Analytics Dashboards - Metrics and performance data
• Content Management - Articles, posts, and content listings
• System Logs - Error logs, activity feeds, and system events

Best Practices

1. Semantic Structure - Use proper table elements for accessibility
2. Clear Headers - Provide descriptive column headers
3. Consistent Alignment - Align numeric data to the right, text to the left
4. Row Identification - Use unique keys for each row
5. Loading States - Show loading indicators for async data
6. Empty States - Provide helpful messages when no data is available
7. Mobile Responsiveness - Consider horizontal scrolling or alternative layouts
8. Performance - Implement pagination or virtualization for large datasets