Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← UI patterns

Data Table

Compare records across shared columns, with sorting when it helps answer a question.

Fieldwork Press

Print inventory

Scroll to compare all columns →

Available stock . Title and Quantity column buttons sort the rows.
FormatLocation
Coastal field guideBooklet240Shelf A
Forest notesBooklet120Shelf A
Headland mapFoldout85Shelf B
Tide pool postcardCard480Shelf C
Workshop invitationCard36Shelf C

5 records · Sorted by title, ascending

Behavior

Keyboard

Tab
Reach the filter, sort buttons, and scroll region.
Enter / Space
Sort by the focused column; activate again to reverse direction.
Left / Right
Scroll horizontally when the table’s scroll region has focus.
Parts

Caption

Names the data being compared.

Headers

Name each column and associate cells with it.

Rows

One record per row.

Sort control

A header button that changes row order.

States

Sorted

An arrow and aria-sort communicate ascending or descending order.

Filtered

Keep headers visible and show an empty message if nothing matches.

Narrow

Keep the table structure inside its own horizontal scroll region.

References

A native table with sortable column-header buttons.
Sortable tableW3C WAI-ARIA Authoring Practices

Use it

Figma
Build the data table
  1. Build aligned header and body rows from the same column widths.
  2. Create unsorted, ascending, and descending header variants.
  3. Show a narrow frame with horizontal scrolling and a filtered empty state.
Accessibility

Use native table semantics. Sorting alone does not require an interactive ARIA grid.

  1. Use scope="col" on column headers and scope="row" on row headers.
  2. Put a real button inside each sortable header; set aria-sort only on the active header.
  3. Name a keyboard-focusable scroll region so narrow-screen users can reach every column.
Research notes & sources

Native table, caption, th, and td; aria-sort on the currently sorted column header.

  1. Reference image attribution and licensesSource and capture record
  2. Data table: usageIBM Carbon Design System
  3. Sortable table exampleW3C WAI-ARIA Authoring Practices
  4. Tables with one headerW3C WAI