Table

Usage

import { Table } from "chakra-ui-solid";

<Table.Root>
  <Table.Caption />
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeader />
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell />
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell />
    </Table.Row>
  </Table.Footer>
</Table.Root>

Examples

Sizes

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

Variants

Use the variant prop to change the appearance of the table.

Striped

Use the striped prop to add zebra-stripes to the table.

Caption

Use the Table.Caption component to add a caption to the table.

Caption Top

Use the captionSide prop on Table.Caption to position the caption at the top of the table.

Column Border

Use the showColumnBorder prop to add borders between columns.

Overflow

Render the Table.ScrollArea component to enable horizontal scrolling.

Sticky Header

Use the stickyHeader prop to make the table header sticky.

Sticky Column

Here’s an example what uses data-sticky attributes to make table columns sticky during horizontal scrolling.

Sticky Header and Column

Combine stickyHeader with data-sticky attributes to create a table with both a sticky header and sticky columns. When using both features together, ensure the header row has a higher z-index to keep sticky column headers visible.

Highlight on Hover

Use the interactive prop to highlight rows on hover.

Column Group

Use the Table.ColumnGroup component to distribute the column widths using the html colgroup element.

The only prop that works for this component is htmlWidth

Native Mode

There is no native prop here, where the React version has one for rendering <thead>, <tbody>, <tr>, <td> and <th> directly inside Table.Root.

It works there by taking each slot’s resolved style object and re-hanging it on & thead, & tr, & td — a composition that happens while the component renders. A slot here resolves to a class name instead, and the rules behind it are generated by your Panda build long before anything renders, so there is nothing to compose.

What the prop buys upstream is stated on their page as performance: “eliminating the runtime styling and React Context overhead”. Neither cost is here to remove. Table.Row and Table.Cell compute no styles at render time, and reading the Root’s class map costs one context read that never invalidates. Write the part components.

Props

Root