question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TreeView and TreeItem components

See original GitHub issue

Category

[x] Enhancement [ ] Bug [ ] Question

New component(s)

TreeView and TreeItem, should be used as follows:

<TreeView>
  <TreeItem key="1" label="Group header">
    <TreeItem key="2" label="Item 1" />
    <TreeItem key="3" label="Item 2" />
  </TreeItem>
</TreeView>

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:35 (19 by maintainers)

github_iconTop GitHub Comments

2reactions
siddharth-vaghasiacommented, Mar 31, 2020

@AJIXuMuK …thanks for the review and your valuable comments… we will go through in detail and get back to you if any queries…

2reactions
AJIXuMuKcommented, Mar 19, 2020

Hey @nanddeepn, I would expect something like

<TreeView
  items={treeItems}
  onSelect={(treeItem: ITreeItem, ...) => {...}}
  onExpand={(treeItem: ITreeItem, ...) => {...}}
  onRenderItem={(treeItem: ITreeItem, ...) => {...}}
  selectionMode={SelectionMode.None/Single/Multi} />

And each treeItem is of ITreeItem type:

interface ITreeItem {
iconProps?: IIconProps;
disabled?: boolean;
data?: any;
key: string;
label: string;
subLabel?: string; //maybe
actions?: IContextualMenuItem[]; // or similar interface
}

Something like that on top of my head.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tree View React component - Material UI - MUI
A tree view widget presents a hierarchical list. Tree views can be used to represent a file system navigator displaying folders and files,...
Read more >
Tree View - Fluent UI - Microsoft Learn
A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may...
Read more >
Navigation Treeview Example | APG | WAI - W3C
Applied to treeitem elements that are parent nodes, i.e., they have aria-owns referencing a ul with role group . Indicates the parent node...
Read more >
Help Users Find Things — Generate a Page Tree
It consists of a top level <TreeView> component and can have <TreeItem> child components, which themselves can have <TreeItem> children.
Read more >
React TreeView Component & Updating Selected Items - Telerik
Learn how to work with TreeView data and update the selectable TreeView nodes ... Component { state = { data: wrapTreeViewItems(tree) }; render()...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found