Use a tree grid when hierarchical rows need tabular columns and grid interaction; use data grid for flat interactive rows, tree selection for hierarchical choice, and table for read-only comparison.
Use a tree grid when hierarchical rows need tabular columns and grid interaction; use data grid for flat interactive rows, tree selection for hierarchical choice, and table for read-only comparison.
Practice the judgment: Imagine this situation: A tree selection widget grows columns and row actions but still exposes only treeitem behavior. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Tree grid | Data grid | Tree selection | Table |
|---|---|---|---|---|
| UI or UX | UI + UX - Hierarchical interactive row-and-column data workspace | UI + UX - Interactive row-and-column data workspace | UI + UX - Hierarchical expandable selection tree | UI + UX - Semantic row-and-column data comparison surface |
| UI guidance | Show parent, child, focused, selected, mixed, collapsed-with-descendant-state, dirty, invalid, readonly, and loading states with distinct text or programmatic state as well as visual treatment. | Render the grid as a named work surface with visible headers, row identifiers, focus location, selection state, dirty and invalid cell markers, column controls, and status text for row count, sort, filter, and save state. | Render a labelled tree with visible levels, branch expanders, parent versus leaf styling, active focus, selected or checked state, parent mixed state, and a summary for selected descendants hidden inside collapsed branches. | Render a table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability. |
| UX guidance | Use tree grid when users need to keep hierarchy and column comparison in one workspace, especially for nested operational records that can be expanded, selected, edited, or acted on in context. | Use a data grid when cell-level interaction makes users faster and more accurate than opening each record separately. | Use tree selection when users need to choose one or more items from a meaningful hierarchy and the parent-child structure helps them find, understand, or batch-select nodes. | Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item. |
| Good UI | A project work-breakdown tree grid shows parent rows for phases, child rows for tasks, columns for Owner, Due, Status, and Cost, and a collapsed parent badge that says 2 selected children. | An invoice-review grid shows frozen invoice IDs, column headers for Vendor, Amount, Due, Owner, and Status, one highlighted focused cell, two selected rows, a dirty edited amount, and a status line naming the current cell. | A permissions picker shows Workspace, Reports, Billing, and Security branches with disclosure controls, selected leaf nodes, a mixed Reports parent, and a selected-count summary on collapsed parents. | A payment review table has the caption June vendor payments, headers Vendor, Status, Due date, Amount, and Action, right-aligned amounts, and row actions labelled by vendor. |
| Bad UI | A simple folder picker with one label column is implemented as a tree grid even though users only choose folders. | A static report uses role grid even though users only read values and ordinary table semantics would be clearer. | Every leaf item exposes aria-expanded=false, causing assistive technology to announce files or products as collapsible folders. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. |
| Good UX | A user expands Design, edits a child task status, collapses Design, sees a dirty-child badge on the parent, re-expands, and focus returns to the edited child row. | A user presses Arrow Right to move from Amount to Due, presses Enter to edit the due date, presses Escape to cancel, and focus returns to the same cell in navigation mode. | A user focuses Reports, presses Right Arrow to open it, moves to Monthly revenue, presses Space to select it, and the Reports parent becomes mixed. | A user sorts by Amount descending, filters to Pending, moves to page 2, and the table keeps its caption, active sort, active filter, row count, and selected payment context. |
| Bad UX | A user collapses a parent and unknowingly hides a selected invalid child row before bulk approval. | The grid reports selection but the visual highlight is focus, or focus highlight is mistaken for selected data. | A user arrows through the permission tree to explore branches and accidentally changes selected permissions because selection follows focus in a multi-select tree. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. |
| Best fit | Rows have real parent-child hierarchy and shared comparable columns. | Users repeatedly inspect or update many records in shared columns. | Users choose one or more values from a meaningful hierarchy. | Records share comparable attributes that users need to scan in aligned columns. |
| Avoid when | Rows are flat or only visually grouped. | The data is read-only and ordinary table navigation is enough. | The options are flat or only loosely grouped. | The task depends on rich previews, imagery, or uneven metadata. |
| Required state | Default tree grid state with label, column headers, visible root rows, row hierarchy, row count context, and focused row or cell. | Default navigation state with labelled grid, column headers, row headers or row identifiers, focused cell, and row count context. | Initial tree state with visible label and root-level nodes. | Default table state with caption, visible headers, row values, and result count or context. |
| Accessibility burden | Use treegrid semantics only when rows can expand or collapse and the content also behaves as a grid. | Use grid semantics only for an interactive composite widget with managed focus. | Use role tree on the container and provide an accessible name. | Use native table semantics for tabular data rather than div-only rows. |
| Common misuse | Putting aria-expanded on leaf rows or every first-column cell. | Using role grid on a static table only to make it sound richer. | Using tree selection for a flat list where listbox, checkbox group, or multi-select would be simpler. | Using table markup to create page columns or layout spacing. |