https://github.com/shallinta/material-ui-tree
A react tree component with material-ui v4.
https://github.com/shallinta/material-ui-tree
dynamic-loading-tree material-ui material-ui-tree mui-tree react react-hooks react-tree treeview
Last synced: about 1 year ago
JSON representation
A react tree component with material-ui v4.
- Host: GitHub
- URL: https://github.com/shallinta/material-ui-tree
- Owner: shallinta
- License: mit
- Created: 2018-03-30T12:13:55.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:37:19.000Z (about 3 years ago)
- Last Synced: 2025-03-29T15:11:21.773Z (about 1 year ago)
- Topics: dynamic-loading-tree, material-ui, material-ui-tree, mui-tree, react, react-hooks, react-tree, treeview
- Language: JavaScript
- Homepage: https://94wyyw992r.codesandbox.io/
- Size: 1.29 MB
- Stars: 32
- Watchers: 2
- Forks: 17
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# material-ui-tree v2
[](https://www.npmjs.org/package/material-ui-tree)
[](https://www.npmjs.org/package/material-ui-tree)
[](https://github.com/shallinta/material-ui-tree/blob/master/LICENSE)
[](https://github.com/shallinta/material-ui-tree/issues?q=is%3Aopen+is%3Aissue)
[](https://github.com/shallinta/material-ui-tree/issues?q=is%3Aissue+is%3Aclosed)
[](https://github.com/shallinta/material-ui-tree)
[](https://www.npmjs.com/package/material-ui-tree)
> A react tree component with material-ui.
> See demo page: [Material-ui-tree Demo (v2 version)](https://94wyyw992r.codesandbox.io/)
### Using material-ui on 'bit.dev' ?
- If you use material-ui components on `bit.dev`, you can alse use this material-ui-tree component on the `bit`.
See also [@bit/shallinta.material-ui-tree](https://bit.dev/shallinta/material-ui-tree).
```sh
npm install @bit/shallinta.material-ui-tree.material-ui-tree --save
npm install @bit/shallinta.material-ui-tree.util --save
```
- What is `bit`? Go and see [bit.dev](https://bit.dev/).
### What's new with v2 version?
- Take full use of material-ui ^4.0.0 version. (Including `@material-ui/core^4.0.0`, `@material-ui/styles^4.0.0` and `@material-ui/icons^4.0.0`.)
- Take full use of react hooks, which needs react version ^16.8.0.
- Change some props name to make more sense.
- Add some props to adapt to more usage scenarios.
- Use rollup to pack and compress this component.
### Migration from material-ui-tree v1.*
- You should first learn about material-ui@4.* which is the strong dependence. [See material-ui](https://material-ui.com/)
- If you use material-ui v3 now, see this to migrate to v4. [Material UI v4 migration from v3](https://material-ui.com/guides/migration-v3/)
- To support the v2 version, you should upgrade your react and react-dom version to at least v16.8.0.
- Changed properties:
- `title`: change type "string" to "string | React Node".
- `labelKey`: instead of old labelName
- `valueKey`: instead of old valueName
- `childrenKey`: instead of old childrenName
- `unfoldFirst`: instead of old expandFirst
- `unfoldAll`: instead of old expandAll
- `pageSize`: instead of old childrenCountPerPage
- `loadMoreIcon`: new property
- `renderLoadMoreText`: new callback function
- Changed callback argument names:
- `path`: instead of old chdIndex
- `unfoldStatus`: instead of old expand
- `toggleFoldStatus`: instead of old doExpand
- Util provided:
- You can import `getNodeDataByPath, { withChildrenKey }` from "material-ui-tree/lib/util" which is used to get tree node data with whole tree data and node path and children key.
- Function signature:
1. getNodeDataByPath:: (object, array, string) -> object.
2. withChildrenKey:: string -> (object, array) -> object.
### Installation
Available as npm package.
```sh
npm install --save material-ui-tree@latest
```
Ensure to install these packages in your program because `material-ui-tree` depends on them.
```sh
npm install --save
react
react-dom
prop-types
classnames
@material-ui/core
@material-ui/icons
@material-ui/styles
```
### Usage
> See demo page code: (v2)
[](https://codesandbox.io/s/94wyyw992r?fontsize=14)
### Options
> All options are not required.
##### Normal properties:
|option name | type | default value | remark |
|---|---|---|---|
|className|string|''|The `className` will passed to container `Paper` component of material-ui.|
|labelKey|string|'label'|Label key to show in tree leaf data. If `renderLabel` option is set, `labelKey` will be ignored.|
|valueKey|string|'value'|Value key in tree leaf data. Used for react children key.|
|childrenKey|string|'children'|Children key to render child branch in tree leaf data.|
|data|object|{}|Initial tree data.|
|title|string or React Node|''|Tree title. If not set, title module will not show.|
|unfoldFirst|bool|false|Whether unfold the first branch of the tree in the beginning.|
|unfoldAll|bool|false|Whether unfold all branches of the tree in the beginning.|
|pageSize|number|20|Children nodes' count in each branch page. When tree node children data is too big, render them by page.|
|actionsAlignRight|bool|false|Whether the tree node action buttons aligns to right side. Action buttons will follow behind node label if it's false, or else will be aligned to right side.|
|foldIcon|React OptionalElement|`(@material-ui/icons/AddCircleOutline)`|Icon of tree node in fold status. You should pass an react element of icon such as `(@material-ui/icons/KeyboardArrowDown)` when you want to modify the icon.|
|unfoldIcon|React OptionalElement|`(@material-ui/icons/RemoveCircleOutline)`|Icon of tree node in unfold status. You should pass an react element of icon such as `(@material-ui/icons/KeyboardArrowUp)` when you want to modify the icon.|
|loadMoreIcon|React OptionalElement|`(@material-ui/icons/MoreVert)`.|Icon of "load-more" tree node. You should pass an react element of icon such as `(@material-ui/icons/MoreHoriz)` when you want to modify the icon.|
##### Callback properties:
- **getActionsData**: *(func)* The method to get data to render action buttons, with arguments:
|argument name|type|remark|
|---|---|---|
|data|object|current node data|
|path|array|node indices from tree root|
|unfoldStatus|bool|node unfold status|
|toggleFoldStatus|func|callback to unfold current node's child tree|
Should return an array of buttons data including keys: `icon`, `label`, `hint`, `onClick`, `style={}`. At least one of `label` key and `icon` key are required. If only return one button's data, it's also ok to just return the button data object instead of its array.
- **renderLabel**: *(func)* The method to render tree node label, with arguments:
|argument name|type|remark|
|---|---|---|
|data|object|current node data|
|unfoldStatus|bool|current node unfold status|
If this is set, `labelKey` option will be ignored.
- **renderLoadMoreText**: *(func)* The method to render the "load-more" tree node when there are more than one page of children, with arguments:
|argument name|type|remark|
|---|---|---|
|page|number|current loaded page index.|
|pageSize|number|children count of each page.|
|total|number|total count of children.|
Should return text or react elements. The following templete will be returned by default:
```js
`Loaded pages: ${(page + 1)} / Page size: ${pageSize} / Total: ${total}. Click here to load more...`
```
- **requestChildrenData**: *(func)* The method to request children data of tree node dynamically, with arguments:
|argument name|type|remark|
|---|---|---|
|data|object|current node data.|
|path|array|node indices from tree root.|
|toggleFoldStatus|func|callback to unfold current node's child tree.|
This function will not be called until the current node has no children data.
### Recently updated?
Changelog available [here](https://github.com/shallinta/material-ui-tree/blob/master/CHANGELOG.md)
### LICENSE
The project is licensed under the terms of [MIT license](https://github.com/shallinta/material-ui-tree/blob/master/LICENSE)