Table 表格

2022-05-10, Helen

# 標題 內容
1 Status 數據展示
2 Excel 欄位寬度
3 Ant Design https://ant.design/components/table-cn/
4 Web #
5 App #

定義

展示列表內容。表格內可放入文字、標籤、Icon、段落、數字、圖片⋯⋯等等。

何時使用

有大量結構化的數據需要呈現時,或當有需要對數據進行排序、搜索、分頁、自定義操作等複雜行為時,可使用表格元件。

位置

位於卡片內。

規則

1. 基本上以以下長度規範為標準,若遇長度不足頁面時,則調整資料量最不固定者(例:名稱、email、地址)的長度,以補足長度。
2. 以使用者可以第一屏看見所有資料、不需左右拉動拉 bar 為目標,可斟酌調整表格長度。
3. 可用升降冪的欄位類型:日期、時間、狀態;金額、數量、數字;編號、號碼、類別。

標題列名稱 對齊方式 長度(px) 是否可排序
編號 置中 160
序號 置中 100
金額 置右 110
百分比 置右 100
數量 置右 80
電話 置左 100
手機 置左 100
傳真 置左 90
Email 置左 100
名稱 置左 150
人名 置左 80
地址 置左 180
類別、分類、類型 置左 90
文字、備註、註記 置左 150
規格、規格類型 置左 90
規格項目 置左 150
狀態 置中 100
動作 置中 動作按鈕用原本計算的widthSize
日期 置中 120
時間 置中 100
日期+時間 置中 130
日期+時間(range) 置中 180
圖片 置中 60
勾選框 置中 60
啟用/停用開關(Switch) 置中 100