material-ui-tree v2.2.4

material-ui-tree v2

A react tree component with material-ui.
See demo page: Material-ui-tree Demo (v2 version)

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.

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.

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
• If you use material-ui v3 now, see this to migrate to v4. Material UI v4 migration from 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.

npm install --save material-ui-tree@latest

Ensure to install these packages in your program because material-ui-tree depends on them.

npm install --save
 react
 react-dom
 prop-types
 classnames
 @material-ui/core
 @material-ui/icons
 @material-ui/styles

Usage

See demo page code: (v2)

Options

All options are not required.

Normal properties:

Callback properties:

• getActionsData: (func) The method to get data to render action buttons, with arguments:

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:

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:

Should return text or react elements. The following templete will be returned by default:

`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:

This function will not be called until the current node has no children data.

Recently updated?

Changelog available here

LICENSE

The project is licensed under the terms of MIT license