如何實現 React Table 固定列、固定表頭

lijy91 發布于2019-08-26 10:34 / 1886人閱讀

摘要：所以對的寬度做了計算優化，達到自適應內容寬度，超出一定寬度會自動換行這樣的目的。從而讓開發更加專注于業務，而不是信息。

前段時間在研究并實現了如何實現表格的固定列（fixed column）功能，這里記錄了思路和細節
表格控件比較復雜，應用場景也很多，需要各種數據展示、統計、操作等特性

原文有視頻演示哦

live demo uke-dashboard https://admin.ukelli.com/ ( 用戶名 admin, 密碼 123 ). 介紹一下 uke-dashboard 是一套前后端分離模式的管理后臺前端框架，已經經過了實際項目的驗證，快速應對項目需求。

Ukelli-UI Table 的文檔，此 Table 已經在 ukelli-ui 中實現，還有更多表格功能

期望效果

固定表頭

左右各有一個固定的列

自動計算表格 cell 的寬度和高度，并且不能超過一定的長度，并且表頭需要和表體同步寬度，不需要在配置中傳入 UI 相關的寬度信息

實現細節

需要分別渲染 3 個表格

mainTable 主體表格

leftFixedTable 左邊的固定列表格

rightFixedTable 右邊固定列表格

監聽 mainTable 和 fixedTable 的 scroll 事件，同步所有的表格的列的顯示區域

向所有的行（ row ）元素 tr 監聽 mouseenter 事件，確保鼠標移過對應的行所有的表格都有一致的表現

記錄第一列的所有的格子（ td ）的高度信息，用于給固定表格的格子高度

記錄第一行的格子的寬度信息，給 TableHeader 同步 TableBody 的寬度信息

表格 Column 的寬度

目前主流的 Table 組件實現固定 column 時需要指定 column 的寬度，但是這樣會定義更多 UI 相關的信息，例如 antd

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    width: 150, // 有 UI 相關的定義
  },
  {
    title: "Age",
    dataIndex: "age",
    width: 150, // 有 UI 相關的定義
  },
  {
    title: "Address",
    dataIndex: "address",
  },
];

...

這樣我認為會有一定問題，因為根據以往的項目來看，這樣會「分散開發時的注意力」，就算反復調試的 width 也未必準確，畢竟內容是不確定的。

所以 uke-table 對 column 的寬度做了計算優化，達到「column 自適應內容寬度」，超出一定寬度會自動換行這樣的目的。 從而讓開發更加專注于業務，而不是 UI 信息。

uke-table 文檔: https://ui.ukelli.com/#/Table

云服務器 GPU云服務器固定表頭表格固定表頭固定表頭html asp 表頭固定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106387.html

jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

soasme 2019-08-02 16:07 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

everfly 2019-08-23 14:05 評論0 收藏0
jsu系列之表格組件 ---- jsu.Table

摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...

張巨偉 2019-08-30 15:54 評論0 收藏0
bootstrap-table實現表頭固定以及列固定

摘要：之前使用寫了一個報表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數據，于是，我開始了苦逼的研究起來，畢竟我是個后端啊，對于前端的樣式問題，特別是小功能，煩的一批這里就記錄下我的研究成果一引入和引入之前使用bootstrap寫了一個報表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數據，于是，我開始了苦逼的研...

B0B0 2019-08-23 15:42 評論0 收藏0
今天，你的瀏覽器 “滾動” 了嗎？

摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。今天，你的瀏覽器滾動了嗎？序在 Web 頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經常...

ad6623 2019-08-29 13:09 評論0 收藏0