editable-antd-tree: A TypeScript repository from ealexandros

This is an editable tree based on antd components.

📖 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

Property	Description	Type	Required
`treeData`	Initial tree data. See section below for all fields of TreeData.	`EditableTreeNode[]`	Yes
`onTreeChange`	Executes uppon any tree data change.	`Function`	No
`switcherIcon`	Controls the switcher icon, used to expand or collapse parent nodes.	`React.ReactNode`	No
`size`	Controls the size of the tree.	`xs`, `sm`, `md`, `lg`, `xl`	No
`loadData`	Function triggered when a non-leaf TreeNode lacks children. Loads data asynchronously and replaces TreeNode's children.	`Function`	No
`createRootLeaf`	Contains properties explained in the sections below.	`Object`	No
`createRootParent`	Contains properties explained in the sections below.	`Object`	No
`deleteNode`	Contains properties explained in the sections below.	`Object`	No
`updateNode`	Contains properties explained in the sections below.	`Object`	No
`createLeaf`	Contains properties explained in the sections below.	`Object`	No
`createParent`	Contains properties explained in the sections below.	`Object`	No

Create Root Leaf

Property	Description	Type	Required
`caption`	This property shows what should be displayed when a user hovers over the action.	`string`	No
`disable`	This property indicates if the action should be disabled.	`boolean`	No
`event`	This property is a Function that runs after the action has been pressed.	`Function`	No

Create Root Parent

Property	Description	Type	Required
`caption`	This property shows what should be displayed when a user hovers over the action.	`string`	No
`disable`	This property indicates if the action should be disabled.	`boolean`	No
`event`	This property is a Function that runs after the action has been pressed.	`Function`	No

Delete Node

Property	Description	Type	Required
`caption`	This property shows what should be displayed when a user hovers over the action.	`string`	No
`disable`	This property indicates if the action should be disabled.	`boolean` \| `Function`	No
`event`	This property is a Function that runs after the action has been pressed.	`Function`	No

Update Node

Property	Description	Type	Required
`caption`	This property shows what should be displayed when a user hovers over the action.	`string`	No
`disable`	This property indicates if the action should be disabled.	`boolean` \| `Function`	No
`event`	This property is a Function that runs after the action has been pressed.	`Function`	No

Create Leaf Node

Property	Description	Type	Required
`caption`	This property shows what should be displayed when a user hovers over the action.	`string`	No
`disable`	This property indicates if the action should be disabled.	`boolean` \| `Function`	No
`event`	This property is a Function that runs after the action has been pressed.	`Function`	No

Create Parent Node

Property	Description	Type	Required
`caption`	This property shows what should be displayed when a user hovers over the action.	`string`	No
`disable`	This property indicates if the action should be disabled.	`boolean` \| `Function`	No
`event`	This property is a Function that runs after the action has been pressed.	`Function`	No

+ All Tree properties of antd tree component.

Tree Data

Property	Description	Type	Required
`key`	This field is used as a unique identifier.	`string`	Yes
`title`	This field is displayed in the tree.	`string`	No
`parent`	This field points to the parent key.	`string`	No
`children`	This field contains more nested tree nodes.	`EditableTreeNode[]`	No

+ All TreeNode properties of antd tree component.

✨ Acknowledgements

Special acknowledgements to the following packages:

🎙 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.

ealexandros/editable-antd-tree