資料密度與操作

表格功能越多,不代表越好用。

閱讀季度費用、管理成員與編輯二維排程是三種任務。只有真實需求出現時,才增加排序、篩選、選取與 Grid 鍵盤模型。

選擇流程

從最簡單的 Table 開始加責任。

  1. 只閱讀與比較?Table。
  2. 要排序、篩選或選取?Data Table。
  3. 需要二維儲存格互動?Grid。
  4. 選取後執行同一操作?Bulk Action Toolbar。

差異對照

複雜度要和任務一起增加。

判斷面向Table表格Data Table資料表Grid互動網格Bulk Action Toolbar批次操作工具列
主要任務閱讀與比較搜尋、排序、篩選與管理二維鍵盤操作或編輯對多筆資料執行同一動作
必要互動通常沒有依任務加入方向鍵與儲存格焦點選取後才出現
複雜度成本中至高依附 Data Table
手機策略保留必要欄位重排欄位與列操作常需替代檢視保持選取數量與主要動作

示範情境

先選兩位成員,再談批次停用。

Bulk Action Toolbar 不該永遠佔著頁面;只有列選取成立後才出現,並持續告訴使用者目前選了幾筆。

查看 Data Table Demo →