关于react.js:最好的-6-个-React-Table-组件详细亲测推荐

本文首发卡拉云技术博客：《最好的 6 个 React Table 组件具体亲测举荐》

在日常开发中，特地是外部应用的后盾零碎时，咱们经常会须要用表格来展现数据，同时提供一些操作用于操作表格内的数据。简略的表格间接用原生 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 自身的代码品质很高，应用它的益处非常明显，包含

1. 丰盛的性能

AntD 表格的性能十分丰盛，包含按列升降排序、行过滤，紧凑显示、固定表头等等。在 AntD 的文档中，单是可配置项就有几十个，可想而知其功能丰富水平。

1. 较为清晰的文档

AntD 表格的文档也很清晰，除了一些细节的选项外，其它少数选项都有明确的阐明，帮忙疾速开发。

1. 弱小的 (中文) 社区

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 库中的表格组件，别离介绍了它们的优缺点，心愿对你筛选表格组件有帮忙。如果你感觉有用，请转发分享本文，或在你的博客中链回本文。

如果你对卡拉云感兴趣，欢送试用或者持续关注咱们的技术博客