介绍

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

Github

https://github.com/adazzle/react-data-grid

相关特性

• 极快渲染速度

利用智能窗口技术，以最小的延迟平稳地滚动浏览数十万行

• 丰富的编辑和格式化

使用各种格式设置器和编辑器查看和编辑单元格。如果这些都不满足您的需求，则可以轻松创建并插入自己的插件

• 可配置和可定制

快速配置和自定义功能，例如网格和列属性，行和单元格渲染器。由于Grid是React组件，因此很容易扩展和添加自定义功能。

• 包装齐全的Excel功能

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

快速开始

• 安装

这里我们当然是使用npm或yarn

$ npm install react-data-grid --save
# or with yarn:
$ yarn add react-data-grid

• 最简单示例

import React from 'react';
import ReactDataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  { key: 'count', name: 'Count' } ];

const rows = [{id: 0, title: 'row1', count: 20}, {id: 1, title: 'row1', count: 40}, {id: 2, title: 'row1', count: 60}];

function HelloWorld() {
  return (  columns={columns}
  rowGetter={i => rows[i]}
  rowsCount={3}
  minHeight={150} />);
}

官方文档具备齐全的示例及其代码，其功能非常丰富

总结

简单的数据表格在目前大多数的组件库总都已经自带，而且大多数都可以满足日常的开发需求，但是有一些场景，比如对数据分析比较看重的数据展示，那么一个好的数据表格组件甚至能很方便的替代Excel，不需要在进行额外的进行数据整合，而且在功能上也是一大亮点！

文章来源: https://twgreatdaily.com/zh-hans/7MTiJG8BMH2_cNUg_LE2.html