Skip to content

km1220/mui-treeview

Repository files navigation

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

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!

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published