Mui-draggable-treeview NPM

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.

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