Table
A Table organizes data into columns and rows. Tables make it easier for users to compare and analyze information.
- To organize and display read-only data with logical relationships
- To structure content on a page, use the Grid component instead
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 react-beautiful-dnd.
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
- Name8.73.2•View source•View on npm
- Installnpm install @zendeskgarden/react-tables
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Body, Caption, Cell, GroupRow, Head, HeaderCell, HeaderRow, OverflowButton, Row, SortableCell, Table } from '@zendeskgarden/react-tables'
API
The Table component follows this structure:
<Table><Caption /><Head><HeaderRow><HeaderCell /><HeaderCell /><SortableCell /> {/* Optional */}{/* etc. */}</HeaderRow></Head><Body><GroupRow> {/* Optional */}<Cell /></GroupRow><Row><Cell /><Cell />{/* etc. */}</Row>{/* etc. */}</Body></Table>
Implementation notes
- Follow the MDN Table Accessibility Practices guidelines to ensure the table data is accessible to screen-readers
- Use the SortableCell component in a sortable table to ensure that the header is interactive and accessible. See SortableCell example.
Body
Extends HTMLAttributes<HTMLTableSectionElement>
Caption
Extends HTMLAttributes<HTMLTableCaptionElement>
Cell
Extends TdHTMLAttributes<HTMLTableCellElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
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 |
GroupRow
Extends HTMLAttributes<HTMLTableRowElement>
The GroupRow component provides styles to show a title row for a group of rows. Nest it within the Body component. See GroupRow example.
Head
Extends HTMLAttributes<HTMLTableSectionElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isSticky | boolean | – | Applies sticky header styling |
HeaderCell
Extends ThHTMLAttributes<HTMLTableCellElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
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 |
HeaderRow
Extends HTMLAttributes<HTMLTableRowElement>
OverflowButton
Extends ButtonHTMLAttributes<HTMLButtonElement>
The OverflowButton component enables implementation of an overflow menu in a Cell. Nest it
within a Tooltip and provide an aria-label to ensure it is accessible. See OverflowButton example.
Row
Extends HTMLAttributes<HTMLTableRowElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isSelected | boolean | – | Applies selected styling |
isStriped | boolean | – | Applies striped styling |
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 name | Type | Default | Description |
|---|---|---|---|
cellProps | any | – | Passes props to the cell |
sort | string | – | Sets the sort order |
width | string | number | – | Sets the width of the cell |
Table
Extends TableHTMLAttributes<HTMLTableElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isReadOnly | boolean | – | Removes interactive styling from table rows |
size | 'small' | 'medium' | 'large' | 'medium' | Sets the table size |