Table

A plain styled HTML table.

Recent projects for your workspace.
ReferenceClientStatusAmount
PRJ-001Northwind TradingConfirmed180.00 USD
PRJ-002Globex MediaPending240.00 USD
PRJ-003Initech SystemsConfirmed150.00 USD
Total570.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

PropTypeDefault
containerClassNamestring

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.