這幾天在研究如何實(shí)現(xiàn)表格的固定列（fixed column）功能，這里記錄了思路和細(xì)節(jié)。
表格控件比較復(fù)雜，應(yīng)用場景也很多，各種數(shù)據(jù)展示、統(tǒng)計(jì)、操作，管理應(yīng)用常用的組件之一。

Ukelli-UI Table 是為了應(yīng)對以下應(yīng)用場景：

1. 友好的展示數(shù)據(jù)
2. 友好的數(shù)據(jù)交互
3. 友好的開發(fā)體驗(yàn)
4. 業(yè)務(wù)邏輯和 UI 分離

期望效果

1. 固定表頭
2. 左右各有一個(gè)固定的列
3. 自動計(jì)算表格 cell 的寬度和高度，并且不能超過一定的長度，并且表頭需要和表體同步寬度，不需要在配置中傳入 UI 相關(guān)的寬度信息

實(shí)現(xiàn)細(xì)節(jié)

1. 分為 3 個(gè)表格
   1. mainTable 主體表格
   2. leftFixedTable 左邊的固定列表格
   3. rightFixedTable 右邊固定列表格
2. 監(jiān)聽 mainTable 和 fixedTable 的 scroll 事件，同步所有的表格的列的顯示區(qū)域
3. 向所有的行（ row）元素 tr 監(jiān)聽 mouseenter 事件，確保鼠標(biāo)移過對應(yīng)的行所有的表格都有一致的表現(xiàn)
4. 記錄第一列的所有的格子 （ td ）的高度信息，用于給固定表格的格子高度
5. 記錄第一行的格子的寬度信息，給 TableHeader 同步 TableBody 的寬度信息

目前主流的 Table 組件都需要設(shè)置列的寬度，最開始 ukelli-ui 的表格控件也是如此實(shí)現(xiàn)的，但是后面發(fā)現(xiàn)這樣有兩個(gè)問題

1. 定義渲染配置的時(shí)候需要額外的 UI 的信息，即 width，這樣不夠純粹
2. 在開發(fā)的時(shí)候需要花很多精力在格子寬度上，要做到每一個(gè)表頭都不會過長而換行，影響排版

參考:

• Ukelli-UI/Table https://ui.ukelli.com/#/Table
• 原文地址 https://ukelli.com/2019/03/24/react-table/