MUI-Draggable-TreeView - Treeview for Material-UI

MUI-Draggable-TreeView is a React Treeview component built on Material-UI TreeView Component with "drag & drop" and ordering functionalities.

Table of contents

• Install
• Demo
• Usage
• API
• License

Install

npm install mui-draggable-treeview --save

Prerequisites

You need to install @material-ui/core, @material-ui/lab and @material-ui/icons

Demo

Browse live demo

Usage

import { MuiDraggableTreeView, TreeNode } from "mui-draggable-treeview";

export default function TreeViewExample() {
  
  const data: TreeNode = {
    id: "1",
    name: "Cars",
    children: [
      {
        id: "2",
        name: "Sport Cars",
        children: [
          {
            id: "24",
            name: "Porsche"
          },
          {
            id: "25",
            name: "Ferrari"
          },
          {
            id: "26",
            name: "McLaren"
          }
        ]
      },
      {
        id: "3",
        name: "Classic Cars",
        children: [
          {
            id: "34",
            name: "1957 Corvette"
          },
          {
            id: "35",
            name: "Volkswagen Beetle"
          },
          {
            id: "36",
            name: "Bentley"
          }
        ]
      }
    ]
  };

  return <MuiDraggableTreeView tree={data} enableDragAndDrop={true} />;
}

API

Props

|Name|Type|Default|Description |:--:|:--|:---|:-----| |tree|TreeNode||Treeview Data (You will find more details at below) |enableDragAndDrop|boolean|false|Enable/Disable "drag & drop" and ordering functionalities

Event Handlers

|Name|Type|Parameters|ReturnType|Description |:--:|:---|:----|:--|:-----| |onNodeDragOver?|function|(sourceNode: TreeNode, destinationNode: TreeNode)|boolean|Gives control to allow drag over for a destination node. To allow drag over, return true |onNodeDrop?|function|(tree: TreeNode)|void|Event handler after drop on a Node that passes updated tree data |onNodeReOrderOver?|function|(sourceNode: TreeNode, destinationNode: TreeNode, isBeforeDestinationNode: boolean)|boolean|Gives control to allow reorder before or after destination node with isBeforeDestinationNode parameter. To allow reordering, return true |onNodeReOrder?|function|(tree: TreeNode)|void|Event handler after reordering before or after destination Node that passes updated tree data

TreeNode

|Name|Type|Default|Description |:--:|:--|:-----|:-----| |id|number||Unique number |name|string||Label of TreeNode item |order?|number|undefined|Order of TreeNode item |data?|any|undefined|TreeNode data when it is need |icon?|React.ElementType|undefined|Icon of TreeNode item |children?|TreeNode[]|undefined|Children of TreeNode

License

The files included in this repository are licensed under the MIT license.