tree-node-data
v2.0.1
Published
Assigns a set of structure meta data for each node in your tree structure useful for tree data display and data traversal
Downloads
492
Maintainers
Readme
tree-node-data
tree-node-data
assigns a set of structure meta data for each node in your tree data structure.
Meta data includes parent, prev, prevSibling, next, nextSibling, siblingIndex, ancestors, numDescendants, numChildren.
It is useful for building tree structure UI for data display and data traversal.
Install
npm install tree-node-data
Features
- Fast. We use it to handle 4000+ nodes tree in production with no obvious delay.
- Clean. All added data are contained in the
nodeData
field; Original tree node data is intact.
Example
In short, it provides a function that assigns an extra field named nodeData
to each node of your tree.
[{
name: 'Software',
key: 1,
children: [
{
name: 'Graphic software',
key: 2,
children: [
{
name: 'Photoshop',
key: 4,
},
{
name: 'Adobe CS3',
key: 5,
}
]
}
]
}]
[{
name: 'Software',
key: 1,
children: [{
name: 'Graphic software',
key: 2,
children: [{
name: 'Photoshop',
key: 4,
nodeData: {
parent: 2,
prev: 2,
prevSibling: null,
next: 5,
nextSibling: 5,
siblingIndex: 0,
ancestors: [1, 2],
numDescendants: 0,
numChildren: 0
}
},
{
name: 'Adobe CS3',
key: 5,
nodeData: {
parent: 2,
prev: 4,
prevSibling: 4,
next: null,
nextSibling: null,
siblingIndex: 1,
ancestors: [1, 2],
numDescendants: 0,
numChildren: 0
}
}],
nodeData: {
parent: 1,
prev: 1,
prevSibling: null,
next: 4,
nextSibling: null,
siblingIndex: 0,
ancestors: [1],
numDescendants: 2,
numChildren: 2
}
}],
nodeData: {
parent: null,
prev: null,
prevSibling: null,
next: 2,
nextSibling: null,
siblingIndex: null,
ancestors: [],
numDescendants: 2,
numChildren: 1
}
}];
Node Data
Field|Description
---|---
parent|key value of parent node
prevSibling| key value of previous sibling node. null
if the current node has no previous sibling node. i.e. it is the first/only child of its parent.
nextSibling| key value of next sibling node. null
if the current node has no next sibling node. i.e. it is the last/only child of its parent.
prev|key value of previous node. Previous node is defined as previous sibling if found or parent node.
next|key value of next node. Next node is defined as next sibling node if found. Otherwise, it will be the 'nextSibling' of the closest ancestor that has a 'nextSibling';
siblingIndex| The integer index of the current node amongst its siblings. Index starts from 0.
ancestors|Array of key values of all ancestor nodes. This is useful for working out branch collapsed/expanded status.
numDescendants| This is the number of leaf nodes. This is useful for showing all items under a branch node.
numChildren| number of direct child nodes.
API
import assignNodeData from 'tree-node-data';
const config = {
childrenField: 'children', // e.g. customise the field for children nodes. e.g. 'subItems', default 'children'
keyField: 'key', // e.g. customise the field for node key. e.g. 'id', default 'key'
};
const nodesWithData = assignNodeData(
nodes, // array of tree nodes.
config,
)
Tips
- All nodes should have a distinct 'key' value.
- If you want to process a tree instead of an array of nodes, wrap the root node in an array as the parameter to
assignNodeData
; - You may also want to use tree-node-util for looking up nodes from a tree using key values made available in 'nodeData'.
tree-node-util
andtree-node-data
together provides the powerful tools for building complex tree data structure UIs;