helfi92/material-ui-treeview

A React tree view for material-ui.

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!

material-ui-treeview's Issues

Mention the TypeScript typing as a feature

Inside of the README, there is no mention that there is a file for TypeScript typing. This is a nice feature that could attract people to this library, so I think it should be mentioned in the README.

Closing expanded panel on click of another

I'm trying to close expansion panel

onLeafClick() not getting a node's all properties

I build my tree with series of node and for each node I set the following fields:

                value: argTree.subtreeNodes[i].name,
                    id: argTree.subtreeNodes[i].id,
                    data: argTree.subtreeNodes[i].name,
                    type: argTree.subtreeNodes[i].name,
                    entity: argTree.subtreeNodes[i].entityId,

if I use the onLeafClick() , I only get the "value" and "id" (see above) , and not other field. I intentionally assigned "data' to "name" to make sure that name exists.

onNodeSelect(node) {

    var noed  = node;
    var i=0;
    i=i+1;
    alert("the node type is " + node.value); //if I change the node.value to node.type, I get undefined, even though they are assigned to the same variable.
}
render() {
    var tempTree =this.convertSubTreetoTableTree(this.props.locationSubtreeResp);

    return (
        < MuiTreeView tree = {tempTree}   onLeafClick={node => this.onNodeSelect(node)} />
)
}; 

Please let me know if I am missing anything here.

Thanks,
Farshid

Migrate to Neutrino v9

In order to migrate to Material UI v3, we will need to migrate neutrino to v9 to support babel v7. Here's the migration guide: https://master.neutrinojs.org/migration-guide/#neutrino-v8-to-v9.

Custom getter for attribututes

This is a feature request.

I already have a recursive data-structure from some other library like this:

{
  "name": "foo",
  "children": [{
    "name": "bar"
  }]
}

Currently I recursively convert it into

{
  "value": "foo",
  "nodes": [{
    "value": "bar"
  }]
}

but if the data-structure gets big, I want to do this lazily (only convert the part that user expand).

I imaging the API to be like this:

const tree = {
  name: 'foo',
  children: [{
    name: 'bar',
  }],
};
return (
  <MuiTreeView
    tree={tree}
    getValue={tree => tree.name}
    getNodes={tree => tree.children}
  />
);

Click on parent event

Hi, it's possible to handle a click on parent node?

Thanks

Seems Material-ui needs to be updated and change ExpansionPanel to Accordion

Thank you for the package, but I am getting a bunch of warnings:

Material-UI: the ExpansionPanel component was renamed to Accordion to use a more common naming convention.
Material-UI: the ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.
Material-UI: the ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention.

This is due to the recent updates of material-ui.

Material-UI upgrade?

Hi,

I'm looking for a tree component for react and Material UI, and since this seems to be the only somewhat updated component, I'm wondering about why it's stuck on MUI 1? 3 is out, and 4 around the corner. Normally the major upgrades aren't that hard to handle, at least that is my experience with MUI majors.

I have not tried to run in 3 or 4 yet, but will give it a go.

Will you accept PRs for upgrading to 3?

Integrated with react router

How do i integrate react router

add child node

ability to add child nodes

onParentClick

Beside onLeafClick it would be very useful to have an onParentClick, too.

Node ID

Beside the node value it would be useful to use a node ID, too, because the text value can be ambiguous, in case that the same text is the child value at different parents.

Not re-rendering

I used this component to get a tree view for all of my data. However, when the props are updated, it seems like the component is not re-rendering and hence the page is not updated. I can confirm that the props passed are being updated because I'm printing them.

Update to react-router-dom v5

Blocker: #21

includes is not a function

Hi, I have detected that es5 bundle comes with what appears to be a String.includes() function when filtering the tree by a search term. This es an ES6 feature that hasn't been transpiled to ES5.
Maybe this is due to a missing babel plugin?

Issues with development and contribution

Hi,
I wanted to test some things. I faced trouble to get the clone up and running:

I get an error trying to develop (yarn start):

