React-data-tree NPM

React Data Tree

Highly customizable node tree component with flatten data structure to interact intensly and easily

npm.io

Installation

Install the library using your favorite dependency manager:

  npm install react-data-tree --save

Or using yarn:

  yarn add react-data-tree

Usage/Examples

import React from "react";
import { NodeTreeView, NodeOperations } from "react-data-tree";
import { AiOutlineCheckSquare, AiOutlineMinusSquare } from "react-icons/ai";

function App() {
  const [metaData, setMetaData] = React.useState({});
  const data = [
    {
      id: "unique-id-1",
      name: "Carmelita Rose",
      children: [
        {
          id: "unique-id-1-1",
          name: "Ilmi Carlitos",
        },
        {
          id: "unique-id-1-2",
          name: "Mojgan Cateline",
          children: [
            {
              id: "unique-id-1-2-1",
              name: "Ida Erich",
              children: [
                {
                  id: "unique-id-1-2-1-1",
                  name: "Ilmi Carlitos",
                },
                {
                  id: "unique-id-1-2-1-2",
                  name: "Mojgan Cateline",
                  children: [
                    {
                      id: "unique-id-1-2-1-2-1",
                      name: "Ida Erich",
                    },
                    {
                      id: "unique-id-1-2-1-2-2",
                      name: "Olimpia Bertrand",
                    },
                  ],
                },
              ],
            },
            {
              id: "unique-id-1-2-2",
              name: "Olimpia Bertrand",
            },
          ],
        },
      ],
    },
    {
      id: "unique-id-2",
      name: "Terezija Paulus",
      children: [
        {
          id: "unique-id-2-1",
          name: "Shemu'el Sneha",
        },
      ],
    },
  ];

  
  const CustomNodeComponent = ({ nodeData, parentNodeIds, isLastNode }) => {
    return (
      <div
        style={{ display: "flex", alignItems: "center", paddingLeft: "10px" }}
      >
        <div
          style={{
            padding: "1px",
            border: "solid 1px blue",
          }}
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            setMetaData((oldData) => {
              const operations = new NodeOperations(
                oldData,
                nodeData?.id,
                parentNodeIds,
                data
              );
              return operations.defaultClickOperation();
            });
          }}
        >
          {metaData[nodeData?.id]?.isChecked ? (
            metaData[nodeData?.id]?.isSemiChecked ? (
              <AiOutlineMinusSquare />
            ) : (
              <AiOutlineCheckSquare />
            )
          ) : (
            <div className="p-2"></div>
          )}
        </div>

        <div
          style={{
            padding: "5px",
            marginLeft: "5px",
          }}
        >
          {nodeData.name}
        </div>
        <div
          onClick={() => {
            setMetaData((ldData) => {
              const oldData = JSON.parse(JSON.stringify(ldData));
              return {
                ...oldData,
                [nodeData?.id]: {
                  ...oldData[nodeData?.id],
                  isNodeExpanded: !(
                    oldData && oldData[nodeData?.id]?.isNodeExpanded
                  ),
                },
              };
            });
          }}
          style={{ cursor: "pointer", marginLeft: "10px" }}
        >
          {!isLastNode ? (
            metaData[nodeData?.id]?.isNodeExpanded ? (
              <div>{"^"}</div>
            ) : (
              <div>{">"}</div>
            )
          ) : null}
        </div>
      </div>
    );
  };

  return (
    <div>
      <NodeTreeView
        metaData={metaData}
        NodeComponent={CustomNodeComponent}
        data={data}
      />
    </div>
  );
}

export default App;

API Reference

Through metaData state we can control the whole node tree, on clicking operations with the methods from NodeOperations we can get status of all nodes

metaData

key	Type	Description
`isChecked`	`boolean`	current clicked node selection status
`isSemiChecked`	`boolean`	if all nested nodes are not selected of a parent node
`isNodeExpanded`	`boolean`	is node expanded / nested nodes are visible status
`childrenIds`	`[string]`	children ids of a parent
`children`	`undefined`	children is a reserved key which will be always undefined

data

type mainDataNode = {
  id: string;
  children?: dataType;
  [key: string]: any;
};

type data = Array<mainDataNode>

NodeComponent

make your custom node component, you will get some necessary details in props

Parameter	Type	Description
`nodeData`	`mainDataNode`	all node details which you gave in json such as id,name except `children`
`parentNodeIds`	`[parent node id]`	this array will contain all parents id of a node in outside to inside manner
`isLastNode`	`boolean`	is current node is the deepest node

Class `NodeOperations`

new NodeOperations(metaData, id, parentNodeIds, treeData)

Parameter	Type	Description
`metaData`	`React state`	{ uniqueNodeKey: { state details for the perticular node }}
`id`	`Unique node id`	id should be always unique
`parentNodeIds`	`[parent node id]`	this array will contain all parents id of a node in outside to inside manner
`treeData`	`JSON`	recursive json data which

Methods

getFlattenedData() will convert json tree data into metaData structure we can pass custom node modifier function as a parameter getFlattenedData(treeNodeModifier) which takes nodeDetails (mainDataNode) as input
getIndivisualCheckBoxClickedData({}) by default it will make isChecked=true of clicked node, also we can provide metaData and custom node modifier with it getIndivisualCheckBoxClickedData({ modifiedData, clickedObjectModifier })
getChildrenClickedData({}) by default it will make isChecked=true for all children of current node also we can provide metaData and custom children modifier with it getChildrenClickedData({ modifiedData, childObjectsModifier })
getAllParentCheckedData({}) by default it will make isChecked=true for all parent of current node also it calculates and makes isSemiChecked=true conditionally, we can provide metaData and custom parent modifier with it getAllParentCheckedData({ modifiedData, parentObjectsModifier })
defaultClickOperation() executes a click operation from provided data in the class and using above mentiond methods in default environment