# Table

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```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>danilo@example.com</Table.Cell>

			<Table.Cell>Developer</Table.Cell>

		</Table.Row>



		<Table.Row>

			<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

			<Table.Cell>zahra@example.com</Table.Cell>

			<Table.Cell>Admin</Table.Cell>

		</Table.Row>



		<Table.Row>

			<Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>

			<Table.Cell>jasper@example.com</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](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                               | Type                            | Default   |
| ------------------------------------------------------------------------------------------------------------------ | ------------------------------- | --------- |
| `size`                                                                                                             | `Responsive<"1" \| "2" \| "3">` | `"2"`     |
| `variant`The visual variant to apply, see [theme overview](/themes/docs/theme/overview#variants) for more details. | `"surface" \| "ghost"`          | `"ghost"` |
| `layout`                                                                                                           | `Responsive<"auto" \| "fixed">` | —         |

### Header

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.

| Prop    | Type                                                     | Default |
| ------- | -------------------------------------------------------- | ------- |
| `align` | `Responsive<"start" \| "center" \| "end" \| "baseline">` | —       |

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

| Prop       | Type                                       | Default |
| ---------- | ------------------------------------------ | ------- |
| `justify`  | `Responsive<"start" \| "center" \| "end">` | —       |
| `width`    | `Responsive<string>`                       | —       |
| `minWidth` | `Responsive<string>`                       | —       |
| `maxWidth` | `Responsive<string>`                       | —       |
| `p`        | `Responsive<enum \| string>`               | —       |
| `px`       | `Responsive<enum \| string>`               | —       |
| `py`       | `Responsive<enum \| string>`               | —       |
| `pt`       | `Responsive<enum \| string>`               | —       |
| `pr`       | `Responsive<enum \| string>`               | —       |
| `pb`       | `Responsive<enum \| string>`               | —       |
| `pl`       | `Responsive<enum \| string>`               | —       |

### ColumnHeaderCell

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

| Prop       | Type                                       | Default |
| ---------- | ------------------------------------------ | ------- |
| `justify`  | `Responsive<"start" \| "center" \| "end">` | —       |
| `width`    | `Responsive<string>`                       | —       |
| `minWidth` | `Responsive<string>`                       | —       |
| `maxWidth` | `Responsive<string>`                       | —       |
| `p`        | `Responsive<enum \| string>`               | —       |
| `px`       | `Responsive<enum \| string>`               | —       |
| `py`       | `Responsive<enum \| string>`               | —       |
| `pt`       | `Responsive<enum \| string>`               | —       |
| `pr`       | `Responsive<enum \| string>`               | —       |
| `pb`       | `Responsive<enum \| string>`               | —       |
| `pl`       | `Responsive<enum \| string>`               | —       |

### RowHeaderCell

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

| Prop       | Type                                       | Default |
| ---------- | ------------------------------------------ | ------- |
| `justify`  | `Responsive<"start" \| "center" \| "end">` | —       |
| `width`    | `Responsive<string>`                       | —       |
| `minWidth` | `Responsive<string>`                       | —       |
| `maxWidth` | `Responsive<string>`                       | —       |
| `p`        | `Responsive<enum \| string>`               | —       |
| `px`       | `Responsive<enum \| string>`               | —       |
| `py`       | `Responsive<enum \| string>`               | —       |
| `pt`       | `Responsive<enum \| string>`               | —       |
| `pr`       | `Responsive<enum \| string>`               | —       |
| `pb`       | `Responsive<enum \| string>`               | —       |
| `pl`       | `Responsive<enum \| string>`               | —       |

## 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>danilo@example.com</Table.Cell>

			</Table.Row>

			<Table.Row>

				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

				<Table.Cell>zahra@example.com</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>danilo@example.com</Table.Cell>

			</Table.Row>

			<Table.Row>

				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

				<Table.Cell>zahra@example.com</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>danilo@example.com</Table.Cell>

			</Table.Row>

			<Table.Row>

				<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

				<Table.Cell>zahra@example.com</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>danilo@example.com</Table.Cell>

			<Table.Cell>Developer</Table.Cell>

		</Table.Row>



		<Table.Row>

			<Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>

			<Table.Cell>zahra@example.com</Table.Cell>

			<Table.Cell>Admin</Table.Cell>

		</Table.Row>



		<Table.Row>

			<Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>

			<Table.Cell>jasper@example.com</Table.Cell>

			<Table.Cell>Developer</Table.Cell>

		</Table.Row>

	</Table.Body>

</Table.Root>
```