點擊上方藍字關注我們

簡介

在前端開發中，表格一直都是最復雜的組件之一。表格不僅要支持豐富的操作(排序、過濾、搜索、分頁、自定義列等)，還要有非常好的性能以展示大量數據。很多組件庫(例如 fusion design，ant design)提供了功能豐富的表格組件，這些表格一開始沒有過多考慮性能問題，往往是后面遇到性能瓶頸問題時才考慮添加虛擬滾動特性，但此時過多的表格功能使得性能優化的難度非常高。

ali-react-table (https://github.com/alibaba/ali-react-table)是我們小組開發的高性能 React 表格組件，我們在一開始就考慮了表格的性能，為其添加了內置的虛擬滾動特性。虛擬滾動會在數據量較大時自動開啟，輕松展示一萬行/一萬列以上的數據。虛擬滾動是表格的核心特性之一，在為表格實現新功能時，我們會確保新功能不與虛擬滾動沖突。

表格組件的基本用法和 antd/fusion 表格類似，傳入 dataSource 來指定表格的數據源，傳入 columns 來對表格的列進行配置。

import { BaseTable } from 'ali-react-table'function BasicUsage() { const dataSource = [ { prov: '湖北省', confirm: 54406, cure: 4793, dead: 1457, t: '2020-02-15 19:52:02' }, { prov: '廣東省', confirm: 1294, cure: 409, dead: 2, t: '2020-02-15 19:52:02' }, { prov: '河南省', confirm: 1212, cure: 390, dead: 13, t: '2020-02-15 19:52:02' }, { prov: '浙江省', confirm: 1162, cure: 428, dead: 0, t: '2020-02-15 19:52:02' }, { prov: '湖南省', confirm: 1001, cure: 417, dead: 2, t: '2020-02-15 19:52:02' }, ] const columns = [ { code: 'prov', name: '省份', width: 150 }, { code: 'confirm', name: '確診', width: 100, align: 'right' }, { code: 'cure', name: '治愈', width: 100, align: 'right' }, { code: 'dead', name: '死亡', width: 100, align: 'right' }, { code: 't', name: '更新時間', width: 180 }, ] return <BaseTable dataSource={dataSource} columns={columns} />}

虛擬滾動

當數據量較大時，表格會自動開啟虛擬滾動。

↑ 通過 dataSource 傳入一個長度超過 5 萬的數組，表格依舊流暢。當表格向下滾動時，BaseTable 默認會為表頭設置 style.position=sticky，表頭將會吸附在頁面或滾動容器的頂部。

鎖列與單元格合并

在維度、指標數量較多情況下，設置 column.lock=true 可以在表格左側或右側鎖定指定的列，提升交互體驗。

在更復雜的情況下，可以設置 column.getSpanRect 來指定單元格的合并情況；column.getSpanRect 返回每個單元格被合并之后的矩形位置，在渲染表格時，BaseTable 會根據單元格的位置和對應的 spanRect，來為單元格動態設置 rowSpan/colSpan，使得在虛擬滾動場景下合并單元格依然可以生效。

基于這些實用的表格特性，我們可以在表格上進行深度定制與二次開發，實現下鉆、右鍵菜單、交叉表/透視表、收攏/展開等功能。同時表格內置的虛擬滾動保證了大數據量下表格仍具有很好的性能，上層使用者不需要擔心性能問題。

下圖是基于 BaseTable 的一個簡單的透視表 demo(在線 demo[1])：

表格功能拓展

BaseTable 是一個相對底層的 React 組件，僅提供了基本的表格渲染功能。為了方便對表格進行功能拓展，我們為 BaseTable 設計了一個簡單的拓展方案，然后我們基于該方案實現了一些常見的表格功能，包括排序、樹狀模式、列高亮等。

我們知道?BaseTable? 基于 dataSource 和 columns 來渲染表格，按照一定的規則對 dataSource/columns 進行包裝和轉換，可以改變 dataSource/columns 的值或渲染輸出，實現特定的功能。

type Transform = (input: T) => Ttype TableTransform = Transform columns: ArtTableColumn[] dataSource: any[]}>

TableTransform(后面簡稱 transform)是一個純函數，輸入列配置 + 數據源，輸出一份新的列配置 + 數據源。每一個 transform 通過對 dataSource/columns 的包裝和轉換以實現一個新的特性。注意到每個 transform 的輸入和輸出的類型相同，我們可以將多個 transform 串聯以實現不同功能的組合。

ali-react-table/biz 提供了一些常見表格功能的 transform，下面以「排序和列高亮兩個功能的組合」為例介紹 transform 的使用方式

對應的代碼如下：

