OrgChart API

API documentation for OrgChart component

OrgChartRoot#

Props#

Defines valid properties in OrgChart component.

Prop	Default	Type
`ref`	—	`Ref<unknown>`
The reference to the component instance.
`pIf`	`true`	`boolean`
Whether the component should be rendered.
`style`	—	`CSSProperties` \| `((instance?: OrgChartRootInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrgChartRootInstance) => string)`
The class name to apply to the component.
`as`	—	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`
The component type to render.
`asChild`	`false`	`boolean`
Whether the component should be rendered as a child component.
`instance`	—	`OrgChartRootInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrgChartRootPassThrough>`
The pass-through props to pass to the component.
`ptOptions`	—	`PassThroughOptions`
The pass-through options to pass to the component.
`unstyled`	—	`boolean`
Whether the component should be rendered without classes.
`dt`	—	`unknown`
The design token to use for the component.
`styles`	—	`StylesOptions<ComponentInstance>`
The styles to use for the component.
`render`	—	`(instance: OrgChartRootInstance) => ReactNode`
The render function to render the component with instance access.
`children`	—	`any`
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	—	`TreeNode[]`
The data of the org chart.
`gap`	—	`number` \| `number[]`
The gap of the org chart.
`selectable`	`true`	`boolean`
Whether the nodes of the org chart are selectable.
`collapsible`	`false`	`boolean`
Whether the nodes of the org chart are collapsible.
`selectionMode`	—	`"multiple"` \| `"single"`
The selection mode of the org chart.
`[key: string]`	—	`any`
`pt-{optionName}-*`	—	`-`
Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in OrgChart component.

Prop	Type
`selectedNodes`	`string[]`
The selected nodes' ids of the org chart.
`collapsedNodes`	`string[]`
The collapsed nodes' ids of the org chart.

Exposes#

Defines the methods and properties exposed by OrgChart component.

Prop	Type
`rootProps`	`useOrgChartRootProps`
Pre-built props for the root element.
`getTreeProps`	`(node: TreeNode, level: number) => useOrgChartTreeProps`
Returns pre-built props for a tree item element.
`getNodeProps`	`(node: TreeNode, handleClick: (event: MouseEvent<HTMLDivElement>) => void) => useOrgChartNodeProps`
Returns pre-built props for a node element.
`getCollapseButtonProps`	`(node: TreeNode, handleClick: (event: MouseEvent<HTMLButtonElement>) => void) => useOrgChartCollapseButtonProps`
Returns pre-built props for a collapse button element.
`subtreeProps`	`useOrgChartSubtreeProps`
Pre-built props for a subtree element.
`toggleNodeSelect`	`(key?: string) => void`
Toggles the selection of a node.
`toggleNodeCollapse`	`(key?: string) => void`
Toggles the collapse state of a node.
`isCollapsible`	`(node?: TreeNode) => boolean`
Checks if a node is collapsible.
`isCollapsed`	`(node?: TreeNode) => boolean`
Checks if a node is collapsed.
`isSelected`	`(node?: TreeNode) => boolean`
Checks if a node is selected.
`isSelectable`	`(node?: TreeNode) => boolean`
Checks if a node is selectable.
`handleNodeKeyDown`	`(event: KeyboardEvent<HTMLDivElement>, key?: string) => void`
Handles the key down event of a node.
`handleCollapseKeyDown`	`(event: KeyboardEvent<HTMLButtonElement>, key?: string) => void`
Handles the key down event of a collapse button.
`orgChartStyle`	`{ --gap-x: number; --gap-y: number }`
CSS custom properties for the org chart layout (gap).
`state`	`OrgChartRootState`
The state of the OrgChart component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChart component.

Prop	Type
`root`	`OrgChartRootPassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the root's DOM element.
`node`	`OrgChartRootPassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the node's DOM element.
`subtree`	`OrgChartRootPassThroughType<HTMLAttributes<HTMLUListElement>>`
Used to pass attributes to the subtree's DOM element.
`tree`	`OrgChartRootPassThroughType<HTMLAttributes<HTMLLIElement>>`
Used to pass attributes to the tree's DOM element.

Types#

Instance

Instance of OrgChart component.

Values
`ComponentInstance<OrgChartRootProps, OrgChartRootState, OrgChartRootExposes>`

OrgChartTree#

Props#

Defines valid properties in OrgChartTree component.

Prop	Default	Type
`ref`	—	`Ref<unknown>`
The reference to the component instance.
`pIf`	`true`	`boolean`
Whether the component should be rendered.
`style`	—	`CSSProperties` \| `((instance?: OrgChartTreeInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrgChartTreeInstance) => string)`
The class name to apply to the component.
`as`	—	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`
The component type to render.
`asChild`	`false`	`boolean`
Whether the component should be rendered as a child component.
`instance`	—	`OrgChartTreeInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrgChartTreePassThrough>`
The pass-through props to pass to the component.
`ptOptions`	—	`PassThroughOptions`
The pass-through options to pass to the component.
`unstyled`	—	`boolean`
Whether the component should be rendered without classes.
`dt`	—	`unknown`
The design token to use for the component.
`styles`	—	`StylesOptions<ComponentInstance>`
The styles to use for the component.
`render`	—	`(instance: OrgChartTreeInstance) => ReactNode`
The render function to render the component with instance access.
`children`	—	`any`
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`item`	—	`TreeNode`
The item of the org chart tree.
`[key: string]`	—	`any`
`pt-{optionName}-*`	—	`-`
Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartTree component.

