如何使用react和sheetjs从json数组创建可编辑表

Question

我想创建一个可编辑表，如sheets演示中所示。 我遵循了这些example，但没有运气。 以下是我尝试的示例代码，但没有显示可编辑表。任何帮助表示赞赏。

import React, { Component } from 'react';
import XLSX from 'xlsx';

class LedgerGroup extends Component {

  constructor(props) {
    super(props);
    this.state = {
            data: [[["a","b"],[1,2]]], /* Array of Arrays e.g. [["a","b"],[1,2]] */
            cols: [{ name: "C", K: 2 }]  /* Array of column objects e.g. { name: "C", K: 2 } */
        };
  }


  render() {
    return (
      <OutTable data={this.state.data} cols={this.state.cols} />
    );
  }
}
export default LedgerGroup;

class OutTable extends Component {
    constructor(props) { super(props); };
    render() { return (
<div className="table-responsive">
    <table className="table table-striped">
        <thead>
            <tr>{this.props.cols.map((c) => <th key={c.key}>{c.name}</th>)}</tr>
        </thead>
        <tbody>
            {this.props.data.map((r,i) => <tr key={i}>
                {this.props.cols.map(c => <td key={c.key}>{ r[c.key] }</td>)}
            </tr>)}
        </tbody>
    </table>
</div>
    ); };
};