Table

Table displays related values in a row-and-column layout. Its compound components distinguish column headings from the table body, while every section shares the same measured column widths so cell boundaries and content stay aligned.

Import

import { Table } from "@rbxts/react-clean-ui";

Basic usage

The example does not assign a width to Table. In this mode, the table sizes itself horizontally to the intrinsic width of its columns and vertically to its rows, similar to an HTML table. The surrounding Container only provides space for the preview.

Structure

Build a table from the components exposed on Table:

• Table.Header contains the heading row or rows.
• Table.Body contains the data rows.
• Table.Row groups the cells that belong on one horizontal row.
• Table.Head creates a heading cell.
• Table.Cell creates a body cell.

Keep the cells in the same order in every row. A table is easiest to scan when each body row has one Table.Cell for every Table.Head in the header.

Each column takes the widest intrinsic measurement reported by the heading or body cell at that position. That maximum is used for the matching column in every header and body row, so shorter cells do not create different boundaries from the cells above or below them. Cell padding is included in the measurement.

Sizing

Leave both width and Size unset to make the table hug its column content horizontally. Its height also grows to fit its rows by default.

Set width or Size when the table should occupy an explicit horizontal space. The columns retain the proportions of their intrinsic widths within that space, so columns with wider content receive more room while all rows remain aligned. height and AutomaticSize follow the shared SizeElementProps behavior inherited from Container.

Custom cell content

Heading and body cells accept React children, so a cell can contain another clean-ui component when plain text is not enough.

import { Table, Text } from "@rbxts/react-clean-ui";

<Table.Row>
    <Table.Cell>
        <Text text="INV003" weight="bold" />
    </Table.Cell>
    <Table.Cell>
        <Text text="Paid" />
    </Table.Cell>
</Table.Row>

String children are rendered as themed table text automatically.

Props

Table

Shared props

Table.Header

Table.Body

Table.Row

Table.Head

Shared props

Table.Cell

Shared props

Behavior

• The header and body are visual sections of the same table. Every column uses the maximum intrinsic width of the cells at that position across both sections, keeping cell bounds and content aligned between rows.
• With no width or Size, the table hugs its measured columns horizontally. With either prop supplied, those intrinsic widths become proportional shares of the explicit table width.
• Intrinsic measurements include resolved cell padding and update when mounted cell content, typography, scale, padding, or composition changes.
• Sections and rows are displayed in child order.
• Cell strings use the active table typography and colors; custom React children render in the same cell bounds.
• Table styling, including backgrounds, borders, spacing, and typography, comes from the active theme.

Theme values

The table uses theme.components.table for its background, border, corner radius, body-row dividers, cell spacing and padding, and header and cell typography. Setting scale on Table overrides the scale used to resolve its cell spacing and typography.