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://web.fly63.com/nav/1939