Interface TreeViewProps

The main tree view component.

interface TreeViewProps {
    activeItems?: TreeViewDataItem[];
    allExpanded?: boolean;
    aria-label?: string;
    aria-labelledby?: string;
    className?: string;
    compareItems?: ((item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean);
    data: TreeViewDataItem[];
    defaultAllExpanded?: boolean;
    expandedIcon?: ReactNode;
    hasBadges?: boolean;
    hasCheckboxes?: boolean;
    hasGuides?: boolean;
    hasSelectableNodes?: boolean;
    icon?: ReactNode;
    id?: string;
    isMultiSelectable?: boolean;
    isNested?: boolean;
    onCheck?: ((event: ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void);
    onCollapse?: ((event: MouseEvent<Element, MouseEvent>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void);
    onExpand?: ((event: MouseEvent<Element, MouseEvent>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void);
    onSelect?: ((event: MouseEvent<Element, MouseEvent>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void);
    parentItem?: TreeViewDataItem;
    toolbar?: ReactNode;
    useMemo?: boolean;
    variant?: "default" | "compact" | "compactNoBackground";
}

Properties

activeItems? allExpanded? aria-label? aria-labelledby? className? compareItems? data defaultAllExpanded? expandedIcon? hasBadges? hasCheckboxes? hasGuides? hasSelectableNodes? icon? id? isMultiSelectable? isNested? onCheck? onCollapse? onExpand? onSelect? parentItem? toolbar? useMemo? variant?

Properties

OptionalactiveItems

activeItems?: TreeViewDataItem[]

Active items of tree view.

OptionalallExpanded

allExpanded?: boolean

Sets the expanded state on all tree nodes, overriding default behavior and current internal state.

Optionalaria-label

aria-label?: string

A text string that sets the accessible name of the tree view list. Either this or the aria-labelledby property must be passed in.

Optionalaria-labelledby

aria-labelledby?: string

A space separated list of element id's that sets the accessible name of the tree view list. Either this or the aria-label property must be passed in.

OptionalclassName

className?: string

Class to add if not passed a parentItem property.

OptionalcompareItems

compareItems?: ((item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean)

Comparison function for determining active items.

data

data: TreeViewDataItem[]

Data of the tree view.

OptionaldefaultAllExpanded

defaultAllExpanded?: boolean

Sets the default expanded behavior.

OptionalexpandedIcon

expandedIcon?: ReactNode

Icon for all expanded node items.

OptionalhasBadges

hasBadges?: boolean

Flag indicating if all nodes in the tree view should have badges.

OptionalhasCheckboxes

hasCheckboxes?: boolean

Flag indicating if all nodes in the tree view should have checkboxes.

OptionalhasGuides

hasGuides?: boolean

Flag indicating if the tree view has guide lines.

OptionalhasSelectableNodes

hasSelectableNodes?: boolean

Flag indicating that tree nodes should be independently selectable, even when having children.

Optionalicon

icon?: ReactNode

Icon for all leaf or unexpanded node items.

Optionalid

id?: string

ID of the tree view.

OptionalisMultiSelectable

isMultiSelectable?: boolean

Flag indicating whether multiple nodes can be selected in the tree view. This will also set the aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended. Can only be applied to the root tree view list.

OptionalisNested

isNested?: boolean

Flag indicating if the tree view is nested.

OptionalonCheck

onCheck?: ((event: ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void)

Callback for item checkbox selection.

OptionalonCollapse

onCollapse?: ((event: MouseEvent<Element, MouseEvent>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void)

Callback for collapsing a node with children.

OptionalonExpand

onExpand?: ((event: MouseEvent<Element, MouseEvent>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void)

Callback for expanding a node with children.

OptionalonSelect

onSelect?: ((event: MouseEvent<Element, MouseEvent>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void)

Callback for item selection.

OptionalparentItem

parentItem?: TreeViewDataItem

Internal. Parent item of a tree view list item.

Optionaltoolbar

toolbar?: ReactNode

Toolbar to display above the tree view.

OptionaluseMemo

useMemo?: boolean

Flag indicating the tree view should utilize memoization to help render large data sets. Setting this property requires that the activeItems property is passed an array containing every node in the selected item's path.

Optionalvariant

variant?: "default" | "compact" | "compactNoBackground"

Variant presentation styles for the tree view.

Settings

Member Visibility

On This Page

Properties