import { ArtColumn, BaseTable } from 'ali-react-table'import { applyTransforms, commonTransforms } from 'ali-react-table/biz'import React, { useState } from 'react'function SingleSortExample() { const { isLoading, dataSource } = useProvinceDataSource() const columns = [ // 通過 features.sortable 來標記 可排序的列 { code: 'provinceName', name: '省份', features: { sortable: true } }, { code: 'confirmedCount', name: '確診', features: { sortable: true } }, { code: 'curedCount', name: '治愈', features: { sortable: true } }, { code: 'deadCount', name: '死亡', features: { sortable: true } }, { code: 'updateTime', name: '最后更新時間' }, ] // transform 都是純函數，所需的額外狀態需要上層提供，這里使用 useState 來快速創建狀態 const [hoverColIndex, onChangeHoverColIndex] = useState(-1) const [sorts, onChangeSorts] = useState([{ code: 'deadCount', order: 'desc' }]) const renderData = applyTransforms( { columns, dataSource }, commonTransforms.columnHover({ hoverColIndex, onChangeHoverColIndex }), // 設置 sort.mode=multiple 可以使用多列排序 commonTransforms.sort({ mode: 'single', sorts, onChangeSorts }), ) // applyTransform 是使用多個 transform 的輔助函數 // 上面的代碼相當于： // input = { dataSource, columns } // t1 = commonTransforms.columnHover(...) // t2 = commonTransforms.sort(...) // renderData = t2(t1(input)) return <BaseTable dataSource={renderData.dataSource} columns={renderData.columns} />}

相比于原來的「直接通過 props 設置表格配置」的方式，transform 使用起來更麻煩一些，但它的優勢也非常明顯：

• 對于用戶：

  • 按需引入 transform，多個 transform 可組合性較好，降低多個功能之間的沖突概率

  • 因為原來表格封裝了所有功能，多個功能之間非常容易發生沖突

  • 表格功能不滿足業務需求時，可自行實現自定義 transform，與 commonTransforms 配合使用

• 對于表格組件維護者(也就是我)：拓展功能所需的狀態由上層提供，表格內部的狀態數量可控，降低表格性能優化的難度，表格組件維護起來比較容易

同時這也帶來了更清晰的表格功能設計分層：BaseTable 提供靈活的 column 配置來提供高可定制性，上層實現各類 transform 實現拓展功能。表格的基本功能由?ali-react-table?提供，而拓展功能則需要從?ali-react-table/biz?引入。?下表展示了 BaseTable 中列配置對象的結構，可以看到上層可以定制列標題、寬度、鎖列、單元格等內容，幾乎涵蓋了列的每個方面。

ali-react-table/biz 還通過 commonTransform 提供了樹狀模式、自定義列、表格操作欄等功能，更多的功能也正在不斷開發中，將通過統一的拓展方式進行提供。

↑ 左：樹狀模式；右：自定義列

當遇到一些不常見的表格需求時，我們可以通過手動定制列的 render/getCellProps 來滿足定制需求：

交叉表

除了常見的行列數據，展示交叉數據或透視數據也是常見的表格需求。前述的 BaseTable 只能夠展示行列異構的數據：行(dataSource)負責提供數據，列(columns)控制表格如何展現；而交叉/透視數據的行表頭和列表頭是同構的(行表頭和列表頭都是樹狀結構)。為了方便展示行列同構數據，我們基于 BaseTable ?實現了一個簡單的交叉表格(CrossTable)，專門應對「行表頭和列表頭都是一棵樹」 的場景。

ali-react-table/pivot 提供的交叉表(CrossTable)也是一個較為底層的 React 組件，僅提供表格結構的渲染能力。CrossTable 的渲染過程可認為是：左樹 + 上樹 => 表格。大致使用方式如下：

// 推薦為交叉表設置一個默認列寬 defaultColumnWidth={100} // leftTree, topTree 均為 { key, value, children } 的嵌套樹狀結構 leftTree={leftTree} topTree={topTree} getValue={(leftNode, topNode) => { // 自定義的取數邏輯，針對每個單元格都會調用一次 // leftNode 表示當前單元格對應的左側樹節點，topNode 是對應的上方樹節點 }} render={(value, leftNode, topNode) => { // 可選的 自定義的渲染邏輯 return value }}/>

CrossTable 這里就不再過多介紹了，表格的效果可見本文上面透視表 demo 動圖。ali-react-table/pivot 還提供了一些透視數據處理方法，方便在前端進行一些簡單的數據聚合運算并將其展示到表格上，具體可見?相關文檔[2]。

小結

ali-react-table 的主要定位是提供高性能、高可定制性的 React 表格，方便上層進行封裝和定制并接入到不同的系統和業務中。ali-react-table 沒有綁定特定的 React 組件庫，僅依賴了一些工具類庫(例如 rxjs、styled-components、classnames)，配合 webpack/rollup 的 tree shaking 特性，引入 ?ali-react-table 所產生的額外 JS 體積非常有限。

除了上面介紹的一些功能之外，ali-react-table 還提供了許多實用功能，包括表格操作欄、Excel 導出功能等(部分拓展功能需要安裝 fusion 組件庫)。組件已經在 GitHub 上開源[3]，后續我們也會不斷更新和維護 ali-react-table 的文檔，添加更多的代碼示例，歡迎大家使用~

References

[1] https://ali-react-table.js.org/?path=/story/%E7%A4%BA%E4%BE%8B-%E5%9F%BA%E4%BA%8E-crosstable-%E7%9A%84%E9%80%8F%E8%A7%86%E8%A1%A8--pivot-table-based-on-cross-table

[2]?https://ali-react-table.js.org/?path=/docs/%E4%BA%A4%E5%8F%89%E4%B8%8E%E9%80%8F%E8%A7%86-%E4%BA%A4%E5%8F%89%E8%A1%A8-%E6%96%87%E6%A1%A3--page

[3]?https://github.com/alibaba/ali-react-table

寫在最后

方凳雅集是由阿里巴巴B系6大BU(1688，ICBU，零售通，AE，企業金融，考拉)共同維護的公眾號奧，我們會定期發送優質好文，歡迎掃碼關注

求關注

求轉發

總結

以上是生活随笔為你收集整理的antd table设置表格一个单元格的字体颜色_alireacttable：高性能 React 表格组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。