介紹

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，不需要在進行額外的進行數據整合，而且在功能上也是一大亮點！