OrganizationChart API

API documentation for OrganizationChart component

OrganizationChartRoot#

Props#

Defines valid properties in OrganizationChart 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?: OrganizationChartRootInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrganizationChartRootInstance) => 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`	—	`OrganizationChartRootInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrganizationChartRootPassThrough>`
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: OrganizationChartRootInstance) => 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 OrganizationChart 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 OrganizationChart component.

Prop	Type
`rootProps`	`useOrganizationChartRootProps`
Pre-built props for the root element.
`getTreeProps`	`(node: TreeNode, level: number) => useOrganizationChartTreeProps`
Returns pre-built props for a tree item element.
`getNodeProps`	`(node: TreeNode, handleClick: (event: MouseEvent<HTMLDivElement>) => void) => useOrganizationChartNodeProps`
Returns pre-built props for a node element.
`getCollapseButtonProps`	`(node: TreeNode, handleClick: (event: MouseEvent<HTMLButtonElement>) => void) => useOrganizationChartCollapseButtonProps`
Returns pre-built props for a collapse button element.
`subtreeProps`	`useOrganizationChartSubtreeProps`
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`	`{ --px-gap-x: number; --px-gap-y: number }`
CSS custom properties for the org chart layout (gap).
`state`	`OrganizationChartRootState`
The state of the OrganizationChart component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrganizationChart component.

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

Types#

Instance

Instance of OrganizationChart component.

Values
`ComponentInstance<OrganizationChartRootProps, OrganizationChartRootState, OrganizationChartRootExposes>`

OrganizationChartTree#

Props#

Defines valid properties in OrganizationChartTree 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?: OrganizationChartTreeInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrganizationChartTreeInstance) => 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`	—	`OrganizationChartTreeInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrganizationChartTreePassThrough>`
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: OrganizationChartTreeInstance) => 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 OrganizationChartTree component.

Prop	Type
`organizationchart`	`OrganizationChartRootInstance`
The parent OrganizationChart instance.
`level`	`number`
The level of the org chart tree.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrganizationChartTree component.

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

Types#

Instance

Instance of OrganizationChartTree component.

Values
`ComponentInstance<OrganizationChartTreeProps, OrganizationChartTreeState, OrganizationChartTreeExposes>`

OrganizationChartSubtree#

Props#

Defines valid properties in OrganizationChartSubtree 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?: OrganizationChartSubtreeInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrganizationChartSubtreeInstance) => 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`	—	`OrganizationChartSubtreeInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrganizationChartSubtreePassThrough>`
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: OrganizationChartSubtreeInstance) => 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 OrganizationChartSubtree component.

Prop	Type
`organizationchart`	`OrganizationChartRootInstance`
The parent OrganizationChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrganizationChartSubtree component.

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

Types#

Instance

Instance of OrganizationChartSubtree component.

Values
`ComponentInstance<OrganizationChartSubtreeProps, OrganizationChartSubtreeState, OrganizationChartSubtreeExposes>`

OrganizationChartNode#

Props#

Defines valid properties in OrganizationChartNode 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?: OrganizationChartNodeInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrganizationChartNodeInstance) => 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`	—	`OrganizationChartNodeInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrganizationChartNodePassThrough>`
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: OrganizationChartNodeInstance) => 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 OrganizationChartNode component.

Prop	Type
`organizationchart`	`OrganizationChartRootInstance`
The parent OrganizationChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrganizationChartNode component.

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

Types#

Instance

Instance of OrganizationChartNode component.

Values
`ComponentInstance<OrganizationChartNodeProps, OrganizationChartNodeState, OrganizationChartNodeExposes>`

OrganizationChartNodeContent#

Props#

Defines valid properties in OrganizationChartNodeContent 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?: OrganizationChartNodeContentInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrganizationChartNodeContentInstance) => 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`	—	`OrganizationChartNodeContentInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrganizationChartNodeContentPassThrough>`
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: OrganizationChartNodeContentInstance) => 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 OrganizationChartNodeContent component.

Prop	Type
`organizationchart`	`OrganizationChartRootInstance`
The parent OrganizationChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrganizationChartNodeContent component.

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

Types#

Instance

Instance of OrganizationChartNodeContent component.

Values
`ComponentInstance<OrganizationChartNodeContentProps, OrganizationChartNodeContentState, OrganizationChartNodeContentExposes>`

OrganizationChartCollapseButton#

Props#

Defines valid properties in OrganizationChartCollapseButton 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?: OrganizationChartCollapseButtonInstance) => CSSProperties)`
The style to apply to the component.
`className`	—	`string` \| `((instance?: OrganizationChartCollapseButtonInstance) => 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`	—	`OrganizationChartCollapseButtonInstance`
The instance to pass to the component.
`pt`	—	`SafeRecord<OrganizationChartCollapseButtonPassThrough>`
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: OrganizationChartCollapseButtonInstance) => 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 OrganizationChartCollapseButton component.

Prop	Type
`organizationchart`	`OrganizationChartRootInstance`
The parent OrganizationChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrganizationChartCollapseButton component.

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

Types#

Instance

Instance of OrganizationChartCollapseButton component.

Values
`ComponentInstance<OrganizationChartCollapseButtonProps, OrganizationChartCollapseButtonState, OrganizationChartCollapseButtonExposes>`