Table

Displays structured data in rows and columns with support for headers, footers, captions, and multiple visual variants.

Usage

The Table component is used to organize and display tabular data. It provides a set of compound components for building accessible, styled tables.

import { Table } from "@elemnts-ui/react"

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeader>Name</Table.ColumnHeader>
      <Table.ColumnHeader>Role</Table.ColumnHeader>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Alice Chen</Table.Cell>
      <Table.Cell>Frontend Developer</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Variants

The Table component offers two visual variants: primary (default) and secondary.

Sizes

Control the density of the table using the size prop. Supported sizes are xs, sm, md, lg, and xl.

Pinned Header

Use the pinnedHeader prop to make the table header sticky when the table content scrolls. Apply maxH and overflow="auto" to the root element to constrain the table height.

Alternating Rows

Apply alternating background colors to rows with the alternatingRows prop for improved readability in dense datasets.

Interactive

Use the interactive prop to enable hover styling on table rows, and combine it with state management for clickable, selectable rows.

Column Dividers

Display vertical dividers between columns using the showColumnDividers prop.

Caption

Add a caption to describe the table's content using Table.Caption. This improves accessibility by providing a summary for screen readers.

Footer

Use Table.Footer to display summary information or column totals at the bottom of the table.

API Reference

TableRoot

The root element of the Table.

Prop	Type	Default
asChild	`boolean`	`false`

TableCaption

The caption element of the Table.

Prop	Type	Default
asChild	`boolean`	`false`

TableHeader

The header element of the Table.

Prop	Type	Default
asChild	`boolean`	`false`

TableRow

The row element of the Table.

Prop	Type	Default
asChild	`boolean`	`false`

TableColumnHeader

The column header element of the Table.

Prop	Type	Default
asChild	`boolean`	`false`

TableCell

The cell element of the Table.

Prop	Type	Default
asChild	`boolean`	`false`

TableBody

The body element of the Table.

Prop	Type	Default
asChild	`boolean`	`false`