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

Name	Type	Default	Required	A11y	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined				The contents of the table component
className	string | undefined				CSS class name to apply to each element within the component
columns	TableColumn[]				Table column configuration
css	CSSProperties | Partial<Record<"abyss-table-root" | "abyss-table-head" | "abyss-table-header" | "abyss-table-styled-header" | "abyss-table-header-container" | "abyss-table-header-cell-container" | ... 9 more ... | `abyss-table-footer-cell-col-${number}`, CSSProperties>> | undefined				Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined				Suffix used to create a unique ID used for automated testing See Component Testing for more information
footer	ReactNode | object[]				Table footer component
hiddenFrom	Breakpoint | undefined				When defined, the component is hidden once the screen width reaches the specified breakpoint.
highlightRowOnHover	boolean | undefined	false			If true, hovering over a row will highlight it
rows	TableRow[]				Table row configuration
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined				Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
title	string				The accessible name for the table, announced to screen readers navigating by landmark or table structure.
visibleFrom	Breakpoint | undefined				When defined, the component is hidden until the screen width reaches the specified breakpoint.

V1Table.Container Props

Name	Type	Required	A11y	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined			The contents of the Table component
className	string | undefined			CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-table-root", CSSProperties>> | undefined			Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined			Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined			When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined			Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
title	string			The accessible name for the table, announced to screen readers navigating by landmark or table structure.
visibleFrom	Breakpoint | undefined			When defined, the component is hidden until the screen width reaches the specified breakpoint.

V1Table.TableHeader Props

Name	Type	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined	The contents of the table header
className	string | undefined	CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-table-head", CSSProperties>> | undefined	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined	Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined	When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined	Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
visibleFrom	Breakpoint | undefined	When defined, the component is hidden until the screen width reaches the specified breakpoint.

V1Table.TableHeaderRow Props

Name	Type	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined	The contents of the header row
className	string | undefined	CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-table-header", CSSProperties>> | undefined	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined	Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined	When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined	Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
visibleFrom	Breakpoint | undefined	When defined, the component is hidden until the screen width reaches the specified breakpoint.

V1Table.Column Props

Name	Type	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined	The contents of the column header
className	string | undefined	CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-table-styled-header" | "abyss-table-header-container" | "abyss-table-header-cell-container" | `abyss-table-styled-header-col-${number}`, CSSProperties>> | undefined	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined	Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined	When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined	Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
visibleFrom	Breakpoint | undefined	When defined, the component is hidden until the screen width reaches the specified breakpoint.

V1Table.TableBody Props

Name	Type	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined	The contents of the table body
className	string | undefined	CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-table-body", CSSProperties>> | undefined	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined	Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined	When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined	Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
visibleFrom	Breakpoint | undefined	When defined, the component is hidden until the screen width reaches the specified breakpoint.

V1Table.Row Props

Name	Type	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined	The contents of the row
className	string | undefined	CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-table-row" | `abyss-table-row-${number}`, CSSProperties>> | undefined	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined	Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined	When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined	Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
visibleFrom	Breakpoint | undefined	When defined, the component is hidden until the screen width reaches the specified breakpoint.

V1Table.Cell Props

Name	Type	A11y	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined		The contents of the cell
className	string | undefined		CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-table-cell" | `abyss-table-cell-col-${number}-row-${number}`, CSSProperties>> | undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
isRowHeader	boolean | undefined		If true, renders the cell as a row header
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined		Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

V1Table Classes

Class Name	Description
.abyss-table-body	Body container
.abyss-table-cell	Cell element
.abyss-table-footer	Footer
.abyss-table-footer-cell	Footer cell
.abyss-table-footer-row	Footer row
.abyss-table-head	Header container
.abyss-table-header	Header row container
.abyss-table-header-cell-container	Header cell container
.abyss-table-header-container	Header Container
.abyss-table-root	Table root element
.abyss-table-row	Row element
.abyss-table-styled-header	Header Styled Container

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-header-cell-container	Header cell container
.abyss-table-header-container	Header Container
.abyss-table-styled-header	Header Styled 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

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 patternopens in a new window.

Keyboard Interactions

Key	Description
Not Applicable	Not Applicable