DEPRECATED:This project has reached the end of its development
- expand/collapse nodes
- Allows user to change orgchart structure by drag/drop nodes
- Allows user to edit orgchart
- Supports exporting chart as a picture or pdf document
- Supports pan and zoom
- Allows user to customize the internal structure for every node
| Name | Type | Default | Description |
|---|---|---|---|
| chartClass | string | A css class to apply to the chart DOM node. | |
| containerClass | string | Add an optional extra class name to .orgchart-container It could end up looking like class="orgchart-container xxx yyy". | |
| collapsible | boolean | true | Allows expanding/collapsing the nodes. |
| datasource | object | datasource usded to build out structure of orgchart. | |
| draggable | boolean | false | Allows dragging/dropping the nodes to the hierarchy of chart. |
| multipleSelect | boolean | false | If true, user can select multiple nodes by mouse clicking. |
| NodeTemplate | elementType | A Component that provides the node content Markup. This is a useful prop when you want to use your own styles and markup to create a custom orgchart node. | |
| onClickChart | function | A callback fired when the orgchart is clicking. | |
| onClickNode | function | A callback fired when the node is clicking. | |
| pan | boolean | false | If true, the chart can be panned. |
| zoom | boolean | false | If true, the chart can be zoomed. |
| zoomAction | string | Will only work when zoom is set to true. Must be: 'decrement', 'increment', 'reset' |
| Name | Description |
|---|---|
| expandAllNodes | User can use this method to expand all the nodes. Sample code: orgchartRef.current.expandAllNodes() |
| exportTo | User can use this method to export orgchart to png org pdf file. Sample code: orgchartRef.current.exportTo(filename, fileextension) |
Clone this repository:
git clone [email protected]:trainual/react-orgchart.git Install yalc:
Using NPM:
npm i yalc -g Using Yarn:
yarn global add yalc Setup publishing with yalc (within this repository):
yalc publish Setup published version in Trainual:
yalc add @dabeng/[email protected]Run watch to detect changes made upon save in this repository:
npm run watch Notes:
- Restart
viteserver in Trainual after changes made from this repository (currently not setup to detect changes) yalc add ...will update Trainual'spackage.jsonto reference this repository from the.yalcdirectory - Please do not check this intogit
Prior to submitting a pull request, run npm run publish. This will update the dist/ to include your updated changes. Once your PR is approved and merged to master, if you are ready to publish a new version, use Github tags: https://github.com/trainual/react-orgchart/tags