i

Table

Organising content · researched

Rows and columns of data laid out for comparing and scanning.

molecule

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Table native: yes antd 6.6.5
Variants
—
Sizes
large, medium, small
States documented
loading
Accessibility guidance
no

Default render is native table/caption (rc-table); the virtual mode is not checked. Rows can be selected, sorted, filtered, expanded, fixed.

docs ↗ · code ↗

Carbon

Data table native: yes @carbon/react 1.117.0
Variants
Default, With selection, With expansion
Sizes
extra large, large, medium, small, extra small
States documented
hover, loading
Accessibility guidance
yes

Source renders table elements. Docs also cover sorting, search, batch actions and pagination in the same component.

2 corrected on re-read
  • states_documented: [] → ["hover","loading"] Page documents row Hover and Loading (skeleton); no states table
  • urls: {"docs_url":"https://carbondesignsystem.com/components/data-table/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/DataTable"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/DataTable"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

Table native: yes govuk-frontend 6.5.1
Variants
—
Sizes
s, m, l, xl
States documented
default
Accessibility guidance
no

Native table with thead, tbody, optional caption and th scope; caption size classes and numeric-column and column-width classes are documented.

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. Data table is listed under unbuilt components in the roadmap; nothing in the repo (testing/table is test tooling).

Primer

DataTable native: yes @primer/react 38.40.1
Variants
—
Sizes
condensed, normal, spacious
States documented
default, loading, error
Accessibility guidance
yes

DataTable (built on Table) renders native table elements, with redundant role attributes added. Sizes are the cellPadding values. Loading is a skeleton state; error is a Table.ErrorDialog.

docs ↗ · code ↗

Spectrum

Table native: no @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L
States documented
default, hover, focus, active, disabled
Accessibility guidance
yes

Sizes read from the rsp option-details text (small, medium, large); density is compact, regular, spacious. Native check: S2 TableView always wraps React Aria Table in a Virtualizer, which renders divs not table elements; SWC 1st-gen sp-table is also role=grid custom elements. The Accessibility section's keyboard table is the Tooltip one reused.

docs ↗ · code ↗

USWDS

Table native: yes @uswds/uswds 3.14.0
Variants
.usa-table--borderless, .usa-table--compact, .usa-table-container--scrollable > .usa-table, .usa-table--stacked, .usa-table--stacked-header, .usa-table--sticky-header, .usa-table--striped
Sizes
—
States documented
default
Accessibility guidance
yes

Native table; documented examples include a sortable-rows version.

docs ↗ · code ↗

Platform facts

Native elementtableSpec table content model: optional caption, colgroup, optional thead, tbody or tr, optional tfoot. MDN: scope on th (row, col, ...), caption as accessible title, and the summary attribute is deprecated. APG: strongly encourages the native table; a table is not an interactive widget and its cells are not focusable; use grid for interactive tabular data. aria-sort on the header cell for sortable columns; aria-colcount/rowcount/colindex/rowindex when parts are not in the DOM.
Baselinewidely · 2015-07-29
APG patterntable
ARIA roletable
Shipped by6 of 7 systems

Anatomy

  1. table — HTML element; APG role table.
  2. caption optional — caption element: the title of the table (spec). APG: aria-labelledby or aria-label gives a label; aria-describedby for a description.
  3. row — tr; APG role row.
  4. columnheader optional — th scope=col; APG roles columnheader/rowheader/cell. HTML wording is header cell.
  5. rowheader optional — th scope=row; APG role rowheader.
  6. cell — td; APG role cell.
  7. rowgroup optional — thead, tbody, tfoot; APG role rowgroup.

The seven states

default Static data.
hover Inference, no source: row hover is a CSS design concern.
focus n/a — APG: cells are not focusable; interactive widgets inside are separate tab stops.
active n/a — Not defined.
disabled n/a — Not defined.
error n/a — Not defined.
loading n/a — Not defined; aria-busy was not found on the APG table page.

Every cell was read twice, the second time from raw sources by a separate pass. 2 of 35 fields changed on the second read — open any “corrected” note to see what it said before.