Skip to content
SkillCodex
Menu

Table

Table

A non-widget tabular structure that relates static data through rows, columns, and their headers.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r1
Sources
5 sources
Status
Published
Read the sources

You may have searched for: compare values in rows and columnsshow a static price comparisonline up records under column headers

All phrasings
Save and share

Recognize

Structure and explore data

Try it

Should people read tabular data, interact cell by cell, or expand a hierarchy?

Table

Shared trial context

A workspace presents a large information set whose structure and interaction model determine how people scan, edit, or expand it.

Table

Mission

Table

Sort Name ascending and then descending while confirming focus and header context remain intact.

Release candidate metrics
StatusOwner
BeaconReviewLéo
AtlasReadyAmina
CometDraftMarta

Live result

The table follows source order; its cells remain in document reading order.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
Source order is shown with a caption and correctly scoped headers.
Edge case
Long values use horizontal overflow without converting rows into inaccessible cards or breaking header associations.

What this example shows

Table is read as document content and its cells are not focus-managed; Data grid is a composite widget with arrow-key cell navigation, while Tree view organizes hierarchical nodes.

Which fits your need?

Table

People compare values across rows and columns

Data grid

Large tabular data needs efficient keyboard navigation

Which component will you use here?
Difference and sources

Table is read as document content and its cells are not focus-managed; Data grid is a composite widget with arrow-key cell navigation, while Tree view organizes hierarchical nodes.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Table

    The tabular container that preserves row and column relationships.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Structure and explore data

      Table belongs to this comparison group.

    • Do not confuse

      Data grid

      Choose Table if the data is read and compared without interaction inside the cells. Choose Data grid if the user edits, selects, or navigates many cells with the keyboard.

      Compare this pair
    • Do not confuse

      Tree view

      Choose Table if the user compares values across rows and columns without a parent-child structure. Choose Tree view if items belong to parents and the user drills down through levels.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    What people describe

    Documented aliases: data table, tabular data, comparison table

    • compare values in rows and columns
    • show a static price comparison
    • line up records under column headers
    • a readable matrix with no cell navigation
    • summarize monthly figures by category
    • sort one column without making every cell a widget

    Choose

    Use it when

    • People compare values across rows and columns
    • Data is primarily read rather than operated cell by cell

    Avoid it when

    • Users need spreadsheet-like focus, editing, or selection
    • The structure is only visual layout

    Compare

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Read a value in the middle of the table and identify its column and row context.

      Expected result

      The table’s caption and headers make the value understandable, including through assistive technology.

    2. 2. Do this

      If sorting is offered, activate the same column’s sort button twice.

      Expected result

      Rows change to the announced ascending and descending order, and focus stays on the sort button.

    3. 3. Do this

      Use Tab through the table and inspect it in a narrow window.

      Expected result

      Only real links or controls receive focus; static cells do not. Overflow remains usable without losing header relationships.

    Full contract
    1. 1Use a native table whenever possible
    2. 2Provide a caption or equivalent name
    3. 3Scope header relationships correctly
    4. 4Keep static cells out of Tab
    5. 5Put sorting in a real button and update aria-sort

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Table without breaking its behavior

    # Implement Table in your agent
    
    ## Objective
    Implement Table for this verified behavior: A non-widget tabular structure that relates static data through rows, columns, and their headers.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Table matches the need before writing code.
    
    ## Required behavior
    - Native row and column headers give every data cell its reading context without managed widget focus.
    - Pointer, Enter, or Space activation runs one named action exactly once.
    
    ## States to cover
    - Unsorted
    - Sorted ascending
    - Sorted descending
    
    ## Accessibility
    - ARIA role: table > (thead | tbody) > tr > (th | td)
    - The primary control or named region for Table has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - Focus remains on the activated sort button when rows reorder; reading cells never gain managed widget focus.
    - A table is document content and is not dismissible.
    - The caption names the table, scoped headers provide every cell’s context, and aria-sort exposes the active sort direction.
    - Cells do not enter the Tab sequence
    - Tab reaches only controls or links inside the table
    - Enter or Space activates a focused sort button
    
    ## When not to use
    - Users need spreadsheet-like focus, editing, or selection
    - The structure is only visual layout
    
    ## Acceptance criteria
    - Use a native table whenever possible
    - Provide a caption or equivalent name
    - Scope header relationships correctly
    - Keep static cells out of Tab
    - Put sorting in a real button and update aria-sort
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Table on a real journey

    # Verify Table after implementation
    
    ## Objective
    Audit the Table implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:9ccc77211d4d03f97d1bf4fb8b195b93adb9eb35d4bf8c2cbb75b3b84c524403

    Diagnose a problem

    Find and fix the Table defect

    # Debug Table in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Table.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - Use a native table whenever possible
    - Provide a caption or equivalent name
    - Scope header relationships correctly
    - Keep static cells out of Tab
    - Put sorting in a real button and update aria-sort
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Table fix

    # Prevent the Table regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Table with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:bbe7a3f50993e6e7c4618d0f4060361b9af99a933174f8f074ae5245fdbed057

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:222abd02345c5c35d8d806c13d2c306d0baac3aa240b413283725abc2c947ab7

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    table with caption, th[scope], and td

    NativePrefer native table, caption, and scoped headers. Sorting controls remain ordinary buttons; do not add grid focus semantics.

    Technical details

    Behaviors

    • Read header relationships

      Native row and column headers give every data cell its reading context without managed widget focus.

    • Run an action

      Pointer, Enter, or Space activation runs one named action exactly once.

    States

    • Unsorted

      Unsorted

    • Sorted ascending

      Sorted ascending

    • Sorted descending

      Sorted descending

    State transitions

    • Unsorted → Sorted ascending

      Activate the Name header button to sort A–Z and set aria-sort=ascending.

    • Sorted ascending → Sorted descending

      Activate the Name header button again to sort Z–A and set aria-sort=descending.

    • Sorted descending → Unsorted

      Reset restores source order and removes the active sort direction.

    Test scenarios

    Context
    A release metrics table compares three projects by name, status, and owner.
    Mission
    Sort Name ascending and then descending while confirming focus and header context remain intact.
    Primary state
    Source order is shown with a caption and correctly scoped headers.
    Edge case
    Long values use horizontal overflow without converting rows into inaccessible cards or breaking header associations.

    Visual signals

    • A caption names the dataset
    • Header cells define rows or columns
    • Data cells align at row-column intersections

    Behavioral signals

    • Assistive technology follows header relationships
    • Static cells do not receive managed focus
    • Optional sort buttons reorder rows and update aria-sort

    Accessibility

    Role
    table > (thead | tbody) > tr > (th | td)
    Accessible name
    The primary control or named region for Table has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    Focus
    Focus remains on the activated sort button when rows reorder; reading cells never gain managed widget focus.
    Dismissal
    A table is document content and is not dismissible.
    Scroll
    Horizontal and vertical overflow preserve header relationships, the active reading position, and visible keyboard focus without reordering data.
    Announcement
    The caption names the table, scoped headers provide every cell’s context, and aria-sort exposes the active sort direction.
    Keyboard
    • Cells do not enter the Tab sequence
    • Tab reaches only controls or links inside the table
    • Enter or Space activates a focused sort button

    Bindings

    Open the HTML, ARIA, Radix, and shadcn matrix
    • table with caption, th[scope], and td

      implementationKind
      native
      nativeElement
      table with caption, th[scope], and td
      ariaPattern
      native table
      radixPrimitive
      Not applicable
      shadcnRecipe
      Not applicable
      runtimeDependency
      Not applicable
      packageName
      Not applicable
      exportName
      Not applicable
      exactVersion
      Not applicable
      status
      verified
      sourceId
      source-ui-html-table
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: Prefer native table, caption, and scoped headers. Sorting controls remain ordinary buttons; do not add grid focus semantics.

      Verify binding source

    Sources

    • WHATWG HTML: The table element
      sourceId
      source-ui-html-table
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/tables.html#the-table-element
      publisher
      WHATWG
      sourceRevision
      http-etag:"6a5dd5e8-3e386"
      consultedAt
      2026-08-10
      license
      Not stated
      contentDigest
      sha256:1e4082e281583eaed81a98a10ef718dbaa5815f5bc266341ac169065289104f2
      status
      verified

      Claim covered: Table: normative native semantics, states, attributes, and browser behavior for table, caption, thead, tbody, tr, th, and td.

    • WAI-ARIA APG: Table Pattern
      sourceId
      source-ui-aria-table
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/table/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-08-07T07:06:02Z
      consultedAt
      2026-08-10
      license
      Not stated
      contentDigest
      sha256:0e9efee89d5ad72b1d45a8c1c9a62235a7af80ab25aa1a8e159aa9626b1d713b
      status
      verified

      Claim covered: Table: informative APG guidance for the table pattern: roles, states, relationships, and keyboard interaction.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Claim covered: Table: normative ARIA role definitions and constraints for the stated accessible role.

    • WHATWG HTML: The button element
      sourceId
      source-ui-html-button
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
      status
      verified

      Claim covered: Table: normative native semantics, states, attributes, and browser behavior for button.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Claim covered: Table: informative WCAG guidance for evaluating visible keyboard focus appearance.