Skip to content

Pantheon

TreeView

kotdes/pantheon

TreeView¶

TreeView shows nested items, such as files or an object hierarchy. Branches open and close with a spring, and the arrow turns.

Usage¶

Call Components.TreeView with a scope and a table of properties:

C.TreeView(scope, {
    Nodes = {
        {
            Id = "src",
            Label = "src",
            Children = {
                { Id = "init", Label = "init.luau", Icon = "file" },
            },
        },
    },
    OnSelect = function(id)
        print("Selected", id)
    end,
})

Properties¶

Name	Type	Required	Default	Description
`Theme`	`ThemeRef`		The contextual theme	Theme to use for this component instead of the one from `Theme.Provide`.
`LayoutOrder`	`UsedAs<number>`		`0`	Position in a parent `UIListLayout` or `UIGridLayout`.
`Size`	`UsedAs<UDim2>`		-	Size of the component.
`Visible`	`UsedAs<boolean>`		`true`	Whether the component is shown.
`ZIndex`	`UsedAs<number>`		-	Z index of the component.
`Nodes`	`{ TreeNode }`		-	The top level items. Each has an `Id` and a `Label`, and can have an `Icon` and `Children`, a list of nodes.
`Expanded`	`UsedAs<{ [string]: boolean }>`		`{}`	The open branches, as a table from `Id` to `true`. A plain table is only the starting set. A `Value` is followed, and is set when a branch opens or closes.
`Selected`	`UsedAs<string>`		`""`	`Id` of the selected node. A plain value is only the starting selection. A `Value` is followed, and is set when the user picks a node.
`Id`	`string`		-	Key that identifies this component when state is kept across rebuilds. See Persist.

Callbacks¶

Name	Description
`OnSelect: (id: string) -> ()`	Runs with the `Id` of the node the user picked.
`OnToggle: (id: string, expanded: boolean) -> ()`	Runs with the `Id` of a branch and whether it is now open.

See also¶

Collapsible