FileTree
file-treeBrowses expandable files and folders with selection and version-control status badges.
Usage
Basic usage
nodes data-driven rendering; folder foldable, defaultExpanded controlled initial expansion.
<FileTree
nodes={[
{ name: "app", type: "folder", defaultExpanded: true, children: [
{ name: "page.tsx", type: "file" },
{ name: "layout.tsx", type: "file" },
] },
{ name: "package.json", type: "file" },
]}
/>Change status icon
Node status renders git customary A/M/D/U/R colored letter subscripts.
<FileTree
nodes={[
{ name: "src", type: "folder", defaultExpanded: true, children: [
{ name: "task-runner.tsx", type: "file", status: "added" },
{ name: "button.tsx", type: "file", status: "modified" },
{ name: "legacy.ts", type: "file", status: "deleted" },
] },
{ name: "README.md", type: "file", status: "renamed" },
]}
/>Select + Search
selectedPath Controlled highlighting is currently selected; searchable enables in-tree search (automatically expands when an ancestor is hit).
<FileTree
nodes={nodes}
searchable
selectedPath={sel}
onSelect={(node, path) => setSel(path)}
/>When to use
Use FileTree for IDE or developer-tool sidebars and pull-request file lists. It supports nested files and folders, Git-style change markers, controlled selection, expansion, and built-in search. Use [Tree] for arbitrary hierarchical data or Table for two-dimensional data.
Import
import { FileTree, fileStatusMeta, filterFileTree } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| nodes* | FileNode[] | — | Recursive file and folder data. |
| selectedPath | string | — | Controlled selected path. |
| expandedPaths | string[] | — | Controlled set of expanded folder paths. |
| defaultExpandedPaths | string[] | — | Initial uncontrolled paths, merged with each folder's defaultExpanded. |
| searchable | boolean | false | Shows an in-tree search field that filters matches and expands their ancestors. |
| searchPlaceholder | string | "\u641c\u7d22\u6587\u4ef6" ("Search files") | Search-field placeholder. |
| className | string | — | Custom class name. |
Events
| Event | Type | Description |
|---|---|---|
| onSelect | (node: FileNode, path: string) => void | Fires when a file or folder is selected, with the node and composed path. |
| onContextMenu | (node: FileNode, path: string, e: React.MouseEvent) => void | Fires on a row context menu; pair it with ContextMenu for cursor-anchored actions. |
| onExpandedChange | (paths: string[]) => void | Fires whenever expansion changes in either controlled or uncontrolled mode. |
FileNode is { name: string; type: "file"\|"folder"; status?: FileStatus; children?: FileNode[]; defaultExpanded?: boolean }.FileStatus is "added"\|"modified"\|"deleted"\|"untracked"\|"renamed", rendered as an A/M/D/U/R marker.
Pitfalls
- Selection and expansion match composed paths such as
src/components/button.tsx, notname.selectedPathand the path returned byonSelectuse the same rules. - Passing
expandedPathsenables controlled mode and requiresonExpandedChangeto write changes back. Otherwise,defaultExpandedPathsand folder-leveldefaultExpandedinitialize uncontrolled state. statusis meaningful only for files, whilechildrenis meaningful only for folders.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable