# Table

Semantic table element for presenting data.

```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](#api-reference)

### [Root](#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` | `"surface" \| "ghost"`          | `"ghost"`        |
| `layout`  | `Responsive<"auto" \| "fixed">` | No default value |

### [Header](#header)

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

### [Body](#body)

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

### [Row](#row)

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

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

### [Cell](#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">` | No default value |
| `width`    | `Responsive<string>`                       | No default value |
| `minWidth` | `Responsive<string>`                       | No default value |
| `maxWidth` | `Responsive<string>`                       | No default value |
| `p`        | `Responsive<enum \| string>`               | No default value |
| `px`       | `Responsive<enum \| string>`               | No default value |
| `py`       | `Responsive<enum \| string>`               | No default value |
| `pt`       | `Responsive<enum \| string>`               | No default value |
| `pr`       | `Responsive<enum \| string>`               | No default value |
| `pb`       | `Responsive<enum \| string>`               | No default value |
| `pl`       | `Responsive<enum \| string>`               | No default value |

### [ColumnHeaderCell](#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">` | No default value |
| `width`    | `Responsive<string>`                       | No default value |
| `minWidth` | `Responsive<string>`                       | No default value |
| `maxWidth` | `Responsive<string>`                       | No default value |
| `p`        | `Responsive<enum \| string>`               | No default value |
| `px`       | `Responsive<enum \| string>`               | No default value |
| `py`       | `Responsive<enum \| string>`               | No default value |
| `pt`       | `Responsive<enum \| string>`               | No default value |
| `pr`       | `Responsive<enum \| string>`               | No default value |
| `pb`       | `Responsive<enum \| string>`               | No default value |
| `pl`       | `Responsive<enum \| string>`               | No default value |

### [RowHeaderCell](#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">` | No default value |
| `width`    | `Responsive<string>`                       | No default value |
| `minWidth` | `Responsive<string>`                       | No default value |
| `maxWidth` | `Responsive<string>`                       | No default value |
| `p`        | `Responsive<enum \| string>`               | No default value |
| `px`       | `Responsive<enum \| string>`               | No default value |
| `py`       | `Responsive<enum \| string>`               | No default value |
| `pt`       | `Responsive<enum \| string>`               | No default value |
| `pr`       | `Responsive<enum \| string>`               | No default value |
| `pb`       | `Responsive<enum \| string>`               | No default value |
| `pl`       | `Responsive<enum \| string>`               | No default value |

## [Examples](#examples)

### [Size](#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](#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>
```

<!--$-->

<!--/$-->