Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Table

A semantic table for presenting tabular data.

View sourceReport an issueView in Playground
Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
<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.

PropTypeDefault
asChildbooleanfalse
sizeResponsive<"1" | "2" | "3">"2"
variant"surface" | "ghost""ghost"

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
asChildbooleanfalse
alignResponsive<"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
asChildbooleanfalse
justifyResponsive<"start" | "center" | "end">No default value
widthstring | numberNo 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
asChildbooleanfalse
justifyResponsive<"start" | "center" | "end">No default value
widthstring | numberNo default value

ColumnRowHeaderCell

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

PropTypeDefault
asChildbooleanfalse
justifyResponsive<"start" | "center" | "end">No default value
widthstring | numberNo default value

Examples

With a backplate

Set variant to surface to add a visually enclosed backplate to the table.

Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
<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>
PreviousSwitch
NextTabs
Edit this page on GitHub.