Table (Editor's Draft)

The Table component is a control that displays data to user in tabular form. Can be separated into two main types: static and dynamic tables or data grids.

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. (per WAI-ARIA)

Data grid -- tabular information that has column titles, row titles, or both and enables users to navigate interactive elements it contains using directional navigation keys. The grid pattern is particularly useful if the tabular information is editable or interactive (per WAI-ARIA)

Anatomy

Diagram

Part Definitions

::part-table — Root element that contains header (optional) and table rows

::part-table-header — Container for table title

::part-table-title — Text description of the table

::part-table-header-row — Container for table header elements

::part-table-row — Container for table cell elements

::part-table-header-cell — Column header. May contain interactive elements and icons to represent sorting/filtering states

::part-table-cell — Table cell data. May contain interactive elements

::part-table-footer — Container for table pagination element

::part-table-pagination — Pagination control for multi-page data tables

::part-pagination-item — Pagination control representing the pages.

Component attributes

TBD

Accessibility

Keyboard

Data grid implements the WAI-ARIA's Keyboard Interaction For Data Grids.

Assistive technology

Static table implements the table role per the HTML AAM spec.

Data grid implements the grid role per the HTML AAM spec.

States / Properties

<table>

• scrollable (_enum: none | vertical | horizontal | both): Controls whether the table content is scrollable and in what dimensions. Defaults to none

• stripped (bool): Controls whether the table rows should be stripped. Defaults to false

• compact (bool): Controls whether the table is displayed in compact mode. Defaults to false

<table-row>

• highlight (bool): Controls whether the row should be highlighted (e.g. on hover). Defaults to false

• selected (bool): Controls whether the row is selected. Defaults to false

• expanded (bool): Controls whether the expandable row is opened. Defaults to false

• bordered (bool): Controls whether the row is bordered. Defaults to true

• disabled (bool): Controls whether can interact with a row and it's contents. Defaults to false

<table-header-row>

• fixed (bool): Controls whether the header row is fixed, meaning that it always stays visible during scrolling. (scrollable must be set to vertical or both for the table). Defaults to false

<table-header-cell>

• sorted (enum: auto | asc | desc)): Controls whether the data is sorted by column in the selected order. Defaults to auto

• fixed (bool): Controls whether the column is fixed, meaning that it always stays visible during horizontal scrolling. (scrollable must be set to horizontal or both for the table). Defaults to false

• resizable (bool): Controls whether the column's width can be changed by users. Defaults to false

• onResize (function): Callback function fired when the column is resized (resizable must be enabled).

<table-cell>

• truncated (bool): Controls whether the content of the cell is truncated

• bordered (bool): Controls whether the the cell is bordered. Defaults to true

• colspan (number): Specify if the cell should span across number of rows. Defaults to 1

Resources

WAI-ARIA table specification

WAI-ARIA grid specification

WHATWG Living Standard on <table>

Implementation research