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 | ||
Installation
Usage
<Table>
<Table.Caption> {"A list of your recent invoices."->React.string} </Table.Caption>
<Table.Header>
<Table.Row>
<Table.Head className="w-[100px]"> {"Invoice"->React.string} </Table.Head>
<Table.Head> {"Status"->React.string} </Table.Head>
<Table.Head> {"Method"->React.string} </Table.Head>
<Table.Head className="text-right"> {"Amount"->React.string} </Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell className="font-medium"> {"INV001"->React.string} </Table.Cell>
<Table.Cell> {"Paid"->React.string} </Table.Cell>
<Table.Cell> {"Credit Card"->React.string} </Table.Cell>
<Table.Cell className="text-right"> {"$250.00"->React.string} </Table.Cell>
</Table.Row>
</Table.Body>
</Table>Examples
Footer
Use the <TableFooter /> component to add a footer to the table.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| Total | $2,500.00 | ||
Actions
A table showing actions for each row using a <DropdownMenu /> component.
| Product | Price | Actions |
|---|---|---|
| Wireless Mouse | $29.99 | |
| Mechanical Keyboard | $129.99 | |
| USB-C Hub | $49.99 |
Data Table
You can use the <Table /> component to build more complex data tables. Combine it with @tanstack/react-table to create tables with sorting, filtering and pagination.
See the Data Table documentation for more information.
You can also see an example of a data table in the Tasks demo.