Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/helfi92/material-ui-treeview
A React tree view for material-ui.
https://github.com/helfi92/material-ui-treeview
component material-ui material-ui-next mui react tree tree-structure treeview
Last synced: 8 days ago
JSON representation
A React tree view for material-ui.
- Host: GitHub
- URL: https://github.com/helfi92/material-ui-treeview
- Owner: helfi92
- License: mit
- Created: 2018-05-27T18:36:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-29T16:10:35.000Z (over 4 years ago)
- Last Synced: 2024-10-06T06:42:20.982Z (about 1 month ago)
- Topics: component, material-ui, material-ui-next, mui, react, tree, tree-structure, treeview
- Language: JavaScript
- Size: 1.45 MB
- Stars: 47
- Watchers: 3
- Forks: 21
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```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'));
```### 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](https://material-ui.com/api/expansion-panel-summary) element. |
| expansionPanelDetailsProps | object | no | Properties applied to the [ExpansionPanelDetails](https://material-ui.com/api/expansion-panel-details) element. |
| listItemProps | object | no | Properties applied to the [ListItem](https://material-ui.com/api/list-item) 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!