https://github.com/ealexandros/editable-antd-tree
🌳 This is an editable tree component built using Ant Design.
https://github.com/ealexandros/editable-antd-tree
antd editable editable-tree editable-tree-table nextjs react reactjs tree tree-component
Last synced: 9 months ago
JSON representation
🌳 This is an editable tree component built using Ant Design.
- Host: GitHub
- URL: https://github.com/ealexandros/editable-antd-tree
- Owner: ealexandros
- License: mit
- Created: 2022-12-19T13:40:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-10T08:43:15.000Z (almost 2 years ago)
- Last Synced: 2025-08-19T15:15:47.572Z (10 months ago)
- Topics: antd, editable, editable-tree, editable-tree-table, nextjs, react, reactjs, tree, tree-component
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/editable-antd-tree
- Size: 688 KB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This is an editable tree based on antd components.
### 📖 Preview
## 📦 Install
```bash
$ npm editable-antd-tree
```
_The package can be found [here](https://www.npmjs.com/package/editable-antd-tree)._
## 🔨 Usage
Below there is a demonstration of the input data.
```js
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.
```js
import { EditableAntdTree } from "editable-antd-tree";
import "editable-antd-tree/dist/esm/output.css"; // load style
const initTree = []; // 👀 example above
const App = () => (
<>
>
);
```
### 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](https://ant.design/components/tree#tree-props) 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](https://ant.design/components/tree#tree-props) 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.