Component to display large tree structures with non-limited nesting.
The main idea is simple. Component receives a ES6 generator function (nodeGetter
) that flattens user's tree structure
into an array, and then component uses inner
Grid to walk around this array and render
visible elements with nodeRenderer
callback.
Component controls tree node opening and closing. Every time user presses toggle button, nodeGetter
callback
runs again with different isNodeOpened
values that generator receives on every node. Then, if node is opened,
its children are rendered to the inner array and then displayed.
-
nodeClassName?: string
HTML class for single node. -
nodeGetter: IterabeIterator<Node>
A ES6-generator function that is used to flatten user-defined tree structure to inner array. It shouldyield
information about node, wait for theisOpened
value and render node's children if the value istrue
.
Node
object contains following properties:
interface Node {
childrenCount: number; // number of children this node contains
data: any; // any node's data that will be redirect to the `nodeRenderer` function to be rendered
deepLevel: number; // node nesting level
id: string; // unique id of node
isLeaf: boolean; // can node have children?
isOpened: boolean; // is current node opened by default?
}
nodeRenderer: (props: NodeProps) => ReactNode
Function that receives props and renders it into the React elemnent.NodeProps
has following signature:
interface NodeMouseEventHandlerParams {
event: React.SyntheticEvent<React.MouseEvent<any>>;
nodeData: any;
}
interface NodeProps {
className: string; // className defined for the Tree component
deepLevel: number; // current node nesting level
index: number; // number index of current node
isLeaf: boolean; // can node have children?
isOpened: boolean; // is current node opened?
isScrolling: boolean; // is current node scrolling?
key: string; // react key for node element
nodeData: any; // node data redirected from node info
style: React.CSSProperties; // styles for current node defined in Grid component
onNodeClick?(params: NodeMouseEventHandlerParams): void; // callback for single click. Defined for Tree component
onNodeDoubleClick?(params: NodeMouseEventHandlerParams): void; // callback for double click. Defined for Tree component
onNodeMouseOut?(params: NodeMouseEventHandlerParams): void; // callback for "mouse out" event. Defined for Tree component
onNodeMouseOver?(params: NodeMouseEventHandlerParams): void; // callback for "mouse over" event. Defined for Tree component
onNodeRightClick?(params: NodeMouseEventHandlerParams): void; // callback for right click. Defined for Tree component
onNodeToggle(): void; // callback that should be attached to button controls node opening and closing
}
-
onNodeClick?(params: NodeMouseEventHandlerParams): void
-
onNodeDoubleClick?(params: NodeMouseEventHandlerParams): void
-
onNodeMouseOver?(params: NodeMouseEventHandlerParams): void
-
onNodeMouseOut?(params: NodeMouseEventHandlerParams): void
-
onNodeRightClick?(params: NodeMouseEventHandlerParams): void
Callbacks for different events that should be attached to every node during the render phase. -
onRowsRendered?(info: RowsRenderInfo): void
Callback invoked with information about the slice of rows that were just rendered:({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void
You can find example in stories. If you want to get interactive example, use following instruction:
$ git clone https://github.com/Lodin/react-tree-virtualized.git
$ cd react-tree-virtualized
$ npm install
$ npm start
Then on the https://localhost:6006 you will get the Storybook instance with interactive example.