0.27.1
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,
	TableBody,
	TableCaption,
	TableCell,
	TableFoot,
	TableHead,
	TableHeader,
	TableRow,
} from "@ngrok/mantle/table";

<Table>
	<TableCaption>A list of your recent invoices.</TableCaption>
	<TableHead>
		<TableRow>
			<TableHeader className="w-[100px]">Invoice</TableHeader>
			<TableHeader>Status</TableHeader>
			<TableHeader>Method</TableHeader>
			<TableHeader className="text-right">Amount</TableHeader>
		</TableRow>
	</TableHead>
	<TableBody>
		{invoices.map((invoice) => (
			<TableRow key={invoice.invoice}>
				<TableCell className="font-medium">{invoice.invoice}</TableCell>
				<TableCell>{invoice.paymentStatus}</TableCell>
				<TableCell>{invoice.paymentMethod}</TableCell>
				<TableCell className="text-right">{invoice.totalAmount}</TableCell>
			</TableRow>
		))}
	</TableBody>
	<TableFoot>
		<TableRow>
			<TableCell colSpan={3}>Total</TableCell>
			<TableCell className="text-right">$2,500.00</TableCell>
		</TableRow>
	</TableFoot>
</Table>

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 container for all Table sub-components. The API matches the HTML table element 1:1.

Permitted content in this order:

  1. optional: TableCaption
  2. 0 or more: colgroup elements
  3. optional: TableHead
  4. either one of the following:
    • 0 or more: TableBody
    • 0 or more: TableRow
  5. optional: TableFoot

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

TableHead

The TableHead is a container for the table's column headers. Encapsulates a set of TableRows, 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 (TableHeader).

Must be used as a child of a Table. It should only come after anyTableCaption or colgroup and before anyTableBody or TableFoot.

Permitted content:

  1. 0 or more: TableRow

All props from the html thead element

TableBody

The TableBody encapsulates a set of TableRows, 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 anyTableCaption,colgroup, or TableHead.

Permitted content:

  1. 0 or more: TableRow

All props from the html tbody element

TableFoot

The TableFoot encapsulates a set of TableRows, 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 anyTableCaption,colgroup,TableHead, and TableBody.

Permitted content:

  1. 0 or more: TableRow

All props from the html tfoot element

TableRow

The TableRow defines a row of cells in a table. The row's cells can then be established using a mix of TableCell and TableHeader components.

Must be used as a child of a TableHead, TableBody, or TableFoot.

Permitted content:

  1. 0 or more: TableHeader or TableCell

All props from the html tr element

TableHeader

The TableHeader defines a cell as the header of a group of table cells and may be used as a child of a TableRow. The exact nature of this group is defined by the scope and headers attributes.

Must be used as a child of a TableRow.

Permitted content:

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

All props from the html th element

TableCell

The TableCell defines a cell of a table that contains data and may be used as a child of a TableRow.

Must be used as a child of a TableRow.

Permitted content:

  1. Flow content

All props from the html td element

TableCaption

The optional TableCaption 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