Tables

Examples and documentation for the tables component

Table Variants

Example

Name	Email	Role
John Doe	[email protected]	Admin
Jane Smith	[email protected]	User

Name	Email	Role
John Doe	[email protected]	Admin
Jane Smith	[email protected]	User

Name	Email	Role
John Doe	[email protected]	Admin
Jane Smith	[email protected]	User

Name	Email	Role
John Doe	[email protected]	Admin
Jane Smith	[email protected]	User

Table Sizes

Example

Product	Price	Stock
Laptop	$999	15
Phone	$699	32

Product	Price	Stock
Laptop	$999	15
Phone	$699	32

Product	Price	Stock
Laptop	$999	15
Phone	$699	32

Table Options

Example

ID	Name	Status
1	John Doe	Active
2	Jane Smith	Active

Item	Category	Price
Item 1	Category 2	$10
Item 2	Category 3	$20
Item 3	Category 1	$30
Item 4	Category 2	$40
Item 5	Category 3	$50
Item 6	Category 1	$60
Item 7	Category 2	$70
Item 8	Category 3	$80

Fixed	Layout	Table
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Combined Options

Example

Name	Department	Salary
Alice Johnson	Engineering	$75,000
Bob Williams	Marketing	$65,000
Carol Brown	Design	$70,000

Project	Status	Progress
Website Redesign	In Progress	75%
Mobile App	Planning	25%
API Integration	Complete	100%

Special States

Example

Name	Email	Status
No data available

Loading...

Name	Email	Status
John Doe	[email protected]	Active
Jane Smith	[email protected]	Active
Bob Johnson	[email protected]	Inactive

Advanced Features

Example

Employee Information Table
Name	Position	Experience
David Lee	Senior Developer	5 years
Emma Wilson	Product Manager	3 years

Product	Quantity	Price
Laptop	2	$1,998
Monitor	1	$299
Total	3	$2,297

Cell Alignment Options

Example

Product	Quantity	Price
Smartphone	3	$2,097
Tablet	1	$499

Description	Status	Last Updated
Long product description that might wrap to multiple lines	Active	2025-01-15
Another product with detailed specifications	Pending	2025-01-14

Real-world Example

Complete Example: A practical table implementation with all features combined.

User Management Dashboard
ID	Name	Email	Role	Status	Actions
1	J John Doe	[email protected]	Admin	Active
2	J Jane Smith	[email protected]	User	Active
3	B Bob Johnson	[email protected]	Editor	Inactive
Total Users: 3

Accessibility Features

Our table components are built with accessibility as a first-class citizen:

Semantic HTML table structure with proper thead, tbody, and tfoot.
Automatic ARIA role="table" for enhanced screen reader support.
Responsive design with optimized mobile-friendly layouts.
Full keyboard navigation support for interactive elements.
High contrast color tokens for better visual visibility.
Explicit caption and header association for screen reader clarity.

1 ... 17 18 19 20 21