{"id":21938332,"url":"https://github.com/shallinta/material-ui-tree","last_synced_at":"2025-04-22T12:30:16.129Z","repository":{"id":31273472,"uuid":"127424484","full_name":"shallinta/material-ui-tree","owner":"shallinta","description":"A react tree component with material-ui v4.","archived":false,"fork":false,"pushed_at":"2023-03-04T02:37:19.000Z","size":1357,"stargazers_count":32,"open_issues_count":7,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T15:11:21.773Z","etag":null,"topics":["dynamic-loading-tree","material-ui","material-ui-tree","mui-tree","react","react-hooks","react-tree","treeview"],"latest_commit_sha":null,"homepage":"https://94wyyw992r.codesandbox.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shallinta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-30T12:13:55.000Z","updated_at":"2024-04-16T13:14:21.000Z","dependencies_parsed_at":"2024-06-18T22:56:26.799Z","dependency_job_id":"38c2d766-411f-4f82-aa50-071770d7da8b","html_url":"https://github.com/shallinta/material-ui-tree","commit_stats":{"total_commits":103,"total_committers":3,"mean_commits":"34.333333333333336","dds":0.06796116504854366,"last_synced_commit":"443409b89a75f1cbb490c67aaec2df2adee31520"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fmaterial-ui-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fmaterial-ui-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fmaterial-ui-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shallinta%2Fmaterial-ui-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shallinta","download_url":"https://codeload.github.com/shallinta/material-ui-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250240667,"owners_count":21397845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dynamic-loading-tree","material-ui","material-ui-tree","mui-tree","react","react-hooks","react-tree","treeview"],"created_at":"2024-11-29T01:30:07.720Z","updated_at":"2025-04-22T12:30:15.786Z","avatar_url":"https://github.com/shallinta.png","language":"JavaScript","readme":"# material-ui-tree v2\n[![npm package](https://img.shields.io/npm/v/material-ui-tree.svg)](https://www.npmjs.org/package/material-ui-tree)\n[![npm download](https://img.shields.io/npm/dt/material-ui-tree.svg)](https://www.npmjs.org/package/material-ui-tree)\n[![github license](https://img.shields.io/github/license/shallinta/material-ui-tree.svg)](https://github.com/shallinta/material-ui-tree/blob/master/LICENSE)\n[![github issues open](https://img.shields.io/github/issues/shallinta/material-ui-tree.svg)](https://github.com/shallinta/material-ui-tree/issues?q=is%3Aopen+is%3Aissue)\n[![github issues closed](https://img.shields.io/github/issues-closed/shallinta/material-ui-tree.svg)](https://github.com/shallinta/material-ui-tree/issues?q=is%3Aissue+is%3Aclosed)\n![github language top](https://img.shields.io/github/languages/top/shallinta/material-ui-tree.svg)\n[![github stars](https://img.shields.io/github/stars/shallinta/material-ui-tree.svg?style=social\u0026label=Stars)](https://github.com/shallinta/material-ui-tree)  \n\n[![NPM](https://nodei.co/npm/material-ui-tree.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/material-ui-tree)\n\u003e A react tree component with material-ui.  \n\u003e See demo page: [Material-ui-tree Demo (v2 version)](https://94wyyw992r.codesandbox.io/)\n\n### Using material-ui on 'bit.dev' ?\n- If you use material-ui components on `bit.dev`, you can alse use this material-ui-tree component on the `bit`.\nSee also [@bit/shallinta.material-ui-tree](https://bit.dev/shallinta/material-ui-tree).\n```sh\nnpm install @bit/shallinta.material-ui-tree.material-ui-tree --save\nnpm install @bit/shallinta.material-ui-tree.util --save\n```\n- What is `bit`? Go and see [bit.dev](https://bit.dev/).\n\n### What's new with v2 version?\n- 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`.)\n- Take full use of react hooks, which needs react version ^16.8.0.\n- Change some props name to make more sense.\n- Add some props to adapt to more usage scenarios.\n- Use rollup to pack and compress this component.\n\n### Migration from material-ui-tree v1.*\n- You should first learn about material-ui@4.* which is the strong dependence. [See material-ui](https://material-ui.com/)\n- 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/)\n- To support the v2 version, you should upgrade your react and react-dom version to at least v16.8.0.\n- Changed properties:\n  - `title`: change type \u003cdel\u003e\"string\"\u003c/del\u003e to \"string | React Node\".\n  - `labelKey`: instead of old \u003cdel\u003elabelName\u003c/del\u003e\n  - `valueKey`: instead of old \u003cdel\u003evalueName\u003c/del\u003e\n  - `childrenKey`: instead of old \u003cdel\u003echildrenName\u003c/del\u003e\n  - `unfoldFirst`: instead of old \u003cdel\u003eexpandFirst\u003c/def\u003e\n  - `unfoldAll`: instead of old \u003cdel\u003eexpandAll\u003c/del\u003e\n  - `pageSize`: instead of old \u003cdel\u003echildrenCountPerPage\u003c/del\u003e\n  - `loadMoreIcon`: new property\n  - `renderLoadMoreText`: new callback function\n- Changed callback argument names:\n  - `path`: instead of old \u003cdel\u003echdIndex\u003c/del\u003e\n  - `unfoldStatus`: instead of old \u003cdel\u003eexpand\u003c/del\u003e\n  - `toggleFoldStatus`: instead of old \u003cdel\u003edoExpand\u003c/del\u003e\n- Util provided:\n  - 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.  \n  - Function signature:\n    1. getNodeDataByPath:: (object, array, string) -\u003e object.\n    2. withChildrenKey:: string -\u003e (object, array) -\u003e object.\n\n\n### Installation\nAvailable as npm package.\n```sh\nnpm install --save material-ui-tree@latest\n```\nEnsure to install these packages in your program because `material-ui-tree` depends on them.\n```sh\nnpm install --save\n react\n react-dom\n prop-types\n classnames\n @material-ui/core\n @material-ui/icons\n @material-ui/styles\n```\n\n\n### Usage\n\u003e  See demo page code: (v2)  \n\n[![Edit material-ui-tree v2 demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/94wyyw992r?fontsize=14)\n\n\n### Options\n\u003e All options are not required.  \n\n##### Normal properties:  \n\n|option name | type | default value | remark |\n|---|---|---|---|\n|className|string|''|The `className` will passed to container `Paper` component of material-ui.|\n|labelKey|string|'label'|Label key to show in tree leaf data. If `renderLabel` option is set, `labelKey` will be ignored.|\n|valueKey|string|'value'|Value key in tree leaf data. Used for react children key.|\n|childrenKey|string|'children'|Children key to render child branch in tree leaf data.|\n|data|object|{}|Initial tree data.|\n|title|string or React Node|''|Tree title. If not set, title module will not show.|\n|unfoldFirst|bool|false|Whether unfold the first branch of the tree in the beginning.|\n|unfoldAll|bool|false|Whether unfold all branches of the tree in the beginning.|\n|pageSize|number|20|Children nodes' count in each branch page. When tree node children data is too big, render them by page.|\n|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.|\n|foldIcon|React OptionalElement|`\u003cAddCircleOutlineIcon /\u003e(@material-ui/icons/AddCircleOutline)`|Icon of tree node in fold status. You should pass an react element of icon such as `\u003cArrowDownIcon /\u003e(@material-ui/icons/KeyboardArrowDown)` when you want to modify the icon.|\n|unfoldIcon|React OptionalElement|`\u003cRemoveCircleOutlineIcon /\u003e(@material-ui/icons/RemoveCircleOutline)`|Icon of tree node in unfold status. You should pass an react element of icon such as `\u003cArrowUpIcon /\u003e(@material-ui/icons/KeyboardArrowUp)` when you want to modify the icon.|\n|loadMoreIcon|React OptionalElement|`\u003cMoreVertIcon /\u003e(@material-ui/icons/MoreVert)`.|Icon of \"load-more\" tree node. You should pass an react element of icon such as `\u003cMoreHorizIcon /\u003e(@material-ui/icons/MoreHoriz)` when you want to modify the icon.|\n\n##### Callback properties:\n\n- **getActionsData**: *(func)* The method to get data to render action buttons, with arguments:  \n\n|argument name|type|remark|\n|---|---|---|\n|data|object|current node data|  \n|path|array\u003cnumber\u003e|node indices from tree root|\n|unfoldStatus|bool|node unfold status|\n|toggleFoldStatus|func|callback to unfold current node's child tree|\n\nShould 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.\n\n- **renderLabel**: *(func)* The method to render tree node label, with arguments:  \n\n|argument name|type|remark|\n|---|---|---|\n|data|object|current node data|\n|unfoldStatus|bool|current node unfold status|\n\nIf this is set, `labelKey` option will be ignored.\n\n- **renderLoadMoreText**: *(func)* The method to render the \"load-more\" tree node when there are more than one page of children, with arguments:  \n\n|argument name|type|remark|\n|---|---|---|\n|page|number|current loaded page index.|\n|pageSize|number|children count of each page.|\n|total|number|total count of children.|\n\nShould return text or react elements. The following templete will be returned by default:  \n\n```js\n`Loaded pages: ${(page + 1)} / Page size: ${pageSize} / Total: ${total}. Click here to load more...`\n```\n\n- **requestChildrenData**: *(func)* The method to request children data of tree node dynamically, with arguments:  \n\n|argument name|type|remark|\n|---|---|---|\n|data|object|current node data.|\n|path|array\u003cnumber\u003e|node indices from tree root.|\n|toggleFoldStatus|func|callback to unfold current node's child tree.|\n\nThis function will not be called until the current node has no children data.  \n\n\n### Recently updated?\nChangelog available [here](https://github.com/shallinta/material-ui-tree/blob/master/CHANGELOG.md)\n\n\n### LICENSE\nThe project is licensed under the terms of [MIT license](https://github.com/shallinta/material-ui-tree/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshallinta%2Fmaterial-ui-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshallinta%2Fmaterial-ui-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshallinta%2Fmaterial-ui-tree/lists"}