最好的 6 个 React Table 组件详细亲测推荐

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

在日常开发中，特别是内部使用的后台系统时，我们常常会需要用表格来展示数据，同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好，但如果要在 React 中实现一个功能丰富的表格，其实是非常不容易的。

选好一个表格库可以大大地简化我们的开发工作，这篇文章里我们就来详细看一看 React 里最好的表格库有哪些，怎样挑选才能满足你的需求。

如何挑选 React 表格组件库

react 的表格库非常多，但是多数库的质量其实并不好。在原生 HTML 中已经有 table 的 tag 了，那么在 React 中为什么不能直接用呢？

答案是，通常情况下，表格里需要实现的功能远超过原生的 <table> 中提供的功能，因此在各个 UI 库、开源框架内大家都纷纷重新设计了表格。甚至在这些表格库内，你都不一定能看到 table 这个标签的影子。

那么，如何挑选一个好用的 React Table 库？

首先最重要的是明确你的用户需要哪些功能，比如说，用户如果需要单次加载超过一万行数据，那么几乎一定需要用虚拟化(virtualization)过的表格，或者至少是能够加上虚拟化的表格。再比如，如果你的用户需要按列排序、交换列顺序等，那么对应的表格组件也必须支持这些功能。

常见的表格功能包括

• 行选择
• 点击触发操作(比如加载数据)
• 导出数据
• 按列过滤
• 搜索
• 绑定和展示数据(比如 http 查询的结果数据)
• 调整样式，如列颜色等
• 重命名列
• 调整列顺序
• 分页、导航

等等

不幸的是，找到一个支持所有功能的组件库其实是非常不容易的。我们建议如果你不确定，可以在本文介绍的这些库中，快速找几个尝试挑一个覆盖最全的。

当然，如果你在开发一个