TreeView - Customizing node content
The <TreeView /> provides multiple ways to customize how node content (label, text, children) is rendered.
Here's a list of ways to customize node contents:
  • Specify node.label to be a function (signature: Fn(nodeProps): React.Node) instead of a string or a React.Node. In this way, you can render the node contents based on the checked/selected/collapsed/disabled state.
  • Specify renderNodeText(domProps, nodeProps) to customize the rendering of all tree nodes. You can return any valid React.Node from this function - or you can mutate the domProps and return undefined in order for the default rendering to be used (but since you modify domProps, the result can be customized).
Nodes can also have icons, which can be specified with in a variety of ways:
  • nodeIcon - specifies the icon for all nodes.
  • nodeCollapsedIcon - specifies the icon for all collapsed nodes. Overrides nodeIcon.
  • leafNodeIcon - specifies the icon for all leaf nodes. Overrides nodeIcon.
  • node.icon - specifies the icon for a specific node. Overrides all of the above specified icons. This can be a function - in which case, will be called with the nodeProps object.
  • renderIcon(nodeProps) - overrides all of the above. If specified, it is responsible for rendering an icon for the nodes in the <TreeView /> component.