ITreeViewProps
@spartanfx/react / ITreeViewProps
Interface: ITreeViewProps<TItem>
Props for the TreeView component.
Type Parameters
TItem
TItem = any
Properties
| Property | Type | Description |
|---|---|---|
appearance? | AppearanceMode | Appearance mode for the tree (light or dark). Default AppearanceMode.light |
ariaLabel? | string | ARIA label for the tree. |
ariaLabelledBy? | string | ARIA labelledby attribute for the tree. |
burgerBreakpointPx? | number | Breakpoint in pixels for responsive burger menu mode. Default 768 |
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. |
classes? | ITreeViewClassNames | CSS class name overrides for component elements. |
className? | string | CSS class name for the root container. |
defaultExpandedIds? | string[] | Default expanded node IDs for uncontrolled mode. |
defaultSelectedId? | string | Default selected node ID for uncontrolled mode. |
enableDragDrop? | boolean | Enable drag & drop reordering. Default false |
expandedIds? | string[] | Controlled array of expanded node IDs. Use with onExpandedChange for controlled expansion. |
expandOnClick? | boolean | If true, clicking anywhere on the node expands/collapses it. If false, only clicking the caret icon expands/collapses. Default false |
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. |
iconsPerLevel? | Record<number, ReactNode> | Icon to display for each depth level. Keys are depth levels (0 = root), values are React nodes. |
items | TItem[] | Array of items to display in the tree. Can be flat (with id/parentId) or nested (with children array). |
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. |
responsiveMode? | ResponsiveMode | Responsive mode for burger menu display. - 'auto': Show burger menu below breakpoint - 'always': Always show burger menu - 'never': Never show burger menu Default 'auto' |
schema | ITreeViewSchema<TItem> | ITreeViewSchema configuration defining how to map item fields to tree structure. |
selectedId? | string | Controlled selected node ID. Use with onSelect for controlled selection. |
showExpandCollapseIcon? | boolean | Whether to show expand/collapse caret icons. Default true |
style? | CSSProperties | Inline styles for the root container. |
tokens? | ITreeViewTokens | Design tokens for theming. |