Table

Usage

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

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

Pagination

Here's an example of how to compose a table with pagination.

Selection

Here's an example of how to add row selection with checkboxes to your table.

Action Bar

Here's an example of how to compose a table with an action bar and checkboxes. This is useful for showing actions for selected table rows.

Column Group

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

:::warning

The only prop that works for this component is htmlWidth

:::

Native Mode

Use the native prop to render table descendants using native HTML elements (<thead>, <tbody>, <tr>, <td>, <th>) instead of Chakra's styled components.

This is a great way to improve performance for large tables by eliminating the runtime styling and React Context overhead.

TanStack Table

Chakra UI works seamlessly with TanStack Table for advanced table features.

Props

Root

Explorer

Explore the Table component parts interactively. Click on parts in the sidebar to highlight them in the preview.