0.52.3
Theme Switcher

Table

A structured way to display data in rows and columns. The API matches the HTML table element 1:1.

A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
INV006PendingBank Transfer$200.00
INV007UnpaidCredit Card$300.00
Total$2,500.00
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-[100px]">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 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 the html div element

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

Establishes a table formatting context. Elements inside the Table generate rectangular boxes. Each box occupies a number of table cells according to the following rules:

  • The row boxes fill the table in the source code order from top to bottom. Each row box occupies one row of cells.
  • A row group box occupies one or more row boxes.
  • Column boxes are placed next to each other in source code order. Depending on the value of the dir attribute, the columns are laid in left-to-right or right-to-left direction. A column box occupies one or more columns of table cells.
  • A column group box occupies one or more column boxes.
  • A cell box may span over multiple rows and columns. User agents trim cells to fit in the available number of rows and columns.

Table cells do have padding. Boxes that make up a table do not have margins.

All props from the html table element

Table.Head

The Table.Head is a 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. This is usually in the form of column headers (Table.Header).

Must be used as a child of a Table. It should only come after anyTable.Caption or colgroup and before anyTable.Body or Table.Foot.

Permitted content:

  1. 0 or more: Table.Row

All props from the html thead element

Table.Body

The Table.Body encapsulates a set of Table.Rows, indicating they they comprise the body of a table's (main) data.

Must be used as a child of a Table and only come after anyTable.Caption,colgroup, or Table.Head.

Permitted content:

  1. 0 or more: Table.Row

All props from the html tbody element

Table.Foot

The 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.

Must be used as a child of a Table and only come after anyTable.Caption,colgroup,Table.Head, and Table.Body.

Permitted content:

  1. 0 or more: Table.Row

All props from the html tfoot element

Table.Row

The 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.

Must be used as a child of a Table.Head, Table.Body, or Table.Foot.

Permitted content:

  1. 0 or more: Table.Header or Table.Cell

All props from the html tr element

Table.Header

The 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. The exact nature of this group is defined by the scope and headers attributes.

Must be used as a child of a Table.Row.

Permitted content:

  1. Flow content, but with no header, footer, sectioning content, or heading content descendants.

All props from the html th element

Table.Cell

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

Must be used as a child of a Table.Row.

Permitted content:

  1. Flow content

All props from the html td element

Table.Caption

The optional Table.Caption specifies the caption (or title) of a table, providing the table an accessible description.

If used, must be the first child of a Table.

Permitted content:

  1. Flow content

All props from the html caption element