Table

A structured way to display data in rows and columns.

When to use

Table is the thin, semantic primitive for static tabular content: invoice summaries, pricing matrices, reference tables in documentation. Rows and cells render exactly what you put in them; there is no sorting, filtering, selection, or pagination built in.

• Prefer DataTable for dynamic, application data: anywhere users need to sort, filter, paginate, select, or click rows. DataTable is built on top of Table and powered by TanStack Table.
• Use Table directly only when your data is static and none of those behaviors apply.

1import { Table } from "@ngrok/mantle/table";2 3<Table.Root>⋯4	<Table.Element>⋯5		<Table.Caption>A list of your recent invoices.</Table.Caption>6		<Table.Head>⋯7			<Table.Row>⋯8				<Table.Header className="w-25">Invoice</Table.Header>9				<Table.Header>Status</Table.Header>10				<Table.Header>Method</Table.Header>11				<Table.Header className="text-right">Amount</Table.Header>12			</Table.Row>13		</Table.Head>14		<Table.Body>⋯15			{invoices.map((invoice) => (16				<Table.Row key={invoice.invoice}>⋯17					<Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>18					<Table.Cell>{invoice.paymentStatus}</Table.Cell>19					<Table.Cell>{invoice.paymentMethod}</Table.Cell>20					<Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>21				</Table.Row>22			))}23		</Table.Body>24		<Table.Foot>⋯25			<Table.Row>⋯26				<Table.Cell colSpan={3}>Total</Table.Cell>27				<Table.Cell className="text-right">$2,500.00</Table.Cell>28			</Table.Row>29		</Table.Foot>30	</Table.Element>31</Table.Root>;

Composition

Compose the parts of a Table together to build your own:

Table.Root└── Table.Element    ├── Table.Caption    ├── Table.Head    │   └── Table.Row    │       └── Table.Header    ├── Table.Body    │   └── Table.Row    │       └── Table.Cell    └── Table.Foot

API Reference

The Table is a structured way to display data in rows and columns. The API matches the HTML table element 1:1. It is composed of several sub-components.

Table.Root

Root container for all Table sub-components. Should be the parent of all other table sub-components. It draws the border and rounded corners, and scrolls wide content horizontally with a fading scroll edge.

All props from div. ref lands on the inner scroll container, so you can read or set its scroll position; every other prop lands on the outer element.

Table.Root stamps these data attributes on its outer element for your own CSS to target:

Table.Element

The API matches the HTML table element 1:1.

Permitted content in this order:

1. optional: Table.Caption
2. 0 or more: colgroup elements
3. optional: Table.Head
4. either one of the following:
   • 0 or more: Table.Body
   • 0 or more: Table.Row
5. optional: Table.Foot

All props from table.

Table.Head

Container for the table's column headers. Encapsulates a set of Table.Rows, indicating that they comprise the head of a table with information about the table's columns.

All props from thead.

Table.Body

Encapsulates a set of Table.Rows, indicating that they comprise the body of a table's (main) data. A body row highlights under the pointer and when a link or button inside it has visible focus, so a keyboard user sees the same row-scale target as a mouse user.

All props from tbody.

Table.Foot

Encapsulates a set of Table.Rows, indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.

All props from tfoot.

Table.Row

Defines a row of cells in a table. The row's cells can then be established using a mix of Table.Cell and Table.Header components.

All props from tr.

Table.Header

Defines a cell as the header of a group of table cells and may be used as a child of a Table.Row. scope defaults to "col"; pass scope="row" for a header cell inside a body row.

All props from th.

Table.Cell

Defines a cell of a table that contains data and may be used as a child of a Table.Row.

All props from td.

Table.Caption

Specifies the caption (or title) of a table, which gives the table its accessible name.

All props from caption.