ITreeViewProps

@spartanfx/react v1.2.2

---

@spartanfx/react / index / ITreeViewProps

Interface: ITreeViewProps<TItem>

Props for the TreeView component.

Type Parameters

TItem

TItem = any

Properties

Required

Property	Type	Default	Description
items	TItem[]	-	Array of items to display in the tree. Can be flat (with id/parentId) or nested (with children array).
schema	ITreeViewSchema<TItem>	-	ITreeViewSchema configuration defining how to map item fields to tree structure.

Options

Property	Type	Default	Description
ariaLabel?	string	-	ARIA label for the tree.
ariaLabelledBy?	string	-	ARIA labelledby attribute for the tree.
burgerBreakpointPx?	number	768	Breakpoint in pixels for responsive burger menu mode.
defaultExpandedIds?	string[]	-	Default expanded node IDs for uncontrolled mode.
defaultSelectedId?	string	-	Default selected node ID for uncontrolled mode.
enableDragDrop?	boolean	false	Enable drag & drop reordering.
expandedIds?	string[]	-	Controlled array of expanded node IDs. Use with onExpandedChange for controlled expansion.
expandOnClick?	boolean	false	If true, clicking anywhere on the node expands/collapses it. If false, only clicking the caret icon expands/collapses.
iconsPerLevel?	Record<number, ReactNode>	-	Icon to display for each depth level. Keys are depth levels (0 = root), values are React nodes.
responsiveMode?	ResponsiveMode	'auto'	Responsive mode for burger menu display. - 'auto': Show burger menu below breakpoint - 'always': Always show burger menu - 'never': Never show burger menu
selectedId?	string	-	Controlled selected node ID. Use with onSelect for controlled selection.
showExpandCollapseIcon?	boolean	true	Whether to show expand/collapse caret icons.

Events & callbacks

Property	Type	Default	Description
canDrag?	(node) => boolean	-	Permission function to determine if a node can be dragged.
canDrop?	(sourceNode, targetNode, position) => boolean	-	Permission function to determine if a node can be dropped at a target.
getIconForNode?	(node) => ReactNode	-	Function to dynamically determine icon for a specific node. Overrides iconsPerLevel if provided.
getValue?	(item, field) => any	-	Optional custom function to retrieve field values from items. If provided, overrides direct property access.
onExpandedChange?	(ids) => void	-	Callback fired when node expansion state changes.
onReOrder?	(event) => void	-	Callback fired when a node is reordered via drag & drop. Receives updated items array and reorder metadata.
onSelect?	(id, node) => void	-	Callback fired when a node is selected.
renderItem?	(args) => ReactNode	-	Custom render function for tree items. If provided, you have full control over item rendering.

Appearance & theming

Property	Type	Default	Description
appearance?	AppearanceMode	AppearanceMode.light	Appearance mode for the tree (light or dark).
classes?	ITreeViewClassNames	-	CSS class name overrides for component elements.
className?	string	-	CSS class name for the root container.
style?	CSSProperties	-	Inline styles for the root container.
tokens?	ITreeViewTokens	-	Design tokens for theming.