ツリービューTreeView
Experimental

ファイル、設定、階層カテゴリなどの親子構造を開閉できるツリーとして表示します。

状態とバリエーション

非制御で使う場合は defaultExpanded に最初から開くノードIDを渡します。

ファイルブラウザーや設定ナビでは selectedId を外側の状態と同期します。

設定やカテゴリのように文字だけで十分に判別できる階層では icon を省略できます。

フォルダー、コード、画像など種類が混ざるツリーでは icon で判別性を上げます。

件数やファイルサイズは renderNodeMeta、編集やメニューは renderNodeActions で上位の FileTree から差し込みます。

表は横にスクロールできます

プロパティ	型	初期値	説明
nodes	TreeNode[]	-	表示する階層データです。各ノードは id、label、任意の icon、children を持てます。
expanded	Set<string>	-	開いているノードIDの集合です。指定すると開閉状態を制御できます。
onExpandedChange	(expanded: Set<string>) => void	-	開閉状態が変わったときに呼び出されます。
defaultExpanded	string[]	-	非制御で使う場合の初期展開ノードIDです。
selectedId	string	-	選択中のノードIDです。
selectedIds	Iterable<string>	-	複数の選択状態を表示する場合のノードID集合です。選択のルールは FileTree など上位のコンポーネントで扱います。
selectionMode	"single" \| "multiple" \| "none"	"single"	選択状態の表示と ARIA 属性の意味付けを指定します。
onSelectedIdChange	(id: string) => void	-	ノードが選択されたときに呼び出されます。
renderNodeMeta	(node: TreeNode) => React.ReactNode	-	行のラベル後に件数、容量、状態などの補足情報を表示するための描画関数です。
renderNodeActions	(node: TreeNode) => React.ReactNode	-	行末に編集、削除、メニューなどの操作を表示するための描画関数です。
getNodeRowProps	(node: TreeNode) => HTMLAttributes<HTMLDivElement>	-	行のラッパーにドラッグ&ドロップや計測用の属性を追加します。
className	string	-	必要に応じて外側に追加するクラスです。