表格组件——ReactDataGrid与Antd-Table功能⽐较
注：功能参照于官⽹，⾃定义功能扩展有待完善。（表格可跳过，可直接看⽂章末尾总结部分）
⼀、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.⾃定义内容编辑器，⽐如颜⾊编辑器√*react native
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接⼝
实现效果）
√（官⽹未给出案例，但是可
以通过configProvider全局
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，如要修改主题等样式，需要安ootstrap。
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 . For the original project, please click . It is released under
可见react-data-grid基于React-Grid创作，所遵循的开源协议是MIT，MIT协议的核⼼条款是：该软件及其相关⽂档对所有⼈免费，可以任意处置，包括使⽤、复制、修改、合并、出版发⾏、散布、再授权及贩售软件及软件的副本。唯⼀的限制是，在软件和软件的所有副本中必须包含上述版权声明和许可声明。
这意味着：
你可以⾃由使⽤，复制，修改，可以⽤于⾃⼰的项⽬。
可以免费分发或⽤来盈利。
唯⼀的限制是必须包含许可声明。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。