3.2.0 • Published 5 years ago

blondie-material-ui-treeview v3.2.0

Weekly downloads
7
License
MIT
Repository
github
Last release
5 years ago

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

Props

PropertyTypeRequired?Description
treeobjectyesThe data to render as a tree view
onLeafClickfunctionnoCallback function fired when a tree leaf is clicked.
searchTermstringnoA search term to refine the tree.
softSearchbooleanno* Given a searchTerm, a subtree will be shown if any parent node higher up in the tree matches the search term. Defaults to false.
expansionPanelSummaryPropsobjectnoProperties applied to the ExpansionPanelSummary element.
expansionPanelDetailsPropsobjectnoProperties applied to the ExpansionPanelDetails element.
listItemPropsobjectnoProperties applied to the ListItem element.

Development and Contributing

  • Fork and clone this repo.
  • Install the dependencies with yarn.
  • Start the

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!