資料呈現與階層
有縮排，不代表你需要 Tree View。
部門、專案、任務常常看起來都「有層級」，但使用者的工作不一樣。若要展開真正的父子節點，才是 Tree View；只是在讀文件大綱，用 Nested List 更簡單。資料還要比較狀態與日期時才考慮 Treegrid；單純想看某列補充資訊，Expandable Row 就夠了。
選型流程
先確認：展開後看到的是孩子，還是同一筆資料的明細？
- 資料真的有可繼續展開的父子關係嗎？是：先考慮 Tree View；沒有互動需求時，Nested List 更誠實。
- 使用者還要逐列比對多個欄位嗎？是：才考慮 Treegrid，並把鍵盤、Focus 與手機版列為實作範圍。
- 展開的是同一筆資料的補充內容嗎？是：使用 Expandable Row；它不是孩子節點，也不需要做成樹。
- 每一列都得展開才看得懂嗎？先重整表格欄位、做詳細頁或調整資訊架構，別用收合把必要資訊藏起來。
比較表
四種做法的差異，在資料關係與操作成本。
點選元件名稱可查看各自的 LumenDesk Demo、AI Prompt 與驗收清單。
| 比較面向 | Tree View｜樹狀檢視 | Nested List｜巢狀清單 | Treegrid｜樹狀表格 | Expandable Row｜可展開列 |
|---|---|---|---|---|
| 主要回答的問題 | 怎麼瀏覽與選取真正的父子節點？ | 怎麼閱讀已經展開的內容層級？ | 怎麼同時看階層與多欄資料？ | 怎麼查看同一筆平面資料的補充明細？ |
| 資料關係 | 父節點與子節點，可繼續展開 | 靜態內容層級 | 父列與子列，加上多個資料欄位 | 平面資料列與它自己的補充內容 |
| 互動重點 | 展開、收合、焦點走訪、選取 | 通常沒有特殊互動；連結依原生行為 | 列／儲存格焦點、展開、欄位比較 | 一顆按鈕打開或收合該列明細 |
| 適合資料 | 資料夾、部門、分類、專案樹 | 文件大綱、固定分類、說明內容 | 專案、訊息串、組織資料且需看狀態或日期 | 任務、訂單、申請等平面清單 |
| 不要拿來取代 | 靜態清單或多欄資料表 | 需要大量展開與選取的樹 | 只需名稱層級的 Tree View | 多層父子資料或每列都必須常態顯示的內容 |
| 鍵盤與手機風險 | 需有完整樹狀方向鍵模型與 Focus | 用原生清單／連結即可；注意縮排換行 | 成本最高，需完整焦點模型與局部表格捲動策略 | 按鈕同步 aria-expanded；明細要在窄螢幕自然換行 |
這組結論
先描述資料怎麼關聯，再指定元件；「做成樹狀」不是完整規格。
在 LumenDesk 情境裡，部門與專案的逐層瀏覽使用 Tree View；文件裡已展開的資訊架構使用 Nested List；要一起比較負責人、狀態與截止日才用 Treegrid；任務表的檢核補充資料則用 Expandable Row。四者可以長得相近，但責任不能混用。
操作 Tree View Demo →