npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

material-ui-tree-english

v1.0.11

Published

[![npm package](https://img.shields.io/npm/v/material-ui-tree.svg)](https://www.npmjs.org/package/material-ui-tree) [![npm download](https://img.shields.io/npm/dt/material-ui-tree.svg)](https://www.npmjs.org/package/material-ui-tree) [![github license](ht

Downloads

2

Readme

material-ui-tree

npm package npm download github license github issues open github issues closed github language top github stars

NPM

A react tree component with material-ui.
See demo page: Material-ui-tree Demo

Installation

Available as npm package.

npm install --save material-ui-tree

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@next
 material-ui-icons

Usage

See demo page code:

Edit material-ui-tree demo

Options

All options are not necessary.

className: (string) The className will passed to container Paper component of material-ui.

labelName: (string) Label key to show in tree leaf data. Default to 'label'. If renderLabel option is set, labelName will be ignored.

valueName: (string) Value key in tree leaf data. Used for react children key. Default to 'value'.

childrenName: (string) Children key to render child branch in tree leaf data. Default to 'children'.

data: (object) Initial tree data. Default to {}.

title: (string) Tree title. Default to ''. If not set, title module will not show.

expandFirst: (bool) Whether expand the first branch of the tree in the beginning. Default to false.

expandAll: (bool) Whether expand all branches of the tree in the beginning. Default to false.

childrenCountPerPage: (number) Children leafs' count in each branch page. When tree leaf children data is too big, render them by page. Default to 20.

actionsAlignRight: (bool) Whether the tree leaf action buttons aligns to right side. Action buttons will follow behind leaf label if it's false, or else will be aligned to right side. Default to false.

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

  • data : object, current leaf data
  • chdIndex : number array, leaf indexs from tree root
  • expand : bool, leaf expand status
  • doExpand : func, callback to expand current leaf's child branch
    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.

renderLabel: (func) The method to render tree leaf label, with arguments:

  • data : object, current leaf data
  • expand : bool, current leaf expand status
    If this is set, labelName option will be ignored.

requestChildrenData: (func) The method to request children data of tree leaf dynamically, with arguments:

  • data : object, current leaf data
  • chdIndex : number array, leaf indexs from tree root
  • doExpand : func, callback to expand current leaf's child branch
    This function will not be called until the current leaf has no children data.

Recently updated?

Changelog available here

LICENSE

The project is licensed under the terms of MIT license