Table
The Table component is a simple, responsive solution for efficiently displaying data across devices. It adapts to various screen sizes, ensuring a seamless and user-friendly experience for viewing and interacting with data, whether on desktop, tablet, or mobile. Ideal for organizing and presenting large datasets in a clear, accessible format, it can also be combined with the Data Table component to create more advanced, interactive data experiences.
| 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 | ||
Additional Examples
Interactive Data Table
| Status | Amount | |||
|---|---|---|---|---|
success | ken99@yahoo.com | $316.00 | ||
success | Abe45@gmail.com | $242.00 | ||
processing | Monserrat44@gmail.com | $837.00 | ||
success | Silas22@gmail.com | $874.00 | ||
failed | carmella@hotmail.com | $721.00 |
The Table component prioritizes displaying data in a simple, responsive format, focusing on readability across devices rather than interactivity. Unlike the Data Table component, which offers more advanced and interactive features, the Table component is ideal for straightforward data presentation. For more complex implementations, see the Data Table documentation.
Configurable Props
<Table>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<Table> | Component | False | Acts as the wrapper for the table. |
<TableHeader>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<TableHeader> | Component | False | Acts as the header row for the table, containing the title of columns. |
<TableRow>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<TableRow> | Component | False | Acts as the wrapper for the table row, containing the TableHead component(s). |
<TableHead>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<TableHead> | Component | False | Acts as the header for table columns. |
<TableBody>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<TableBody> | Component | False | Acts as a wrapper for the table body, containing the TableRow and TableCell components. |
key | String | False | Provides key for table rows to ensure that the rows are unique. |
<TableCell>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<TableCell> | Component | False | Contains the content of the cells that make up the table. |
<TableFooter>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<TableFooter> | Component | False | Acts as the footer for the table. |
<TableCaption>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<TableCaption> | Component | False | Acts as the caption for the table to provide additional information or context. |