import { V1Table } from '@uhg-abyss/web/ui/Table';Usage
A table is used strictly for HTML markup on the page. It is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. Thus, its cells are not focusable or selectable. It organizes information in a way that's easy to scan so that users can look for patterns and develop insights from data.
The table consists of two main parts: a header and a body. Column header names describe the type of content displayed in each column. The column header text uses a medium weight font to differentiate from row text. Each row contains data related to a single entity.
If you want to turn a column or FooterCell into a row header, pass the isRowHeader: true prop to an individual column or cell.
Table overflow scroll
The contents of a table can be made scrollable if there is not enough space to show the entire table at once. To do so, use a wrapper element like in the example below, setting the CSS overflow property to 'auto' and adding a tabindex of 0.
Manual table
If more customization is needed, use the Table sub-components to create each section. This allows for adjustments to the individual sections.
Custom table
If further customization is needed, most styles of Table can be overridden using css.
V1Table Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the table component |
| columns | array[object] | - | Array of column data. { name: string, key: string } |
| highlightRowOnHover | boolean | false | Adds highlighting of rows on hover |
| rows | array[object] | - | Array of column data. { id: number, [column key]: string } |
| title | string | - | Title of the table |
V1Table.Container Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the table container component |
| title | string | - | Title of the table |
V1Table.TableHeader Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the table header component |
V1Table.TableHeaderRow Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the table header row component |
V1Table.Column Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the table header column component |
| isRowHeader | boolean | - | Whether a column is a row header and should be announced by assistive technology during row navigation. |
V1Table.TableBody Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the table body component |
V1Table.Row Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the table row component |
V1Table.Cell Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the table cell component |
| isRowHeader | boolean | - | Whether a cell is a row header and should be announced by assistive technology during row navigation. |
V1Table Classes
| Class Name | Description |
|---|---|
| .abyss-table-body | Body container |
| .abyss-table-cell | Cell element |
| .abyss-table-cell-col-{colNum}-row-{rowNum} | Cell element in the given column and row |
| .abyss-table-cell-expanded | Cell expanded |
| .abyss-table-cell-expanded-row-{rowNum} | Cell expanded for the given row |
| .abyss-table-footer | Footer |
| .abyss-table-footer-cell | Footer cell |
| .abyss-table-footer-cell-col-{colNum} | Footer cell element in the given column |
| .abyss-table-footer-row | Footer row |
| .abyss-table-head | Header container |
| .abyss-table-header-cell-container | Header cell container |
| .abyss-table-header-container | Header Container |
| .abyss-table-header-data | Header Cell Container |
| .abyss-table-root | Table root element |
| .abyss-table-row | Row element |
| .abyss-table-row-{rowNum} | Row element with the given number |
| .abyss-table-row-expanded | Row expanded |
| .abyss-table-row-expanded-row-{rowNum} | Row expanded for the given row |
| .abyss-table-styled-header | Header Styled Container |
| .abyss-table-styled-header-col-${colNum} | Header styled cell container in the given column |
V1Table.Container Classes
| Class Name | Description |
|---|---|
| .abyss-table-root | Table root element |
V1Table.TableHeader Classes
| Class Name | Description |
|---|---|
| .abyss-table-head | Header container |
V1Table.TableHeaderRow Classes
| Class Name | Description |
|---|---|
| .abyss-table-header | Header row container |
V1Table.Column Classes
| Class Name | Description |
|---|---|
| .abyss-table-styled-header | Header styled cell container |
V1Table.TableBody Classes
| Class Name | Description |
|---|---|
| .abyss-table-body | Body container |
V1Table.Row Classes
| Class Name | Description |
|---|---|
| .abyss-table-row | Row element |
V1Table.Cell Classes
| Class Name | Description |
|---|---|
| .abyss-table-cell | Cell element |
V1Table.FooterCell Classes
| Class Name | Description |
|---|---|
| .abyss-table-footer-cell | Footer cell element |
Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. Thus, its cells are not focusable or selectable. The grid pattern is used to make an interactive widget that has a tabular structure.
However, tables are often used to present a combination of information and interactive widgets. Since a table is not a widget, each widget contained in a table is a separate stop in the page tab sequence. If the number of widgets is large, replacing the table with a grid can dramatically reduce the length of the page tab sequence because a grid is a composite widget that can contain other widgets.
Adheres to the Table WAI-ARIA design pattern.
Keyboard Interactions
| Key | Description |
|---|---|
| Not Applicable | Not Applicable |