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/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。