Table

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

How to use it

Default

The typical usage of a Table component.

Draggable

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

Grouped rows

Grouped rows are for additional categorization.

Overflow

Overflow menus leverage the Dropdown and Menu component.

Pagination

Table pagination works in combination with the Pagination component.

Scroll

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

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.

Size

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

Sort

Columns can be sorted by selecting table headers.

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.

Table caption

The Caption component specifies the title of a table.

Truncate

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

Virtual scrolling

Efficiently render large datasets using react-window.

Configuration

• Name9.0.0-next.26•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

Table.Body

Extends HTMLAttributes<HTMLTableSectionElement>

Table.Caption

Extends HTMLAttributes<HTMLTableCaptionElement>

Table.Cell

Extends TdHTMLAttributes<HTMLTableCellElement>

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>

Table.HeaderCell

Extends ThHTMLAttributes<HTMLTableCellElement>

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>

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.