[New Component]: TreeView

[junwen-k]

TreeView

TreeView lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.

Visual References

Description

We can build a tree view with nested Accordion. We could have props like:

value
defaultValue
onValueChange

checked
defaultChecked
onCheckedChange

The value would either be "string" | "string[]" depending on the type "single" | "multiple". We could also potentially support 2 different types for checked and collapsible state, e.g having single for checked state and multiple for collapsible state.

Not sure if we ever need to support editing / sorting like MUI-X does, it should be achieved by composition if possible, though.

Anatomy

<TreeView.Root>
    <TreeView.Item>
        <TreeView.Item />
    </TreeView.Item>
    <TreeView.Checkbox>
        <TreeView.Checkbox />
    </TreeView.Checkbox>
</TreeView.Root>

Libraries / Hooks

• Radix UI Accordion
• react-accessible-treeview