📖 Preview

📦 Install

$ npm editable-antd-tree

The package can be found here.

🔨 Usage

Below there is a demonstration of the input data.

const tree = [
  {
    key: "1",
    title: "Technology",
    isLeaf: false,
    children: [
      {
        key: "2",
        parent: "1",
        title: "Phones",
        isLeaf: false,
        children: [
          // ...
        ],
      },
      {
        key: "3",
        parent: "1",
        title: "Laptops",
        isLeaf: true,
      },
    ],
    // ...
  },
  // ...
];

A simple example of this package can be seen below.

import { EditableAntdTree } from "editable-antd-tree";

import "editable-antd-tree/dist/esm/output.css"; // load style

const initTree = []; // 👀 example above

const App = () => (
  <>
    <EditableAntdTree treeData={initTree} />
  </>
);

Typescipt

By downloading this package, there is a direct compatability with typescript.

🔀️ Properties

Tree

Create Root Leaf

Create Root Parent

Delete Node

Update Node

Create Leaf Node

Create Parent Node

+ All Tree properties of antd tree component.

Tree Data

+ All TreeNode properties of antd tree component.

✨ Acknowledgements

Special acknowledgements to the following packages:

• https://www.npmjs.com/package/antd
• https://www.npmjs.com/package/editable-tree-antd

🎙 Conclusion

After experimenting with various npm packages, none of them quite met my specific requirements. However, drawing inspiration from the packages mentioned earlier, I took it upon myself to develop a solution tailored to my needs, resulting in the creation of the editable-antd-tree package.