Homepage
Homepage
ThemesThemesHooksHooksColorsColorsIconsIcons

Table

Semantic table element for presenting data.

View sourceReport an issueView in Playground
Full nameEmailGroup
Danilo Sousa[email protected]Developer
Zahra Ambessa[email protected]Admin
Jasper Eriksson[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>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.

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

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

PropTypeDefault
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
pa
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.

PropTypeDefault
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
pa
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.

PropTypeDefault
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
pa
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 how large the text and padding of the table cells should be.

Full nameEmail
Danilo Sousa[email protected]
Zahra Ambessa[email protected]
Full nameEmail
Danilo Sousa[email protected]
Zahra Ambessa[email protected]
Full nameEmail
Danilo Sousa[email protected]
Zahra Ambessa[email protected]
<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.

Full nameEmailGroup
Danilo Sousa[email protected]Developer
Zahra Ambessa[email protected]Admin
Jasper Eriksson[email protected]Developer
<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>
PreviousSwitch
NextTabs
Edit this page on GitHub.