ContextQMD
Back to Radix Ui

Table

data/themes/docs/components/table.mdx

latest4.6 KB
Original Source
jsx
<Table.Root>
	<Table.Header>
		<Table.Row>
			<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
		</Table.Row>
	</Table.Header>

	<Table.Body>
		<Table.Row>
			<Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
			<Table.Cell>[email protected]</Table.Cell>
			<Table.Cell>Developer</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
			<Table.Cell>[email protected]</Table.Cell>
			<Table.Cell>Admin</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
			<Table.Cell>[email protected]</Table.Cell>
			<Table.Cell>Developer</Table.Cell>
		</Table.Row>
	</Table.Body>
</Table.Root>

API Reference

Root

Groups the Header and Body parts. This component is based on the table element and supports common margin props.

<ThemesPropsTable defs="tableRootPropDefs" />

Contains the column headings for the table, based on the thead element.

Body

Displays the table data. This component is based on the tbody element.

Row

A row of table cells. Based on the tr element.

<ThemesPropsTable defs="tableRowPropDefs" />

Cell

A basic table cell. This component is based on the td element, but uses justify instead of align to control how horizontal space is distributed within the table cell.

<ThemesPropsTable defs="tableCellPropDefs" />

ColumnHeaderCell

The header of a table column. Based on the th element and provides the same props interface as the Cell part.

<ThemesPropsTable defs="tableCellPropDefs" />

RowHeaderCell

The header of a table row. Based on the th element and provides the same props interface as the Cell part.

<ThemesPropsTable defs="tableCellPropDefs" />

Examples

Size

Use the size prop to control how large the text and padding of the table cells should be.

jsx
<Flex direction="column" gap="5" maxWidth="350px">
	<Table.Root __size__="1">
		<Table.Header>
			<Table.Row>
				<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
				<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
			</Table.Row>
		</Table.Header>

		<Table.Body>
			<Table.Row>
				<Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
				<Table.Cell>[email protected]</Table.Cell>
			</Table.Row>
			<Table.Row>
				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
				<Table.Cell>[email protected]</Table.Cell>
			</Table.Row>
		</Table.Body>
	</Table.Root>

	<Table.Root __size__="2">
		<Table.Header>
			<Table.Row>
				<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
				<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
			</Table.Row>
		</Table.Header>

		<Table.Body>
			<Table.Row>
				<Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
				<Table.Cell>[email protected]</Table.Cell>
			</Table.Row>
			<Table.Row>
				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
				<Table.Cell>[email protected]</Table.Cell>
			</Table.Row>
		</Table.Body>
	</Table.Root>

	<Table.Root __size__="3">
		<Table.Header>
			<Table.Row>
				<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
				<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
			</Table.Row>
		</Table.Header>

		<Table.Body>
			<Table.Row>
				<Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
				<Table.Cell>[email protected]</Table.Cell>
			</Table.Row>
			<Table.Row>
				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
				<Table.Cell>[email protected]</Table.Cell>
			</Table.Row>
		</Table.Body>
	</Table.Root>
</Flex>

With a backplate

Use variant="surface" to add a visually enclosed backplate to the table.

jsx
<Table.Root variant="surface">
	<Table.Header>
		<Table.Row>
			<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
		</Table.Row>
	</Table.Header>

	<Table.Body>
		<Table.Row>
			<Table.RowHeaderCell>Danilo Sousa</Table.RowHeaderCell>
			<Table.Cell>[email protected]</Table.Cell>
			<Table.Cell>Developer</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
			<Table.Cell>[email protected]</Table.Cell>
			<Table.Cell>Admin</Table.Cell>
		</Table.Row>

		<Table.Row>
			<Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
			<Table.Cell>[email protected]</Table.Cell>
			<Table.Cell>Developer</Table.Cell>
		</Table.Row>
	</Table.Body>
</Table.Root>