OrgChart API

API documentation for OrgChart component

OrgChartRoot#

Props#

Defines valid properties in OrgChart component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: OrgChartRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: OrgChartRootInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<OrgChartRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: OrgChartRootInstance) => ReactNode)	null	The children to render.
value	TreeNode[]	null	The data of the org chart.
gap	number \| number[]	null	The gap of the org chart.
selectable	boolean	true	Whether the nodes of the org chart are selectable.
collapsible	boolean	false	Whether the nodes of the org chart are collapsible.
selectionMode	"multiple" \| "single"	null	The selection mode of the org chart.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in OrgChart component.

name	type	default	description
selectedNodes	string[]	null	The selected nodes' ids of the org chart.
collapsedNodes	string[]	null	The collapsed nodes' ids of the org chart.

Exposes#

Defines the methods and properties exposed by OrgChart component.

name	type	default	description
state	OrgChartRootState	null	The state of the OrgChart component.
toggleNodeSelect	(key?: string) => void	null	Toggles the selection of a node.
toggleNodeCollapse	(key?: string) => void	null	Toggles the collapse state of a node.
isCollapsible	(node?: TreeNode) => boolean	null	Checks if a node is collapsible.
isCollapsed	(node?: TreeNode) => boolean	null	Checks if a node is collapsed.
isSelected	(node?: TreeNode) => boolean	null	Checks if a node is selected.
isSelectable	(node?: TreeNode) => boolean	null	Checks if a node is selectable.
handleNodeKeyDown	(event: KeyboardEvent<HTMLDivElement>, key?: string) => void	null	Handles the key down event of a node.
handleCollapseKeyDown	(event: KeyboardEvent<HTMLButtonElement>, key?: string) => void	null	Handles the key down event of a collapse button.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChart component.

name	type	default	description
root	OrgChartRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
node	OrgChartRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the node's DOM element.
subtree	OrgChartRootPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the subtree's DOM element.
tree	OrgChartRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	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.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: OrgChartTreeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: OrgChartTreeInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<OrgChartTreePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: OrgChartTreeInstance) => ReactNode)	null	The children to render.
item	TreeNode	null	The item of the org chart tree.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartTree component.

name	type	default	description
orgchart	OrgChartRootInstance	null	The parent OrgChart instance.
level	number	null	The level of the org chart tree.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartTree component.

name	type	default	description
root	OrgChartTreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	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.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: OrgChartSubtreeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: OrgChartSubtreeInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<OrgChartSubtreePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: OrgChartSubtreeInstance) => ReactNode)	null	The children to render.
items	TreeNode[]	null	The items of the org chart subtree.
root	boolean	null	Whether the org chart subtree is the root.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartSubtree component.

name	type	default	description
orgchart	OrgChartRootInstance	null	The parent OrgChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartSubtree component.

name	type	default	description
root	OrgChartSubtreePassThroughType<HTMLAttributes<HTMLDivElement>>	null	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.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: OrgChartNodeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: OrgChartNodeInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<OrgChartNodePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: OrgChartNodeInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartNode component.

name	type	default	description
orgchart	OrgChartRootInstance	null	The parent OrgChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartNode component.

name	type	default	description
root	OrgChartNodePassThroughType<HTMLAttributes<HTMLDivElement>>	null	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.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: OrgChartNodeContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: OrgChartNodeContentInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<OrgChartNodeContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: OrgChartNodeContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartNodeContent component.

name	type	default	description
orgchart	OrgChartRootInstance	null	The parent OrgChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartNodeContent component.

name	type	default	description
root	OrgChartNodeContentPassThroughType<HTMLAttributes<HTMLDivElement>>	null	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.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: OrgChartCollapseButtonInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: OrgChartCollapseButtonInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<OrgChartCollapseButtonPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: OrgChartCollapseButtonInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by OrgChartCollapseButton component.

name	type	default	description
orgchart	OrgChartRootInstance	null	The parent OrgChart instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of OrgChartCollapseButton component.

name	type	default	description
root	OrgChartCollapseButtonPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of OrgChartCollapseButton component.

values
ComponentInstance<OrgChartCollapseButtonProps, OrgChartCollapseButtonState, OrgChartCollapseButtonExposes>