表格组件——React Data Grid与Antd-Table功能比较

 注：功能参照于官网，自定义功能扩展有待完善。（表格可跳过，可直接看文章末尾总结部分）

react data grid官网

antd官网

一、react data grid主要特点

1、快速渲染，支持无限滚动。

移动端的瀑布流，PC端商品列表的无限下拉刷新等，都体现了无限滚动的重要性，antd-table本身是基于rc-table的扩展，而rc-table所属的react-component是不支持的，为了解决这个问题，3.x+版本的antd基于react-data-grid做了一层扩展，增加了List组件，用来支持无限滚动。

2、编辑形式丰富。

可自定义各种格式设置工具和编辑器（比如颜色编辑器、下拉框）查看和编辑单元格。

3、可配置、可定制。

利用网格和列属性、行和单元格呈现属性，实现配置以及自定义功能。

4、Excel特点

全键盘导航、单元格复制和粘贴、单元格向下拖动、冻结列、列大小调整、排序、筛选以及其他许多功能。

（单元格右击，删除行或上下插入行；全键盘导航；单元格范围选择；列拖拽功能是antd不支持的）

二、功能比较

说明：红色部分代表react data grid的劣势，绿色部分代表antd的优势

功能点		react-data-grid	antd
Cell Editing 单元格内容编辑	1.单元格内文本内容编辑	√	√
	2.单元格内容下拉框形式选择	√	*
	3.自定义内容编辑器，比如颜色编辑器	√	*
Column Configuration 表格属性	1.可伸缩列	√	√
	2.行列冻结（只可冻结表头以及表格左侧列）	√	√（可固定表格右侧列）
	3.事件绑定：onDoubleClick、onMouseOver、onContextMeny（目标单元格上右击）	√	*
	4.单元格内自定义事件，比如删除	√	√
	5.列拖拽	√	*（antd只支持行拖拽）
Sorting and Filtering 排序与过滤	1.数字大小与字母简单排序	√	√
	2.内容模糊过滤	√	√
	3.高级过滤。可输入数字表达式，比如（>10,2-10）；将该列的内容转化为下拉框选择内容，点击实现精确过滤	√	√（将该列的内容转化为checkbox形式，需要点击确定按钮才能够实现过滤，不够灵活，并且不能够用数字表达式进行过滤）
Row Rendering 行属性设置	1.利用rowRenderer接口，对某一行的所有数据进行重新展示，比如将某人的数据展示成一个名片形式	√	*
	2.属性设置，比如不同行颜色展示	√	√（官网未给出案例，但是可以通过rowClassName接口实现效果）
	3.表格无数据时的展示设置	√	√（官网未给出案例，但是可以通过configProvider全局化配置的renderEmpty接口实现）
Grouping	1.指定表格按某一列的内容进行分类组合展示	√	*
	2.移动表头，实现分类	√	*
Selection	1.简单的单复选框设置	√	√（可自定义选择项（比如奇偶项））
	2.多单元格选择：onStart、onUpdate、onComplete	√	*
Miscellaneous	1.支持树形结构	√	√
	2.滚动性能优化。对于渲染成本高昂的格式化程序，可以在滚动时渲染简单的占位符，以提高滚动性能。	√	待研究
	3.单元格右击，删除行或上下插入行	√	*
	4.行拖拽	√	√
可展开/嵌套子表格	当表格内容较多不能一次性完全展示时，可对行内容进行适当隐藏	√	√
表格行/列合并	合并单元格	*	√
表头分组	表头分组	*	√

三、总结

1、颜值：antd  >  react-data-grid，react-data-grid样式基于bootstrap，如要修改主题等样式，需要安装bootstrap。

2、行列冻结：antd  >  react-data-grid （两者均支持表头冻结，表格左侧列冻结；antd还支持表格右侧列冻结， react-data-grid不支持）

3、antd支持但react-data-grid不支持的功能有：合并单元格；表头分组。

---

4、单元格内容编辑：react-data-grid  >  antd

5、行列拖拽：react-data-grid  >  antd（react-data-grid支持行列拖拽，antd只支持行拖拽）

6、过滤：react-data-grid  >  antd（前者过滤机制更灵活）

7、react-data-grid支持但antd不支持的功能有：单元格右击，删除行或上下插入行；利用rowRenderer接口，对某一行的所有数据进行重新展示；鼠标导航；多单元格选择，触发事件onStart、onUpdate、onComplete。

 

四、协议

react-data-grid官网介绍：

---

Credits

This project has been built upon the great work done by Prometheus Research. For the original project, please click here. It is released under MIT

---

可见react-data-grid基于React-Grid创作，所遵循的开源协议是MIT，MIT协议的核心条款是：该软件及其相关文档对所有人免费，可以任意处置，包括使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。唯一的限制是，在软件和软件的所有副本中必须包含上述版权声明和许可声明。

这意味着：

• 你可以自由使用，复制，修改，可以用于自己的项目。
• 可以免费分发或用来盈利。
• 唯一的限制是必须包含许可声明。