react-datasheet 介绍
一个 简单的、用于创建电子表格的 react 组件。 ?
特点：
选择单元格，剪切，复制和粘贴单元格
使用 键盘 键导航
使用 键盘 键 删除
onCellsChanged，valueRenderer（可见数据）的回调
dataRenderer（输入中的基础数据， 默 认采用值）
使用 自定义 渲染器提供您自己的编辑器和视图控件
通过 自定义 渲染器对 生成 的 标记 进行广泛控制
安装
npm install react-datasheet --save
在项目中导入：
import reactDataSheet from 'react-datasheet';
// Be sure to include styles at some point,probably during your bootstrapping
import 'react-datasheet/lib/react-datasheet.css';
使用
react-Datasheet 生成 一个 包含单元格的表。双击或键入编辑值，如果更改，则启动onCellsChanged回调。粘贴表格数据或 删除 一系列单元格也会 调用 onCellsChanged。
提供的数据应该是 一个 行数组，每行应包含单元格。
class App extends react.Component {
constructor (props) {
super(props)
this.state = {
grid: [
[{value: 1},{value: 3}],
[{value: 2},{value: 4}]
]
}
}
render () {
return (
<reactDataSheet
data={this.state.grid}
valueRenderer={(cell) => cell.value}
onCellsChanged={changes => {
const grid = this.state.grid.map(row => [...row])
changes.forEach(({cell,row,col,value}) => {
grid[row][col] = {...grid[row][col],value}
})
this.setState({grid})
}}
/>
)
}
}
网站地址 : https://nadbm.github.io/react-datasheet/
GitHub: https://github.com/nadbm/react-datasheet
网站描述: 类似 Excel 数据表格的 react 组件
react-datasheet官方网站
官方网站： https://nadbm.github.io/react-datasheet/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。