Behavior comparison
Data grid vs Tree view
Decisive difference
Data grid navigates rows and columns of cells with arrow keys; Tree view expands and collapses parent-child nodes in a hierarchy.
Choice criteria, links and sources
- Data gridChoose Data grid if the data is tabular and the user edits or navigates many cells efficiently.Open entry Data grid
- Tree viewChoose Tree view if the structure is a real hierarchy, like folders, that the user expands level by level.Open entry Tree view
See the nine dimensionsSee the sources
Structure and explore data
Try it
Should people read tabular data, interact cell by cell, or expand a hierarchy?
Data grid
Shared trial context
A workspace presents a large information set whose structure and interaction model determine how people scan, edit, or expand it.
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.
Tab enters once · Arrows move focus · Enter edits Status · Shift+Space selects the row
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.
Tree view
Mission
Tree view
Enter once, expand Projects with Right Arrow, move to Design, select it, then return to and collapse the parent.
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
- Projects is focused and collapsed; hidden children are absent from navigation.
- Edge case
- Leaf nodes never expose aria-expanded, and children of collapsed parents leave navigation and focus.
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.
Which fits your need?
Data grid
Large tabular data needs efficient keyboard navigation
Tree view
People navigate a true parent-child hierarchy
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 sourcesParts 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
Tree view
People navigate a true parent-child hierarchy
- Interactivity
Data grid
Roving focus, arrow navigation, sorting, selection, and editing are explicit; focus and selection remain distinguishable.
Tree view
Managed focus, expand/collapse, optional selection, and activation are separate and visibly distinguishable.
- 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.
Tree view
Use roving tabindex or aria-activedescendant consistently, and keep visible focus distinct from aria-selected or aria-checked.
Nine dimensions
- Trigger
Data grid
Tab enters one managed focus point; directional keys then move among cells.
Tree view
Tab enters the tree; arrows move focus and expand or collapse parent items.
- Modality
Data grid
Non-modal composite widget with an internal focus model.
Tree view
Non-modal composite widget for a hierarchical collection.
- Placement
Data grid
A bounded tabular workspace with persistent headers and a visible active cell.
Tree view
A vertically ordered hierarchy whose indentation and disclosure state expose parent-child relationships.
- Interactivity
Data grid
Roving focus, arrow navigation, sorting, selection, and editing are explicit; focus and selection remain distinguishable.
Tree view
Managed focus, expand/collapse, optional selection, and activation are separate and visibly distinguishable.
- 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.
Tree view
Use roving tabindex or aria-activedescendant consistently, and keep visible focus distinct from aria-selected or aria-checked.
- Dismissal
Data grid
The grid is not dismissed; Escape exits cell interaction and restores grid navigation.
Tree view
The tree is not dismissed; Left Arrow collapses an open parent, and Escape is not a required tree command.
- Accessible role
Data grid
grid > row > (columnheader | rowheader | gridcell)
Tree view
tree > treeitem + group
- Use case
Data grid
Large tabular data needs efficient keyboard navigation
Tree view
People navigate a true parent-child hierarchy
- Mobile behavior
Data grid
Provide a tested touch model or a simpler list/table alternative when dense two-dimensional operation is impractical.
Tree view
Use generous disclosure targets and consider progressive drill-down when deep indentation leaves too little room.
| Dimension | Data gridData grid | Tree viewTree view |
|---|---|---|
| Trigger | Tab enters one managed focus point; directional keys then move among cells. | Tab enters the tree; arrows move focus and expand or collapse parent items. |
| Modality | Non-modal composite widget with an internal focus model. | Non-modal composite widget for a hierarchical collection. |
| Placement | A bounded tabular workspace with persistent headers and a visible active cell. | A vertically ordered hierarchy whose indentation and disclosure state expose parent-child relationships. |
| Interactivity | Roving focus, arrow navigation, sorting, selection, and editing are explicit; focus and selection remain distinguishable. | Managed focus, expand/collapse, optional selection, and activation are separate and visibly distinguishable. |
| Focus | Use one consistent roving-tabindex or aria-activedescendant strategy, keep the active cell visible, and never put every cell in the page tab sequence. | Use roving tabindex or aria-activedescendant consistently, and keep visible focus distinct from aria-selected or aria-checked. |
| Dismissal | The grid is not dismissed; Escape exits cell interaction and restores grid navigation. | The tree is not dismissed; Left Arrow collapses an open parent, and Escape is not a required tree command. |
| Accessible role | grid > row > (columnheader | rowheader | gridcell) | tree > treeitem + group |
| Use case | Large tabular data needs efficient keyboard navigation | People navigate a true parent-child hierarchy |
| Mobile behavior | Provide a tested touch model or a simpler list/table alternative when dense two-dimensional operation is impractical. | Use generous disclosure targets and consider progressive drill-down when deep indentation leaves too little room. |