Prop	Type
`orgchart`	`OrgChartRootInstance`
The parent OrgChart instance.
`level`	`number`
The level of the org chart tree.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartTree component.

Prop	Type
`root`	`OrgChartTreePassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of OrgChartTree component.

Values
`ComponentInstance<OrgChartTreeProps, OrgChartTreeState, OrgChartTreeExposes>`

OrgChartSubtree#

Props#

Defines valid properties in OrgChartSubtree component.

Prop	Default	Type
`ref`	—	`Ref<unknown>`
The reference to the component instance.
`pIf`	`true`	`boolean`
Whether the component should be rendered.
`style`	—	`CSSProperties` \| `((instance?: OrgChartSubtreeInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrgChartSubtreeInstance) => string)`
The class name to apply to the component.
`as`	—	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`
The component type to render.
`asChild`	`false`	`boolean`
Whether the component should be rendered as a child component.
`instance`	—	`OrgChartSubtreeInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrgChartSubtreePassThrough>`
The pass-through props to pass to the component.
`ptOptions`	—	`PassThroughOptions`
The pass-through options to pass to the component.
`unstyled`	—	`boolean`
Whether the component should be rendered without classes.
`dt`	—	`unknown`
The design token to use for the component.
`styles`	—	`StylesOptions<ComponentInstance>`
The styles to use for the component.
`render`	—	`(instance: OrgChartSubtreeInstance) => ReactNode`
The render function to render the component with instance access.
`children`	—	`any`
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`items`	—	`TreeNode[]`
The items of the org chart subtree.
`root`	—	`boolean`
Whether the org chart subtree is the root.
`[key: string]`	—	`any`
`pt-{optionName}-*`	—	`-`
Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartSubtree component.

Prop	Type
`orgchart`	`OrgChartRootInstance`
The parent OrgChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartSubtree component.

Prop	Type
`root`	`OrgChartSubtreePassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of OrgChartSubtree component.

Values
`ComponentInstance<OrgChartSubtreeProps, OrgChartSubtreeState, OrgChartSubtreeExposes>`

OrgChartNode#

Props#

Defines valid properties in OrgChartNode component.

Prop	Default	Type
`ref`	—	`Ref<unknown>`
The reference to the component instance.
`pIf`	`true`	`boolean`
Whether the component should be rendered.
`style`	—	`CSSProperties` \| `((instance?: OrgChartNodeInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrgChartNodeInstance) => string)`
The class name to apply to the component.
`as`	—	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`
The component type to render.
`asChild`	`false`	`boolean`
Whether the component should be rendered as a child component.
`instance`	—	`OrgChartNodeInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrgChartNodePassThrough>`
The pass-through props to pass to the component.
`ptOptions`	—	`PassThroughOptions`
The pass-through options to pass to the component.
`unstyled`	—	`boolean`
Whether the component should be rendered without classes.
`dt`	—	`unknown`
The design token to use for the component.
`styles`	—	`StylesOptions<ComponentInstance>`
The styles to use for the component.
`render`	—	`(instance: OrgChartNodeInstance) => ReactNode`
The render function to render the component with instance access.
`children`	—	`any`
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	—	`any`
`pt-{optionName}-*`	—	`-`
Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartNode component.

