Skip to main content
The @zendeskgarden/react-tables package provides a composable set of table components. Build data tables with sticky headers, sortable columns, row selection, overflow menus, and more.

​
Installation

npm install @zendeskgarden/react-tables

# Peer dependencies
npm install react react-dom styled-components @zendeskgarden/react-theming
Place a ThemeProvider from @zendeskgarden/react-theming at the root of your React application. All Garden components must be rendered inside a ThemeProvider.

​
Usage

​
Basic table

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Table } from '@zendeskgarden/react-tables';

const Example = () => (
  <ThemeProvider>
    <Table>
      <Table.Caption>Your unsolved tickets</Table.Caption>
      <Table.Head>
        <Table.HeaderRow>
          <Table.HeaderCell>Subject</Table.HeaderCell>
          <Table.HeaderCell>Requester</Table.HeaderCell>
          <Table.HeaderCell>Requested</Table.HeaderCell>
          <Table.HeaderCell>Type</Table.HeaderCell>
        </Table.HeaderRow>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Where are my shoes?</Table.Cell>
          <Table.Cell>John Smith</Table.Cell>
          <Table.Cell>15 minutes ago</Table.Cell>
          <Table.Cell>Ticket</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>I was charged twice!</Table.Cell>
          <Table.Cell>Jane Doe</Table.Cell>
          <Table.Cell>25 minutes ago</Table.Cell>
          <Table.Cell>Call</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </ThemeProvider>
);

​
Sortable columns

Use Table.SortableCell in the header row to make columns sortable. Set sort to "asc" or "desc" to indicate the current sort direction. 
import React, { useState } from 'react';
import { Table } from '@zendeskgarden/react-tables';

const Example = () => {
  const [sort, setSort] = useState<'asc' | 'desc' | undefined>(undefined);

  const handleSort = () => {
    if (sort === 'asc') setSort('desc');
    else if (sort === 'desc') setSort(undefined);
    else setSort('asc');
  };

  return (
    <ThemeProvider>
      <Table>
        <Table.Head>
          <Table.HeaderRow>
            <Table.SortableCell sort={sort} onClick={handleSort}>
              Subject
            </Table.SortableCell>
            <Table.HeaderCell>Requester</Table.HeaderCell>
          </Table.HeaderRow>
        </Table.Head>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Ticket subject</Table.Cell>
            <Table.Cell>John Smith</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </ThemeProvider>
  );
};

​
Row selection and striping

const Example = () => (
  <ThemeProvider>
    <Table>
      <Table.Head>
        <Table.HeaderRow>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Status</Table.HeaderCell>
        </Table.HeaderRow>
      </Table.Head>
      <Table.Body>
        <Table.Row isSelected>
          <Table.Cell>Selected row</Table.Cell>
          <Table.Cell>Active</Table.Cell>
        </Table.Row>
        <Table.Row isStriped>
          <Table.Cell>Striped row</Table.Cell>
          <Table.Cell>Pending</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Default row</Table.Cell>
          <Table.Cell>Closed</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </ThemeProvider>
);

​
Overflow actions

Add Table.OverflowButton inside a cell that has hasOverflow to display a row-level action menu trigger. 
const Example = () => (
  <ThemeProvider>
    <Table>
      <Table.Head>
        <Table.HeaderRow>
          <Table.HeaderCell>Subject</Table.HeaderCell>
          <Table.HeaderCell isMinimum hasOverflow />
        </Table.HeaderRow>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Where are my shoes?</Table.Cell>
          <Table.Cell hasOverflow>
            <Table.OverflowButton aria-label="Row actions" />
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  </ThemeProvider>
);

​
Table

The root <table> element. Provides size context to all child components.

​
Props

​
size
'small' | 'medium' | 'large'
default:"medium"
Sets the row density for the entire table.
​
isReadOnly
boolean
Removes interactive hover and focus styling from rows. Use for display-only tables.

​
Table.Head

Wraps the <thead> section of the table.

​
Props

​
isSticky
boolean
Makes the header row stick to the top of the viewport when scrolling a long table.

​
Table.HeaderRow

Renders a <tr> inside Table.Head. Accepts all standard HTMLAttributes<HTMLTableRowElement> props.

​
Table.HeaderCell

Renders a <th> cell in the header row.

​
Props

​
isMinimum
boolean
Applies minimum fixed-width styling. Use for checkbox or icon columns.
​
isTruncated
boolean
Truncates long text with an ellipsis.
​
hasOverflow
boolean
Applies styling for a cell that contains an overflow menu button.
​
width
string | number
Sets the column width.

​
Table.Body

Wraps the <tbody> section of the table. Accepts all standard HTMLAttributes<HTMLTableSectionElement> props.

​
Table.Row

Renders a <tr> inside Table.Body.

​
Props

​
isSelected
boolean
Applies selected row styling (highlighted background).
​
isStriped
boolean
Applies alternating striped row styling.

​
Table.Cell

Renders a <td> cell inside a body row.

​
Props

​
isMinimum
boolean
Applies minimum fixed-width styling. Use for checkbox or icon columns.
​
isTruncated
boolean
Truncates long text with an ellipsis.
​
hasOverflow
boolean
Applies styling for a cell that contains an overflow menu button.
​
width
string | number
Sets the cell width.

​
Table.SortableCell

Renders a header cell with a built-in sort button and sort direction icon. Manages aria-sort automatically.

​
Props

​
sort
'asc' | 'desc'
The current sort direction. When undefined, a neutral sort icon is shown.
​
width
string | number
Sets the column width.
​
cellProps
object
Props forwarded to the underlying <th> cell element (supports isMinimum, isTruncated, hasOverflow).

​
Table.OverflowButton

Renders a vertical three-dot icon button intended for row-level overflow menus. Inherits its size from the Table context. 
<Table.Cell hasOverflow>
  <Table.OverflowButton aria-label="Row actions" />
</Table.Cell>
Table.OverflowButton accepts all standard ButtonHTMLAttributes<HTMLButtonElement> props.

​
Table.Caption

Renders an accessible <caption> element for the table. Captions are visually associated with the table and announced by screen readers. 
<Table>
  <Table.Caption>Monthly sales report</Table.Caption>
  ...
</Table>

​
Table.GroupRow

Renders a group header row spanning all columns, useful for grouping related rows within Table.Body.

​
Exports

The following are exported from @zendeskgarden/react-tables:
ExportDescription
TableRoot table element with all subcomponents attached
Table.Head<thead> wrapper
Table.HeaderRow<tr> inside the header
Table.HeaderCell<th> header cell
Table.Body<tbody> wrapper
Table.Row<tr> body row
Table.Cell<td> body cell
Table.SortableCellSortable <th> with built-in sort button
Table.OverflowButtonRow-level overflow menu trigger
Table.CaptionAccessible table caption
Table.GroupRowGroup header row

Build docs developers (and LLMs) love

Get started for freeTalk to us