在日常開發中，特別是內部使用的后台系統時，我們常常會需要用表格來展示數據，同時提供一些操作用於操作表格內的數據。簡單的表格直接用原生 HTML table 就好，但如果要在 React 中實現一個功能豐富的表格，其實是非常不容易的。
選好一個表格庫可以大大地簡化我們的開發工作，這篇文章里我們就來詳細看一看 React 里最好的表格庫有哪些，怎樣挑選才能滿足你的需求。
如何挑選 React 表格組件庫
react 的表格庫非常多，但是多數庫的質量其實並不好。在原生 HTML 中已經有 table 的 tag 了，那么在 React 中為什么不能直接用呢？
答案是，通常情況下，表格里需要實現的功能遠超過原生的 <table> 中提供的功能，因此在各個 UI 庫、開源框架內大家都紛紛重新設計了表格。甚至在這些表格庫內，你都不一定能看到 table 這個標簽的影子。
那么，如何挑選一個好用的 React Table 庫？
首先最重要的是明確你的用戶需要哪些功能，比如說，用戶如果需要單次加載超過一萬行數據，那么幾乎一定需要用虛擬化(virtualization)過的表格，或者至少是能夠加上虛擬化的表格。再比如，如果你的用戶需要按列排序、交換列順序等，那么對應的表格組件也必須支持這些功能。
常見的表格功能包括
- 行選擇
- 點擊觸發操作(比如加載數據)
- 導出數據
- 按列過濾
- 搜索
- 綁定和展示數據(比如 http 查詢的結果數據)
- 調整樣式，如列顏色等
- 重命名列
- 調整列順序
- 分頁、導航
等等
不幸的是，找到一個支持所有功能的組件庫其實是非常不容易的。我們建議如果你不確定，可以在本文介紹的這些庫中，快速找幾個嘗試挑一個覆蓋最全的。
當然，如果你在開發一個內部系統，但這個內部系統本身只是為了鋪助公司的業務而不是公司的業務本身，那么也大可直接嘗試一下使用卡拉雲，內置功能極為豐富的表格，與其它豐富的組件一起，可以讓你極快搭建起一個好用的后台系統。上述提到的常見功能，卡拉雲內置的表格全部原生支持。
在下文中，我們將分別介紹幾款還不錯的 React 表格框架。
AntD Table
AntD 是螞蟻金服開源的一套前端框架，其中包含了一個表格組件。這個表格組件本身是在 rc-table的基礎上開發的，而 rc-table 的維持者也多數是 AntD 的幾位維護者，比如 afc163 和 yiminghe 等。
AntD 本身的代碼質量很高，使用它的好處非常明顯，包括
- 豐富的功能
AntD 表格的功能非常豐富，包括按列升降排序、行過濾，緊湊顯示、固定表頭等等。在 AntD 的文檔中，單是可配置項就有幾十個，可想而知其功能豐富程度。
- 較為清晰的文檔
AntD 表格的文檔也很清晰，除了一些細節的選項外，其它多數選項都有明確的說明，幫助快速開發。
- 強大的(中文)社區
AntD 已經是 GitHub 上星最多的項目之一了，同時不光星多，它的使用也非常廣泛。這樣的社區會加速組件本身的發展，因為如果有問題的時候，你總是可以得到社區的一些支持和幫助。
當然，使用 AntD Table 的缺點也很明顯。由於它的復雜性，現在想要在上面添加功能需要非常扎實的前端功底。
同時，AntD 本身是用 LESS 來調整樣式，因此如果你想用 CSS/SCSS 來調整表格的樣式，將會比較痛苦。但是需要指出的是，這並不是 AntD 本身的問題，使用前端框架來適應特定的需求本身就會遇到類似的情況。
另一個問題是，如果你的項目其它組件並沒有在使用 AntD 的話，增加 AntD Table 將會導入整個 UI 庫，顯著地把 bundle 尺寸變大一個量級。當然，有一些方法可以繞過去，但畢竟需要花時間和精力來調整。如果你的項目中其它組件不需要使用 Ant 中的組件，那么可以考慮直接使用 rc-table，這也是 AntD 的基礎組件。
綜上，AntD 的表格組件是個較為不錯的選擇，如果需要單獨使用 table，也可以直接使用 rc-table
React Table
React Table 是一個比較特別的存在。它可以說是所有表格組件中的 F-22 戰斗機，包含天量功能，可以幾乎定制無限復雜的表格需求。GitHub、亞馬遜、微軟、Uber 的大量前端項目都在大量使用 React Table。
它的作者也是個傳奇人物，不光創作了 React Table，還有 React Query, React Charts 等等膾炙人口的超級開源項目。
React Table 與其它所有的組件庫的設計理念都不同，它本身並不包含任何樣式，相反它由一大堆 React Hook 組成。這些 Hook 提供了表格中常見需要的一些功能，比如行列合並、列寬調整、選擇行選擇列等等。
由於它的設計思路是只負責邏輯，所以你必須有較強的前端能力(主要是 CSS)和對 Hook 較深的掌握，才能比較熟練地用起來。但是話雖如此，也正因為 React Table 本身只專注邏輯，它才可以把如此多表格操作的邏輯實現得如此淋漓盡致，比起其它組件庫它的功能豐富得一騎絕塵。因此，對於較大型或者較復雜的項目，React Table 對開發者的吸引力極大。
目前 React Table 的正式版本是第 7 版，第 8 版正在 alpha 測試中。
如果你的項目的需求復雜，同時你對 hook 的理解和掌握較好，那我們建議摒棄其它庫，直接使用 React Table。當然，卡拉雲的表格庫是基於 React Table 開發的，因此懶得自己寫樣式的話，你也可以直接用卡拉雲。
卡拉雲的表格組件
在卡拉雲中，我們內置了表格組件。從組件列表中拖動一個表格，就可以創建好一個表格，同時開始進行詳細的表格設置。比如在下圖中，我們將某一列本來數據是圖片 URL 的列，直接展示出圖片。
同時在左側的設置欄中，也可以直接實現隱藏列、交換列順序、調整列背景色以及調整表格式樣等等。上文提到的表格功能中，以下全部可以直接通過簡單配置實現
- 行選擇
- 點擊觸發操作(比如加載數據)
- 導出數據
- 按列過濾
- 搜索
- 綁定和展示數據(比如 http 查詢的結果數據)
- 調整樣式，如列顏色等
- 重命名列
- 調整列順序
- 分頁、導航
甚至一些需要后端配合的高級功能，比如服務端翻頁等等。關於卡拉雲表格的文檔請參考卡拉雲表格，如果對卡拉雲感興趣也歡迎點這里免費試用。
RC-Table
RC-Table是一個表格組件，值得注意的是它是上文介紹過的 AntD Table 組件的基礎。因此，它的功能是 AntD 表格的一個子集，但是它也非常完整地實現了表格中常見的一些操作。
注意如果你需要一些復雜的操作，比如行過濾等，則需要自己添加邏輯。RC Table 更像一把瑞士軍刀，並沒有全包全攬的功能，但是作為表格組件處理好了行、列、Header 之間的關系。
RC Table 非常適用於你只需要用一個表格組件，但並不需要整個 Ant 組件全家桶的情況。
Material UI Table
Material UI 的大名就不多說了，在國內最流行的框架是 Ant，但在國外最流行的當屬 Material UI。
Material UI 中的表格功能豐富度適中，可以滿足一些常見的需要，比如
- 排序
- 選擇單行或多行
- 翻頁
- 虛擬化表格
但對於類似列寬設置、自定義、重命名列之類功能，則需要自己二次開發。
總體來說 Material UI 中的 Table 算是一個中規中矩的存在，如果你不是特別喜歡扁平化或本身在使用 MUI 的話，我們還是建議直接使用卡拉雲或者 AntD 中的表格。
Ali-react-table
Ali-react-table是專為高性能場景下設計的表格組件，它的設計初衷就是內嵌虛擬化，這樣可以最大限度保證在加載了大量數據時，表格的性能仍然足夠好。
如果你的使用場景是單次會加載大量數據(超過1萬行)且不做翻頁，同時還要保證用戶的使用時不卡頓，那么可以考慮 ali-react-table。但除此之外，這個庫的功能沒有非常豐富，所以這樣的“核彈級”性能對於多數開發者來說，可能並不是個硬需求。
另外需要考慮的一點是，這個項目距上次更新已經過去了一年多，因此如果需要考慮維護社區活躍度的話，可能需要考慮上文其它幾個庫。
React Virtualized
嚴格來講，React Virtualized並不能算是一個表格庫，相反，它是用來解決數據量大時虛擬化顯示表格中數據用的專門的庫。
當然在需要虛擬化的上下文中，最常見的無非就是大列表和大表格了，因此 React Virtualized 也包了一層表格的組件。與 Ali-react-table 類似，如果你的主要考慮不是性能，那么我會建議你跳過 react-virtualized，直接使用本文前三個組件中的一個即可。
總結
本文介紹了 React Table, AntD Table，卡拉雲表格，Material UI 表格，Ali-react-table 和 React Virtualized 等幾個 UI 庫中的表格組件，分別介紹了它們的優缺點，希望對你挑選表格組件有幫助。如果你覺得有用，請轉發分享本文，或在你的博客中鏈回本文。