minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
531 stars 71 forks source link

Allow custom required properties for id, parent, text etc #201

Open elmcapp opened 1 year ago

elmcapp commented 1 year ago

I would be nice if we could select our own property names for the required properties.

Reason. I get my data from a api and instead of needing to map the data to match what the tree view require it would be nice if I can just use the data

Here are the required fields:

[
  {
    "id": 1,
    "parent": 0,
    "droppable": true,
    "text": "Folder 1"
  },

I would like the options to make id called UUID, I would like the option to have text called label. Check out example below

<Tree
  parentName={"parent"}
  text={"lable"}
  id={"UUID"}
  tree={treeData}
  rootId={0}
  onDrop={handleDrop}
  render={(node, { depth, isOpen, onToggle }) => (
    <div style={{ marginLeft: depth * 10 }}>
      {node.droppable && (
        <span onClick={onToggle}>{isOpen ? "[-]" : "[+]"}</span>
      )}
      {node.text}
    </div>
  )}
/>;