💠 Table
A responsive table component.
| 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 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,500.00 | ||
Usage
The Table component is designed to display a collection of data in a structured format, consisting of rows and columns. It is ideal for comparing and analyzing related information.
A responsive table adapts to different screen sizes, ensuring that content is readable and accessible on any device.
When to use
- Displaying structured data: Use a Table when you have structured data that can be logically organized in columns and rows for clear comparison and analysis.
- Reporting and analytics: Tables are suitable for reports and analytics where users need to compare values and draw insights from data.
- Configurable lists: If the data includes a list of configurations or settings that need to be reviewed collectively, a Table provides a clear overview.
Avoid using Tables for unstructured data that doesn't fit well into a tabular format. Tables should not be used for content that is better presented in other formats, such as paragraphs of text or images. Be mindful not to overload tables with too much data, which can overwhelm users, and ensure that any interactive elements within the Table are easy to manipulate on touch devices.
Data Table
You can use the <Table /> component to build more complex data tables. Combine it with @tanstack/react-table (opens in a new tab) to create tables with sorting, filtering and pagination.
See the Data Table documentation for more information.
Examples
Default
| 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 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,500.00 | ||
Useful links
Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: