Table

A structured way to display data in rows and columns.

import { Table } from "@ngrok/mantle/table";

<Table.Root>
	<Table.Element>
		<Table.Caption>A list of your recent invoices.</Table.Caption>
		<Table.Head>
			<Table.Row>
				<Table.Header className="w-25">Invoice</Table.Header>
				<Table.Header>Status</Table.Header>
				<Table.Header>Method</Table.Header>
				<Table.Header className="text-right">Amount</Table.Header>
			</Table.Row>
		</Table.Head>
		<Table.Body>
			{invoices.map((invoice) => (
				<Table.Row key={invoice.invoice}>
					<Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
					<Table.Cell>{invoice.paymentStatus}</Table.Cell>
					<Table.Cell>{invoice.paymentMethod}</Table.Cell>
					<Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
				</Table.Row>
			))}
		</Table.Body>
		<Table.Foot>
			<Table.Row>
				<Table.Cell colSpan={3}>Total</Table.Cell>
				<Table.Cell className="text-right">$2,500.00</Table.Cell>
			</Table.Row>
		</Table.Foot>
	</Table.Element>
</Table.Root>;

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 provides styling and additional functionality, such as horizontal overflow detection.

All props from div.

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.

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.

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, providing the table an accessible description.

All props from caption.