Table
A responsive table component for displaying tabular data.
When To Use
Use the Table component when you need to:
- Display structured data in rows and columns
- Allow users to compare and analyze data
- Present information in a scannable format
- Show related data points together
- Create data-rich interfaces with sortable columns
Tables are ideal for financial data, product listings, user management interfaces, and any scenario where data needs to be organized in a structured format.
Examples
| ID | Name | Status | |
|---|---|---|---|
| 001 | John Doe | john.doe@example.com | Active |
| 002 | Jane Smith | jane.smith@example.com | Active |
| 003 | Michael Johnson | michael.johnson@example.com | Inactive |
| 004 | Emily Brown | emily.brown@example.com | Active |
| 005 | Robert Wilson | robert.wilson@example.com | Pending |
| 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 |
| INV005 | Paid | PayPal | $550.00 |
| Total | $1,750.00 | ||
| ID | ||||
|---|---|---|---|---|
| 1 | John Doe | Developer | Engineering | 2021-06-10 |
| 2 | Jane Smith | Designer | Product | 2020-03-15 |
| 3 | Robert Johnson | Manager | Engineering | 2019-11-20 |
| 4 | Emily Davis | Developer | Engineering | 2022-02-05 |
| 5 | Michael Wilson | Product Owner | Product | 2021-09-18 |
| 6 | Sarah Thompson | Designer | Product | 2022-04-30 |
| 7 | David Brown | Manager | Marketing | 2020-07-14 |
Click on column headers to sort the table.
Product Inventory
Manage your product stock and availability.
| Product ID | Product | Category | Price | Stock | Status |
|---|---|---|---|---|---|
| PROD-001 | Ergonomic Desk Chair | Furniture | $249.99 | 28 | In Stock |
| PROD-002 | Wireless Keyboard | Electronics | $89.99 | 5 | Low Stock |
| PROD-003 | Ultra-wide Monitor | Electronics | $549.99 | 0 | Out of Stock |
| PROD-004 | Leather Notebook | Accessories | $24.99 | 45 | In Stock |
| PROD-005 | Desk Lamp | Furniture | $59.99 | 12 | In Stock |
Displaying 5 of 5 products
Props
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |