Content
1
Short
Headers should be short and clearly describe the item or data presented.
Use sentence case.
Anatomy
Row Selector
Column Header
Expand / Collapse
Cell
States
Row Hover
Row Expanded
Best Practices
1
Usage
The Tree Selector should be used to pick from a list that contains a hierarchy. Don't use the Tree Selector component for lists that have no hierarchy. Use a normal list with the Row Selector elements instead.
2
Expand control
Do not display expand control at the bottom level. If there is no child to further expand, then no control should be present.
Do
Don't
3
Non-selectable Rows
Some rows may not be selectable, but all data of the hierarchy should be shown. It is still valuable to show child data rows even if they are not selectable. It allows the user to parent child relationships and inform decisions.
More
Related Pages
Additional Reading
Tree View. A tree view widget presents a hierarchical list. https://material-ui.com/components/tree-view/
Lists. Lists are continuous, vertical indexes of text or images. https://material.io/components/lists