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
asChild
boolean
false
size
Responsive<"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
asChild
boolean
false
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
asChild
boolean
false
justify
Responsive<"start" | "center" | "end">
No default value
width
string | number
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
asChild
boolean
false
justify
Responsive<"start" | "center" | "end">
No default value
width
string | number
No 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
asChild
boolean
false
justify
Responsive<"start" | "center" | "end">
No default value
width
string | number
No 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.