Hierarchical datagrid

Hierarchical datagrids have heavy usability, performance, and concerns.

Usability-issue

we found the hierarchical datagrid pattern confused hierarchy (instead of reinforcing it) and was prone to abuse. datagrids nested within datagrids within datagrids within datagrids... it quickly became easy to lose one’s focus and went against our early hopes of simplifying VMware UIs with patterns that were clearer and drew from the consumer space – like the detail pane. the way the hierarchical datagrids were designed and implemented it was common to see a nested datagrid take up the full height of its parent datagrid, obscuring the parent data grid’s rows partially if not entirely behind scrollable content area borders. this was exacerbated by teams that were nesting 3-4 datagrids deep. you’d go down a couple of levels and have to scroll to find where you were starting out from.

Performance issues

Datagrids inside of datagrids could also have a negative impact because you could be talking about a product team that just “hides” three levels of datagrids inside each row in a 100 row datagrid... leaving the browser to struggle with stealth-rendering hundreds of datagrids on a single section of a page.

so, from Clarity’s early explorations and discussions on the topic, we hoped we could move products away from this pattern to one that more clearly managed the user’s focus and better helped them to complete their tasks.

Accessibility issues

There’s no good pattern for a row added in the middle of a table that’s not really a row but a child of a parent table-row. it raises questions about managing keyboard navigation and also how to alert screen-readers that this vestigial row has just appeared. We haven’t even made our grids support the most basic functionality of arrow key navigation between cells. That needs to be in place first before you put something interactive and complex, like another grid inside a cell. ARIA provides a way to provide nested focus managements contexts, but the basic arrow key navigation between cells needs to be in place first.

Alternative options

• Expandable datagridare good at keeping the context of the content between rows and showing some additional data to support it.
• Detail pane by treating the detail pane as a “modal”. but that wouldn’t work for hierarchical datagrids because modals trap focus and people who request hierarchical datagrid aren’t wanting it to act like a modal
• Ideally navigating to a dedicated details page for a particular row.