Invoice Example
| 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,250.00 | ||
Simple Table
| Name | Role | Department |
|---|---|---|
| Alice Johnson | Engineer | Platform |
| Bob Smith | Designer | Product |
| Carol Williams | Manager | Engineering |
Empty State
| Invoice | Status | Amount |
|---|---|---|
| No results. | ||
Sub-components
| Sub-component | Type | Description |
|---|---|---|
| Table | Root | Wrapper with overflow handling and border |
| Table.Header | Component | Table header section (thead) |
| Table.Body | Component | Table body section (tbody) |
| Table.Footer | Component | Table footer section (tfoot) |
| Table.Row | Component | Table row with border and hover styles |
| Table.Head | Component | Header cell with bold font |
| Table.Cell | Component | Standard data cell |
| Table.Caption | Component | Accessible caption below the table |
Usage
<Table>
<Table.Caption>A list of your recent invoices.</Table.Caption>
<Table.Header>
<Table.Row>
<Table.Head>Invoice</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head className="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>INV001</Table.Cell>
<Table.Cell>Paid</Table.Cell>
<Table.Cell className="text-right">$250.00</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Cell colSpan={2}>Total</Table.Cell>
<Table.Cell className="text-right">$250.00</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>