editable-antd-tree
v0.2.2
Published
This is an editable tree react component based on antd.
Downloads
45
Maintainers
Readme
📖 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.