Prop	Type
`orgchart`	`OrgChartRootInstance`
The parent OrgChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartNode component.

Prop	Type
`root`	`OrgChartNodePassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of OrgChartNode component.

Values
`ComponentInstance<OrgChartNodeProps, OrgChartNodeState, OrgChartNodeExposes>`

OrgChartNodeContent#

Props#

Defines valid properties in OrgChartNodeContent component.

Prop	Default	Type
`ref`	—	`Ref<unknown>`
The reference to the component instance.
`pIf`	`true`	`boolean`
Whether the component should be rendered.
`style`	—	`CSSProperties` \| `((instance?: OrgChartNodeContentInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrgChartNodeContentInstance) => string)`
The class name to apply to the component.
`as`	—	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`
The component type to render.
`asChild`	`false`	`boolean`
Whether the component should be rendered as a child component.
`instance`	—	`OrgChartNodeContentInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrgChartNodeContentPassThrough>`
The pass-through props to pass to the component.
`ptOptions`	—	`PassThroughOptions`
The pass-through options to pass to the component.
`unstyled`	—	`boolean`
Whether the component should be rendered without classes.
`dt`	—	`unknown`
The design token to use for the component.
`styles`	—	`StylesOptions<ComponentInstance>`
The styles to use for the component.
`render`	—	`(instance: OrgChartNodeContentInstance) => ReactNode`
The render function to render the component with instance access.
`children`	—	`any`
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	—	`any`
`pt-{optionName}-*`	—	`-`
Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartNodeContent component.

Prop	Type
`orgchart`	`OrgChartRootInstance`
The parent OrgChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartNodeContent component.

Prop	Type
`root`	`OrgChartNodeContentPassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of OrgChartNodeContent component.

Values
`ComponentInstance<OrgChartNodeContentProps, OrgChartNodeContentState, OrgChartNodeContentExposes>`

OrgChartCollapseButton#

Props#

Defines valid properties in OrgChartCollapseButton component.

Prop	Default	Type
`ref`	—	`Ref<unknown>`
The reference to the component instance.
`pIf`	`true`	`boolean`
Whether the component should be rendered.
`style`	—	`CSSProperties` \| `((instance?: OrgChartCollapseButtonInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrgChartCollapseButtonInstance) => string)`
The class name to apply to the component.
`as`	—	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`
The component type to render.
`asChild`	`false`	`boolean`
Whether the component should be rendered as a child component.
`instance`	—	`OrgChartCollapseButtonInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrgChartCollapseButtonPassThrough>`
The pass-through props to pass to the component.
`ptOptions`	—	`PassThroughOptions`
The pass-through options to pass to the component.
`unstyled`	—	`boolean`
Whether the component should be rendered without classes.
`dt`	—	`unknown`
The design token to use for the component.
`styles`	—	`StylesOptions<ComponentInstance>`
The styles to use for the component.
`render`	—	`(instance: OrgChartCollapseButtonInstance) => ReactNode`
The render function to render the component with instance access.
`children`	—	`any`
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	—	`any`
`pt-{optionName}-*`	—	`-`
Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartCollapseButton component.

Prop	Type
`orgchart`	`OrgChartRootInstance`
The parent OrgChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartCollapseButton component.

Prop	Type
`root`	`OrgChartCollapseButtonPassThroughType<HTMLAttributes<HTMLDivElement>>`
Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of OrgChartCollapseButton component.

Values
`ComponentInstance<OrgChartCollapseButtonProps, OrgChartCollapseButtonState, OrgChartCollapseButtonExposes>`