@limeline/mui-draggable-treeview

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.