griddata

介绍

React Data Grid是Github上开源的类Excel数据表组件，内置了编辑器、键盘导航、复制粘贴等功能。短时间内Github上3.4k+的星就有那么多，也说明这样一个组件受到关注，值得使用。目前最新的稳定版本是5.0.4。

Github

Https://github.com/adazzle/react-data-grid相关特征

极快渲染速度

使用智能窗口技术，以最小的延迟在数十万行中平滑滚动。

丰富的编辑和格式化

使用各种格式化程序和编辑器来查看和编辑单元格。如果这些不能满足您的需求，您可以轻松地创建并插入您自己的插件。

可配置和可定制

快速配置和定制功能，如网格和列属性，行和单元渲染器。因为Grid是一个React组件，所以很容易扩展和添加自定义功能。

包装齐全的Excel功能

全键盘导航，单元格复制粘贴，单元格下拉，列冻结，列大小调整，排序，过滤等众多功能。

快速开始安装

当然我们这里用的是npm或者yarn。

最简单的例子$ NPM安装react-data-grid-se #或者用yarn: $ yarn添加react-data-grid导入React from & # 39反应& # 39；；从& # 39；导入ReactDataGrid反应数据网格& # 39；；常量列=[{ key:& # 39；id & # 39，姓名:& # 39；ID & # 39}，{ key:& # 39；标题& # 39；，姓名:& # 39；标题& # 39；}，{ key:& # 39；伯爵& # 39；，姓名:& # 39；伯爵& # 39；} ];const rows = [{id: 0，title:& # 39；第一行& # 39；，计数:20}，{id: 1，标题:& # 39；第一行& # 39；，count: 40}，{id: 2，title:& # 39；第一行& # 39；，计数:60 }]；函数hello world(){ return(& lt；react data grid columns = { columns } row getter = { I = & gt；rows[I]} rows count = { 3 } min height = { 150 }/& gt；);官方文档有完整的例子和代码，功能非常丰富。

总结

目前大部分构件库都有简单的数据表，大部分都能满足日常的开发需求。但是在一些场景下，比如数据展示，一个好的数据表组件甚至可以方便的替代Excel，不需要额外的数据集成，在功能上也是一大亮点！