File Tree

A component used to showcase the folder and file structure of a directory.

Installation

CLI

# CLI installation command goes here

Manual

# Manual installation command goes here

Usage

// Usage code goes here

When you pass elements and omit children, the tree is rendered from data and siblings are sorted automatically using a folders-first alphabetical order. Use sort="none" to preserve the input order, or pass a custom comparator.

Props

Tree

Prop	Type	Default	Description
`initialSelectedId`	`string`	`-`	The ID of the initially selected item.
`indicator`	`boolean`	`true`	Whether to show the tree indicator line.
`elements`	`TreeViewElement[]`	`-`	An array of tree view elements to render when `children` are omitted.
`initialExpandedItems`	`string[]`	`-`	An array of IDs for items that should be initially expanded.
`openIcon`	`React.ReactNode`	`-`	Custom icon for open folders.
`closeIcon`	`React.ReactNode`	`-`	Custom icon for closed folders.
`sort`	`"default"	"none"	((a, b) => number)`
`dir`	`"rtl"	"ltr"`	`"ltr"`

TreeViewElement

Prop	Type	Default	Description
`id`	`string`	`-`	A unique identifier for the node.
`name`	`string`	`-`	The label rendered for the node in data-driven mode.
`type`	`"file"	"folder"`	`-`
`isSelectable`	`boolean`	`true`	Whether the node can be selected.
`children`	`TreeViewElement[]`	`-`	Child nodes for folders.

Folder

Prop	Type	Default	Description
`element`	`string`	`-`	The name of the folder.
`value`	`string`	`-`	The unique identifier for the folder.
`isSelectable`	`boolean`	`true`	Whether the folder can be selected.
`isSelect`	`boolean`	`-`	Whether the folder is currently selected.

File

Prop	Type	Default	Description
`value`	`string`	`-`	The unique identifier for the file.
`isSelectable`	`boolean`	`true`	Whether the file can be selected.
`isSelect`	`boolean`	`-`	Whether the file is currently selected.
`fileIcon`	`React.ReactNode`	`-`	Custom icon for the file.

CollapseButton

Prop	Type	Default	Description
`elements`	`TreeViewElement[]`	`-`	An array of tree view elements to control.
`expandAll`	`boolean`	`false`	Whether to expand all elements initially.