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.
Fruit | Sun exposure | Soil |
---|---|---|
Raspberries | Partial shade | Moist and slightly acidic |
Strawberries | Full sun | Medium moisture |
Grapes | Full sun | Rich and well draining |
Cherries | Partial sun | Rich and well draining |
Tomatoes | Partial shade | Well draining |
Draggable
To enable row reordering, you can apply drag-and-drop functionality with dnd-kit.
Draggable grip | Fruit | Sun exposure | Soil |
---|---|---|---|
Raspberries | Partial shade | Moist and slightly acidic | |
Strawberries | Full sun | Medium moisture | |
Grapes | Full sun | Rich and well draining | |
Cherries | Partial sun | Rich and well draining | |
Tomatoes | Partial shade | Well draining |
Grouped rows
Grouped rows are for additional categorization.
Type | Sun exposure | Soil |
---|---|---|
Fruits | ||
Raspberries | Partial shade | Moist and slightly acidic |
Strawberries | Full sun | Medium moisture |
Grapes | Full sun | Rich and well draining |
Cherries | Partial sun | Rich and well draining |
Tomatoes | Partial shade | Well draining |
Vegetables | ||
Zucchini | Partial shade | Moist and slightly acidic |
Carrot | Full sun | Medium moisture |
Squash | Full sun | Rich and well draining |
Garlic | Full sun | Medium moisture |
Celery | Full sun | Rich and well draining |
Overflow
Overflow menus leverage the Dropdown and Menu component.
Fruit | Sun exposure | Soil type | |
---|---|---|---|
Raspberries | Partial shade | Moist and slightly acidic | |
Strawberries | Full sun | Medium moisture | |
Grapes | Full sun | Rich and well draining | |
Cherries | Partial sun | Rich and well draining | |
Tomatoes | Partial shade | Well draining |
Pagination
Table pagination works in combination with the Pagination component.
Fruit | Sun exposure | Soil type |
---|---|---|
Fruit #0 | Full sun | Well draining |
Fruit #1 | Full sun | Well draining |
Fruit #2 | Full sun | Well draining |
Fruit #3 | Full sun | Well draining |
Fruit #4 | Full sun | Well draining |
Fruit #5 | Full sun | Well draining |
Fruit #6 | Full sun | Well draining |
Fruit #7 | Full sun | Well draining |
Fruit #8 | Full sun | Well draining |
Fruit #9 | Full sun | Well draining |
Scroll
To ensure that your table is read correctly by assistive technologies, follow the W3C Grid accessibility pattern.
Fruit | Sun exposure | Soil type |
---|---|---|
Fruit #0 | Full sun | Well draining |
Fruit #1 | Full sun | Well draining |
Fruit #2 | Full sun | Well draining |
Fruit #3 | Full sun | Well draining |
Fruit #4 | Full sun | Well draining |
Fruit #5 | Full sun | Well draining |
Fruit #6 | Full sun | Well draining |
Fruit #7 | Full sun | Well draining |
Fruit #8 | Full sun | Well draining |
Fruit #9 | Full sun | Well draining |
Fruit #10 | Full sun | Well draining |
Fruit #11 | Full sun | Well draining |
Fruit #12 | Full sun | Well draining |
Fruit #13 | Full sun | Well draining |
Fruit #14 | Full sun | Well draining |
Fruit #15 | Full sun | Well draining |
Fruit #16 | Full sun | Well draining |
Fruit #17 | Full sun | Well draining |
Fruit #18 | Full sun | Well draining |
Fruit #19 | Full sun | Well draining |
Fruit #20 | Full sun | Well draining |
Fruit #21 | Full sun | Well draining |
Fruit #22 | Full sun | Well draining |
Fruit #23 | Full sun | Well draining |
Fruit #24 | Full sun | Well draining |
Fruit #25 | Full sun | Well draining |
Fruit #26 | Full sun | Well draining |
Fruit #27 | Full sun | Well draining |
Fruit #28 | Full sun | Well draining |
Fruit #29 | Full sun | Well draining |
Fruit #30 | Full sun | Well draining |
Fruit #31 | Full sun | Well draining |
Fruit #32 | Full sun | Well draining |
Fruit #33 | Full sun | Well draining |
Fruit #34 | Full sun | Well draining |
Fruit #35 | Full sun | Well draining |
Fruit #36 | Full sun | Well draining |
Fruit #37 | Full sun | Well draining |
Fruit #38 | Full sun | Well draining |
Fruit #39 | Full sun | Well draining |
Fruit #40 | Full sun | Well draining |
Fruit #41 | Full sun | Well draining |
Fruit #42 | Full sun | Well draining |
Fruit #43 | Full sun | Well draining |
Fruit #44 | Full sun | Well draining |
Fruit #45 | Full sun | Well draining |
Fruit #46 | Full sun | Well draining |
Fruit #47 | Full sun | Well draining |
Fruit #48 | Full sun | Well draining |
Fruit #49 | Full sun | Well draining |
Fruit #50 | Full sun | Well draining |
Fruit #51 | Full sun | Well draining |
Fruit #52 | Full sun | Well draining |
Fruit #53 | Full sun | Well draining |
Fruit #54 | Full sun | Well draining |
Fruit #55 | Full sun | Well draining |
Fruit #56 | Full sun | Well draining |
Fruit #57 | Full sun | Well draining |
Fruit #58 | Full sun | Well draining |
Fruit #59 | Full sun | Well draining |
Fruit #60 | Full sun | Well draining |
Fruit #61 | Full sun | Well draining |
Fruit #62 | Full sun | Well draining |
Fruit #63 | Full sun | Well draining |
Fruit #64 | Full sun | Well draining |
Fruit #65 | Full sun | Well draining |
Fruit #66 | Full sun | Well draining |
Fruit #67 | Full sun | Well draining |
Fruit #68 | Full sun | Well draining |
Fruit #69 | Full sun | Well draining |
Fruit #70 | Full sun | Well draining |
Fruit #71 | Full sun | Well draining |
Fruit #72 | Full sun | Well draining |
Fruit #73 | Full sun | Well draining |
Fruit #74 | Full sun | Well draining |
Fruit #75 | Full sun | Well draining |
Fruit #76 | Full sun | Well draining |
Fruit #77 | Full sun | Well draining |
Fruit #78 | Full sun | Well draining |
Fruit #79 | Full sun | Well draining |
Fruit #80 | Full sun | Well draining |
Fruit #81 | Full sun | Well draining |
Fruit #82 | Full sun | Well draining |
Fruit #83 | Full sun | Well draining |
Fruit #84 | Full sun | Well draining |
Fruit #85 | Full sun | Well draining |
Fruit #86 | Full sun | Well draining |
Fruit #87 | Full sun | Well draining |
Fruit #88 | Full sun | Well draining |
Fruit #89 | Full sun | Well draining |
Fruit #90 | Full sun | Well draining |
Fruit #91 | Full sun | Well draining |
Fruit #92 | Full sun | Well draining |
Fruit #93 | Full sun | Well draining |
Fruit #94 | Full sun | Well draining |
Fruit #95 | Full sun | Well draining |
Fruit #96 | Full sun | Well draining |
Fruit #97 | Full sun | Well draining |
Fruit #98 | Full sun | Well draining |
Fruit #99 | Full sun | Well draining |
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.
Fruit | Sun exposure | Soil type | |
---|---|---|---|
Fruit #0 | Full sun | Well draining | |
Fruit #1 | Full sun | Well draining | |
Fruit #2 | Full sun | Well draining | |
Fruit #3 | Full sun | Well draining | |
Fruit #4 | Full sun | Well draining | |
Fruit #5 | Full sun | Well draining | |
Fruit #6 | Full sun | Well draining | |
Fruit #7 | Full sun | Well draining | |
Fruit #8 | Full sun | Well draining | |
Fruit #9 | Full sun | Well draining |
Size
Table row sizes comes in small, medium, and large. The default size is medium.
Fruit | Sun exposure | Soil type |
---|---|---|
Raspberries | Partial shade | Moist and slightly acidic |
Strawberries | Full sun | Medium moisture |
Grapes | Full sun | Rich and well draining |
Cherries | Partial sun | Rich and well draining |
Tomatoes | Partial shade | Well draining |
Fruit | Sun exposure | Soil type |
---|---|---|
Raspberries | Partial shade | Moist and slightly acidic |
Strawberries | Full sun | Medium moisture |
Grapes | Full sun | Rich and well draining |
Cherries | Partial sun | Rich and well draining |
Tomatoes | Partial shade | Well draining |
Fruit | Sun exposure | Soil type |
---|---|---|
Raspberries | Partial shade | Moist and slightly acidic |
Strawberries | Full sun | Medium moisture |
Grapes | Full sun | Rich and well draining |
Cherries | Partial sun | Rich and well draining |
Tomatoes | Partial shade | Well draining |
Sort
Columns can be sorted by selecting table headers.
Subject | ||
---|---|---|
Custom ticket view 1 | John Smith | Ticket |
Custom ticket view 2 | Jane Doe | Incident |
Custom ticket view 3 | John Smith | Incident |
Custom ticket view 4 | Jane Doe | Ticket |
Custom ticket view 5 | John Smith | Incident |
Custom ticket view 6 | Jane Doe | Incident |
Custom ticket view 7 | John Smith | Ticket |
Custom ticket view 8 | Jane Doe | Incident |
Custom ticket view 9 | John Smith | Incident |
Custom ticket view 10 | Jane Doe | Ticket |
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.
Fruit | Sun exposure | Soil type |
---|---|---|
Fruit #0 | Full sun | Well draining |
Fruit #1 | Full sun | Well draining |
Fruit #2 | Full sun | Well draining |
Fruit #3 | Full sun | Well draining |
Fruit #4 | Full sun | Well draining |
Fruit #5 | Full sun | Well draining |
Fruit #6 | Full sun | Well draining |
Fruit #7 | Full sun | Well draining |
Fruit #8 | Full sun | Well draining |
Fruit #9 | Full sun | Well draining |
Table caption
The Caption component specifies the title of a table.
Fruit | Sun exposure | Soil |
---|---|---|
Raspberries | Partial shade | Moist and slightly acidic |
Strawberries | Full sun | Medium moisture |
Grapes | Full sun | Rich and well draining |
Cherries | Partial sun | Rich and well draining |
Tomatoes | Partial shade | Well draining |
Truncate
Data within a cell will wrap by default. Truncate the content with an ellipsis by using isTruncated
.
Wrapping content | Truncated content |
---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Virtual scrolling
Efficiently render large datasets using react-window.
Fruit | Sun exposure | Soil type |
---|
Fruit #1 | Full sun | Well draining |
Fruit #2 | Full sun | Well draining |
Fruit #3 | Full sun | Well draining |
Fruit #4 | Full sun | Well draining |
Fruit #5 | Full sun | Well draining |
Fruit #6 | Full sun | Well draining |
Fruit #7 | Full sun | Well draining |
Fruit #8 | Full sun | Well draining |
Fruit #9 | Full sun | Well draining |
Fruit #10 | Full sun | Well draining |
Fruit #11 | Full sun | Well draining |
Fruit #12 | Full sun | Well draining |
Fruit #13 | Full sun | Well draining |
Fruit #14 | Full sun | Well draining |
Fruit #15 | Full sun | Well draining |
Configuration
- Name9.5.1•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 name | Type | Default | Description |
---|---|---|---|
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 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 |
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 name | Type | Default | Description |
---|---|---|---|
isSticky | boolean | Applies sticky header styling |
Table.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 |
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 name | Type | Default | Description |
---|---|---|---|
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 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 |