File TreeFolder - Ant Design X

When to use

Display hierarchical file/folder structure
File selection and expand/collapse features needed

Code examples

API

Common props ref: Common props

FolderProps

Property	Description	Type	Default	Version
treeData	File tree data	FolderTreeData[]	`[]`	-
selectable	Whether to enable selection functionality	boolean	`true`	-
selectedFile	Selected file paths (controlled)	string[]	-	-
defaultSelectedFile	Default selected file paths	string[]	`[]`	-
onSelectedFileChange	Callback when file selection changes	(file: { path: string[]; name?: string; content?: string }) => void	-	-
directoryTreeWith	Directory tree width	number \| string	`278`	-
emptyRender	Content to display when empty	React.ReactNode \| (() => React.ReactNode)	-	-
previewRender	Custom file preview content	React.ReactNode \| ((file: { content?: string; path: string[]; title?: React.ReactNode; language: string }, info: { originNode: React.ReactNode }) => React.ReactNode)	-	-
expandedPaths	Array of expanded node paths (controlled)	string[]	-	-
defaultExpandedPaths	Array of default expanded node paths	string[]	-	-
defaultExpandAll	Whether to expand all nodes by default	boolean	`true`	-
onExpandedPathsChange	Callback when expand/collapse changes	(paths: string[]) => void	-	-
fileContentService	File content service	FileContentService	-	-
onFileClick	File click event	(filePath: string, content?: string) => void	-	-
onFolderClick	Folder click event	(folderPath: string) => void	-	-
directoryTitle	Directory tree title	React.ReactNode \| (() => React.ReactNode)	-	-
previewTitle	File preview title	string \| (({ title, path, content }: { title: string; path: string[]; content: string }) => React.ReactNode)	-	-
directoryIcons	Custom icon configuration	Record<'directory' \| string, React.ReactNode \| (() => React.ReactNode)>	-	-

FolderTreeData

Property	Description	Type	Default	Version
title	Display name	string	-	-
path	File path	string	-	-
content	File content (optional)	string	-	-
children	Sub-items (valid only for folder type)	FolderTreeData[]	-	-

FileContentService

File content service interface, used for dynamically loading file content.

typescript

interface FileContentService {
  loadFileContent(filePath: string): Promise<string>;
}

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
colorBgDirectory	Background color of directory	string	rgba(0,0,0,0.04)

Global TokenHow to use?