Material-UI Tree View

A React tree view for material-ui with TypeScript support.

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'));

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. | | onParentClick | function | no | Callback function fired when a tree parent node is clicked. | | onEmptySearch | node | no | If searchTerm or softSearch is provided and the filtered tree is empty then onEmptySearch will render. This is used to render something other than an empty tree. | | searchTerm | string | no | A search term to refine the tree. | | softSearch | boolean | no | Given a searchTerm, a subtree will be shown if any parent node higher up in the tree matches the search term. Defaults to false. | | 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. | | caseSensitiveSearch | boolean | no | If true, search is case sensitive. Defaults to false. | | Link | node | no | A React Router Link node to use. Required when a leaf node has an href value. |

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.
  • styleguide with yarn start:styleguide. Open a browser to http://localhost:6060.

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!