| Reference | Client | Status | Amount |
|---|---|---|---|
| PRJ-001 | Northwind Trading | Confirmed | 180.00 USD |
| PRJ-002 | Globex Media | Pending | 240.00 USD |
| PRJ-003 | Initech Systems | Confirmed | 150.00 USD |
| Total | 570.00 USD | ||
<Table.Root>
<Table.Caption>Recent projects for your workspace.</Table.Caption>
<Table.Header>
<Table.Row>
<Table.Head>Reference</Table.Head>
<Table.Head className="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell className="font-medium">PRJ-001</Table.Cell>
<Table.Cell className="text-right">180.00 USD</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>Markup and styles, nothing else. For sorting, filtering, selection, pinning and the rest, DataTable is the one you want.
API
Table.Root
| Prop | Type | Default | |
|---|---|---|---|
containerClassName | string | — |
Plus every <table> prop. Source: table/components/table-root.tsx.
Table.Body
Plus every <tbody> prop. Source: table/components/table-body.tsx.
Table.Caption
Plus every <caption> prop. Source: table/components/table-caption.tsx.
Table.Cell
Plus every <td> prop. Source: table/components/table-cell.tsx.
Table.Footer
Plus every <tfoot> prop. Source: table/components/table-footer.tsx.
Table.Head
Plus every <th> prop. Source: table/components/table-head.tsx.
Table.Header
Plus every <thead> prop. Source: table/components/table-header.tsx.
Table.Row
Plus every <tr> prop. Source: table/components/table-row.tsx.