組件概述
Data Table 是資料展示表格組件,用於结构化資料呈現,支援多行列、表頭等設定,適合需要清晰對比數據、規格清單的場景。
適用場景
1. 產品規格參數對照表
2. 服務方案、價格比較表
3. 課程時程、清單資訊展示
4. 企業資料、統計數據簡表
不建議使用場景
1. 純視覺排版、無需行列對齊的內容:優先使用網格組件
2. 超大規模資料(數百行以上):建議透過【代碼】組件實現,避免頁面載入效能問題
3. 單純文字敘述,不需要欄位對比:使用文本組件
組件使用
1、組件默認有4行表格內容,可以選中【網格容器】層級新增或刪除

2、選中【網格容器】在Class的【網格】可以調整列數。在【Table Header】層級也要同步調整列數(注意:如果要表格統一列數,建議先設置好一個網格容器的樣式,再複製替換內容使用)

3、組件初始默認有20px的【外部邊距】,不需要可以刪除

基礎配置
Table Header:作為表格的頭部,在PC端默認滾動置頂
注意:
1、如果有固定置頂的頭部,則需要調整【Table Header】的【位置】➡️【偏移】上的距離,這裡【上】的數值取決於頭部的高度,避免與固定置頂頭部重疊。
2、如果在Table Wrap組件前面有設置過【圖層堆疊層級】,則需要調整【Table Header】的【圖層堆疊層級】,默認數值為10(注意:數值越高,層級越高,則顯示越前面)

3、在568px橫版移動端中,【Table Header】會默認取消固定置頂,Table Wrap整體收縮成固定高度的可拖拽樣式。
注意:如果在移動端要延續PC端的樣式,
① 可以將【Table Body】的【尺寸】➡️【最大高度】設置成100%;
② 再將【Table】的【尺寸】➡️【最小寬度】設置成100%;
③ 最後將【Table Wrap】的【常規】➡️【超出範圍】的水平超出設置成【Visible】。(非特殊排版需求不建議使用)。

網格容器:作為表格的【1行】