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
`

$3

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

#### Import

`js
import MuiTreeView from 'material-ui-treeview';

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

#### Example

`jsx
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((

), document.getElementById('root'));
`

$3


| 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!