Table

The Table component is used to display data in a tabular format. It is based on the HTML table element and provides a set of components to build tables.

View source Report an issue

Full name	Email	Group
Jeeyoon Hyun	[email protected]	Developer
Lauren Chen	[email protected]	Admin
Ling Lim	[email protected]	Developer

<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>Jeeyoon Hyun</Table.RowHeaderCell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.RowHeaderCell>Lauren Chen</Table.RowHeaderCell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Admin</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.RowHeaderCell>Ling Lim</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.

Prop	Type	Default
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "ghost"`	`"ghost"`
`layout`	`Responsive<"auto" \| "fixed">`	No default value

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">`	No default value

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

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

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

Size

Use the size prop to control the size of the table.

Full name	Email	Group
Jeeyoon Hyun	[email protected]	Developer
Lauren Chen	[email protected]	Admin
Jasper Eriksson	[email protected]	Developer

Full name	Email	Group
Jeeyoon Hyun	[email protected]	Developer
Lauren Chen	[email protected]	Admin
Jasper Eriksson	[email protected]	Developer

Full name	Email	Group
Jeeyoon Hyun	[email protected]	Developer
Lauren Chen	[email protected]	Admin
Jasper Eriksson	[email protected]	Developer

<Flex direction="column" gap="4">
  <Table.Root size="1">
    <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>Jeeyoon Hyun</Table.RowHeaderCell>
        <Table.Cell>[email protected]</Table.Cell>
        <Table.Cell>Developer</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.RowHeaderCell>Lauren Chen</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>
  <Table.Root size="2">
    <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>Jeeyoon Hyun</Table.RowHeaderCell>
        <Table.Cell>[email protected]</Table.Cell>
        <Table.Cell>Developer</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.RowHeaderCell>Lauren Chen</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>
  <Table.Root size="3">
    <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>Jeeyoon Hyun</Table.RowHeaderCell>
        <Table.Cell>[email protected]</Table.Cell>
        <Table.Cell>Developer</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.RowHeaderCell>Lauren Chen</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>
</Flex>

Layout

Use the layout prop to change the layout of the table.

Full name	Email	Group
Danilo Sousa	[email protected]	Developer
Zahra Ambessa	[email protected]	Admin
Jasper Eriksson	[email protected]	Developer

Full name	Email	Group
Danilo Sousa	[email protected]	Developer
Zahra Ambessa	[email protected]	Admin
Jasper Eriksson	[email protected]	Developer

<Flex direction="column" gap="4">
  <Table.Root layout="auto">
    <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>
  <Table.Root layout="fixed">
    <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>
</Flex>

Fixed height

Full name	Email	Group
Jeeyoon Hyun	[email protected]	Developer
Lauren Chen	[email protected]	Admin
Ling Lim	[email protected]	Developer

<Table.Root className="h-[300px]">
  <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>Jeeyoon Hyun</Table.RowHeaderCell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.RowHeaderCell>Lauren Chen</Table.RowHeaderCell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Admin</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.RowHeaderCell>Ling Lim</Table.RowHeaderCell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Fixed height with scroll

Full name	Email	Group	Phone	Description	Description 2	Description 3	Description 4	Description 5
Danilo Sousa	[email protected]	Developer	+111111111	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.
Zahra Ambessa	[email protected]	Admin	+111111111	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.
Jasper Eriksson	[email protected]	Developer	+111111111	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.	Versions of the text have been used in typesetting at least since the 1960s.

<Table.Root className="h-[300px]">
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Phone</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Description</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Description 2</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Description 3</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Description 4</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Description 5</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.Cell>+111111111</Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.RowHeaderCell>Zahra Ambessa</Table.RowHeaderCell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Admin</Table.Cell>
      <Table.Cell>+111111111</Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.RowHeaderCell>Jasper Eriksson</Table.RowHeaderCell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Developer</Table.Cell>
      <Table.Cell>+111111111</Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
      <Table.Cell>
        Versions of the text have been used in typesetting at least since the
        1960s.
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

PreviousSwitch

NextData Table 🆕 🧪

Edit this page on GitHub.

Overview

Layout

Typography

Components

Utilities

Contributing

Table

API Reference

Root

Header

Body

Row

Cell

ColumnHeaderCell

RowHeaderCell

Examples

Size

Layout

Fixed height

Fixed height with scroll