Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Draggable
      • Grouped rows
      • Overflow
      • Pagination
      • Scroll
      • Selection
      • Size
      • Sort
      • Striped rows
      • Table caption
      • Truncate
      • Virtual scrolling
    • Configuration
    • API
      • Table

    Table

    A Table organizes data into columns and rows. Tables make it easier for users to compare and analyze information.


    Table of Contents
    • How to use it
      • Default
      • Draggable
      • Grouped rows
      • Overflow
      • Pagination
      • Scroll
      • Selection
      • Size
      • Sort
      • Striped rows
      • Table caption
      • Truncate
      • Virtual scrolling
    • Configuration
    • API
      • Table

    Used for this
    • To organize and display read-only data with logical relationships
    Not for this
    • To structure content on a page, use the Grid component instead

    How to use it

    Default

    The typical usage of a Table component.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Draggable

    To enable row reordering, you can apply drag-and-drop functionality with dnd-kit.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Grouped rows

    Grouped rows are for additional categorization.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Overflow

    Overflow menus leverage the Dropdown and Menu component.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Pagination

    Table pagination works in combination with the Pagination component.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Scroll

    To ensure that your table is read correctly by assistive technologies, follow the W3C Grid accessibility pattern.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Selection

    Table rows are implemented in combination with a Checkbox component to become selectable. A checkbox in the header row is for selecting all rows on a page. This example includes keyboard logic for selecting or deselecting multiple sequential rows at a time by holding down the shift key.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Size

    Table row sizes comes in small, medium, and large. The default size is medium.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Sort

    Columns can be sorted by selecting table headers.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Striped rows

    You can alternate row background color to help make long rows easier to scan. Don’t use striped and group rows at the same time.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Table caption

    The Caption component specifies the title of a table.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Truncate

    Data within a cell will wrap by default. Truncate the content with an ellipsis by using isTruncated.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Virtual scrolling

    Efficiently render large datasets using react-window.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.5.3•View source•View on npm
    • Installnpm install @zendeskgarden/react-tables
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Table } from '@zendeskgarden/react-tables'

    API

    The Table component follows this structure:

    <Table>  <Caption />  <Table.Head>    <Table.HeaderRow>      <Table.HeaderCell />      <Table.HeaderCell />      <Table.SortableCell /> {/* Optional */}      {/* etc. */}    </HeaderRow>  </Table.Head>  <Table.Body>    <Table.GroupRow> {/* Optional */}      <Table.Cell />    </Table.GroupRow>    <Table.Row>      <Table.Cell />      <Table.Cell />      {/* etc. */}    </Table.Row>    {/* etc. */}  </Table.Body></Table>

    Implementation notes

    • Follow the MDN Table Accessibility Practices guidelines to ensure the table data is accessible to screen-readers
    • Use the Table.SortableCell component in a sortable table to ensure that the header is interactive and accessible. See SortableCell example.

    Table

    Extends TableHTMLAttributes<HTMLTableElement>

    Prop nameTypeDefaultDescription
    isReadOnly
    boolean

    Removes interactive styling from table rows

    size
    'small' | 'medium' | 'large'
    'medium'

    Sets the table size

    Table.Body

    Extends HTMLAttributes<HTMLTableSectionElement>

    Table.Caption

    Extends HTMLAttributes<HTMLTableCaptionElement>

    Table.Cell

    Extends TdHTMLAttributes<HTMLTableCellElement>

    Prop nameTypeDefaultDescription
    hasOverflow
    boolean

    Applies styling for a cell that contains an overflow menu

    isMinimum
    boolean

    Applies minimum fixed width styling (e.g. for cells that contain checkboxes or icons)

    isTruncated
    boolean

    Truncates long text with an ellipsis

    width
    string | number

    Adjusts the width of the cell

    Table.GroupRow

    Extends HTMLAttributes<HTMLTableRowElement>

    The GroupRow component provides styles to show a title row for a group of rows. Nest it within the Table.Body component. See GroupRow example.

    Table.Head

    Extends HTMLAttributes<HTMLTableSectionElement>

    Prop nameTypeDefaultDescription
    isSticky
    boolean

    Applies sticky header styling

    Table.HeaderCell

    Extends ThHTMLAttributes<HTMLTableCellElement>

    Prop nameTypeDefaultDescription
    hasOverflow
    boolean

    Applies styling for a cell that contains an overflow menu

    isMinimum
    boolean

    Applies minimum fixed width styling (e.g. for cells that contain checkboxes or icons)

    isTruncated
    boolean

    Truncates long text with an ellipsis

    width
    string | number

    Adjusts the width of the cell

    Table.HeaderRow

    Extends HTMLAttributes<HTMLTableRowElement>

    Table.OverflowButton

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    The OverflowButton component enables implementation of an overflow menu in a Table.Cell. Nest it within a Tooltip and provide an aria-label to ensure it is accessible. See OverflowButton example.

    Table.Row

    Extends HTMLAttributes<HTMLTableRowElement>

    Prop nameTypeDefaultDescription
    isSelected
    boolean

    Applies selected styling

    isStriped
    boolean

    Applies striped styling

    Table.SortableCell

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    A SortableCell displays an interactive header cell with accesssibility attributes applied to enable implementation of a sortable table. See SortableCell example.

    Prop nameTypeDefaultDescription
    cellProps
    any
    {}

    Passes props to the cell

    sort
    string

    Sets the sort order

    width
    string | number

    Sets the width of the cell

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025