php表格datagrid插件技巧_基于React的类Excel开源数据表格组件React Data Grid

Github

https://github.com/adazzle/react-data-grid干系特性

极快渲染速率

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

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

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

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

这里我们当然是利用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 (<ReactDataGrid columns={columns} rowGetter={i => rows[i]} rowsCount={3} minHeight={150} />);}

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

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