| 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 | Render a labelled tree grid with a persistent hierarchy column, visible column headers, indentation by level, expandable parent rows, leaf rows without fake expand controls, and status text for visible rows, selected descendants, sort, filter, and loading children. | 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 flat data grid uses chevron icons in every first cell but no row actually owns children. | A static report uses role grid even though users only read values and ordinary table semantics would be clearer. | A nested checkbox list uses indentation but no tree role, no active row, no branch expanded state, and no keyboard model beyond tabbing through every checkbox. | A div layout looks like columns but has no caption, table semantics, or header associations. |
| 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. | A user edits an amount, sorts by status, and the row disappears with no saved or unsaved indication. | A user arrows through the permission tree to explore branches and accidentally changes selected permissions because selection follows focus in a multi-select tree. | Filtering the table removes selected rows without explaining why or offering a clear-filter path. |
| 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 content is layout, not data. |
| 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 | Using treegrid for a flat data grid with no expandable parent rows. | 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. |