Material-UI Tree View

A React tree view for material-ui.

See the demo at https://hassanali.me/material-ui-treeview.

Getting started

# If using Yarn:
yarn add material-ui-treeview @material-ui/core

# If using npm:
npm install --save material-ui-treeview @material-ui/core

Usage

After importing the component, it can be rendered with the required tree prop:

Import

import MuiTreeView from 'material-ui-treeview';

// using require
const MuiTreeView = require('material-ui-treeview').default;

Example

import React from 'react';
import { render } from 'react-dom';
import MuiTreeView from 'material-ui-treeview';

const tree = [
  {
    value: 'Parent A',
    nodes: [{ value: 'Child A' }, { value: 'Child B' }],
  },
  {
    value: 'Parent B',
    nodes: [
      {
        value: 'Child C',
      },
      {
        value: 'Parent C',
        nodes: [
          { value: 'Child D' },
          { value: 'Child E' },
          { value: 'Child F' },
        ],
      },
    ],
  },
];

render((
  <MuiTreeView tree={tree} />
), document.getElementById('root'));

Important: If you are using Create React App, you will need to import the ES5 version of the component.

import MuiTreeView from 'material-ui-treeview/es5/MuiTreeView';

// using require
const MuiTreeView = require('material-ui-treeview/es5/MuiTreeView');

Props

Property	Type	Required?	Description
tree	object	yes	The data to render as a tree view
onLeafClick	function	no	Callback function fired when a tree leaf is clicked.
searchTerm	string	no	A search term to refine the tree.
expansionPanelSummaryProps	object	no	Properties applied to the ExpansionPanelSummary element.
expansionPanelDetailsProps	object	no	Properties applied to the ExpansionPanelDetails element.
listItemProps	object	no	Properties applied to the ListItem element.

Development and Contributing

Fork and clone this repo.
Install the dependencies with yarn.
Start the development server with yarn start. Open a browser to http://localhost:5000.

Feel free to open an issue, submit a pull request, or contribute however you would like. Understand that this documentation is still a work in progress, so file an issue or submit a PR to ask questions or make improvements. Thanks!