StyleGuide.js:1 Uncaught Error: Cannot find module "rsg-components/StyleGuide/StyleGuideRenderer"
    at Object.<anonymous> (StyleGuide.js:1)
    at __webpack_require__ (bootstrap 43c144344700865d31c9:707)
    at fn (bootstrap 43c144344700865d31c9:112)
    at Object.<anonymous> (index.js:1)
    at __webpack_require__ (bootstrap 43c144344700865d31c9:707)
    at fn (bootstrap 43c144344700865d31c9:112)
    at Object.<anonymous> (renderStyleguide.js:1)
    at __webpack_require__ (bootstrap 43c144344700865d31c9:707)
    at fn (bootstrap 43c144344700865d31c9:112)
    at Object.<anonymous> (index.js:1)

The errors goes away when I uncomment line 29 and 30 in the .neutrinorc.js:

material-ui-treeview/.neutrinorc.js

Lines 29 to 30 in 0a38ef6

	Wrapper: join(__dirname, 'src/styleguide/ThemeWrapper.jsx'),
	StyleGuideRenderer: join(__dirname, 'src/styleguide/StyleGuideRenderer.jsx'),

The styling is missing then.
I have no experience with styleguidist or neutrino, maybe I missed to install something?

Thanks in advance!

Edit: I would be happy about some comments, how to use this project with neutrino and styleguide. Is there any chance to start a development server for the src/index.jsx ?

Usage of deprecated theme spacing attributes

Warning: Material-UI: theme.spacing.unit usage has been deprecated.
It will be removed in v5.
You can replace `theme.spacing.unit * y` with `theme.spacing(y)`

material-ui 4.3.2

Using className prop overrides defaults

When I pass in className prop to both expansionPanelSummaryProps and expansionPanelDetailsProps, it overrides default styles and breaks the layout of the tree even when I set a simple backgroundColor.

It might be a desired behavior, but probably should be mentioned somewhere.

Add ability to add an Icon on the left side

There's currently no way to add an icon alongside a tree leaf. It would be nice to be able to do so.

Subtrees won't expand when search is active

Thank you very much for the package. I ran into this problem:

Following the demo example: if I search "Parent B" when softSearch == True, it will display Parent B and its children Child C and Parent C. The problem is that the latter won't expand when clicked while the search is active (it does have children).

I haven't found a way to solve this through props.

Regards,

Claudio

Write a test for the onEmptySearch prop

Follow up on #50.

Add/Delete functionality

First off, thank you for creating this. It's simple and intuitive! I'm wanting to extend it with add/delete node functionality; do you have any recommendation?

On searching parent node is not unfolding

On searching a child of a tree parent is not unfolding. Can you please look into this why it is happening. Below is the code

import React,{Component} from 'react';
import './App.css';
import {tree} from './treedata'
import MuiTreeView from 'material-ui-treeview';

class App extends Component {
constructor(props) {
super(props);
this.state = { val : "" }
}
render() {

const handleClick = (event) => {
  this.setState({val : event.target.value})
}
console.log(this.state.val)
return (  
  <div>
    <input onChange={handleClick}></input>
    <MuiTreeView tree = {tree} searchTerm = {this.state.val} softSearch = {tree}/>
    </div>
);

}
}

export default App;

Change background color

Hi, how can i change background color of selected child element?

Thanks

Contributing to this repository is complicated

I've just made a pull request yesterday and when I did it I was worried about forgetting to change something somewhere, and to be honest I'm still not sure that I didn't forget anything.

I think that there should be a pull request template that would contain a checklist of all the things to make sure you've done when making a modification.

Here's a proposition for the checklist based on what I've had to do for my pull request:

• Make sure there are no linter errors (run yarn lint to see the errors and yarn lint --fix to fix them)
• Update the example for the component for Styleguidist (src/components/component-name/README.md)
• Update the example app (src/index.jsx)
• Update the types and documentation in README.md
• Update the types and documentation in src/index.d.ts

I found this pull request template example (MIT Licensed) that could be used. However, just having a checklist is probably enough.

MUI deprecation warning

material-ui-treeview/src/components/MuiTreeView/index.jsx

Line 52 in 4a59404

marginLeft: theme.spacing.unit,

Material-UI: theme.spacing.unit usage has been deprecated.
It will be removed in v5.
You can replace theme.spacing.unit * y with theme.spacing(y).

You can use the https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api migration helper to make the process smoother.

Typescript support?

Any way for you to add typings?

Move react-router-dom to dev-dependencies

We don't use it in production, just in local development.