react-data-tree

React Data Tree

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

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