Skip to content
SkillCodex
Menu

Behavior comparison

Data grid vs Table

Decisive difference

Data grid is a widget that moves focus cell by cell with arrow keys; Table is static content read in document order.

Try Data gridTry Table
Choice criteria, links and sources
  • Data gridChoose Data grid if the user edits, selects, or navigates many cells with the keyboard.Open entry Data grid
  • TableChoose Table if the data is read and compared without interaction inside the cells.Open entry Table

See the nine dimensionsSee the sources

Data grid

Mission

Data grid

Tab into the grid, arrow to Status, enter edit mode, choose a value, return to navigation, and select the row.

Name
Status
Owner
Atlas
Ready
Amina
Beacon
Review
Léo

Tab enters once · Arrows move focus · Enter edits Status · Shift+Space selects the row

Live result

The managed entry point is Atlas; no row is selected.

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
Exactly one cell is active and no row is selected.
Edge case
A cell editor temporarily consumes Arrow keys, then Escape restores grid navigation to the same cell.

What this example shows

Data grid owns focus movement as a composite widget; Table leaves static cells in document reading order, while Tree view uses parent-child expansion instead of rows and columns.

Use the Pack — Data grid

Which fits your need?

Data grid

Large tabular data needs efficient keyboard navigation

Table

People compare values across rows and columns

Which component will you use here?
Read the full PackVerify the result
Difference and sources

Data grid owns focus movement as a composite widget; Table leaves static cells in document reading order, while Tree view uses parent-child expansion instead of rows and columns.

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.

    Decision

    Family question

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

    Three criteria to choose

    Use case

    Data grid

    Large tabular data needs efficient keyboard navigation

    Table

    People compare values across rows and columns

    Interactivity

    Data grid

    Roving focus, arrow navigation, sorting, selection, and editing are explicit; focus and selection remain distinguishable.

    Table

    Cells are read in native table structure; any link, button, or sort control is a separate tab stop.

    Focus

    Data grid

    Use one consistent roving-tabindex or aria-activedescendant strategy, keep the active cell visible, and never put every cell in the page tab sequence.

    Table

    Focus remains on the activated sort button when rows reorder; reading cells never gain managed widget focus.

    Nine dimensions

    Trigger

    Data grid

    Tab enters one managed focus point; directional keys then move among cells.

    Table

    Reading starts in the caption and headers; embedded controls keep their own normal activation.

    Modality

    Data grid

    Non-modal composite widget with an internal focus model.

    Table

    Non-modal document structure, not a composite widget.

    Placement

    Data grid

    A bounded tabular workspace with persistent headers and a visible active cell.

    Table

    Inline with its caption and column or row headers aligned to the represented data.

    Interactivity

    Data grid

    Roving focus, arrow navigation, sorting, selection, and editing are explicit; focus and selection remain distinguishable.

    Table

    Cells are read in native table structure; any link, button, or sort control is a separate tab stop.

    Focus

    Data grid

    Use one consistent roving-tabindex or aria-activedescendant strategy, keep the active cell visible, and never put every cell in the page tab sequence.

    Table

    Focus remains on the activated sort button when rows reorder; reading cells never gain managed widget focus.

    Dismissal

    Data grid

    The grid is not dismissed; Escape exits cell interaction and restores grid navigation.

    Table

    A table is document content and is not dismissible.

    Accessible role

    Data grid

    grid > row > (columnheader | rowheader | gridcell)

    Table

    table > (thead | tbody) > tr > (th | td)

    Use case

    Data grid

    Large tabular data needs efficient keyboard navigation

    Table

    People compare values across rows and columns

    Mobile behavior

    Data grid

    Provide a tested touch model or a simpler list/table alternative when dense two-dimensional operation is impractical.

    Table

    Preserve header relationships and offer a deliberate overflow or alternate layout instead of visually reordering cells.