javascript - 如何在react-tabulator中插入新行

Question

所以这段代码来自官方文档，用于插入新行:

$("#add-row").click(function(){
    $("#example-table").tabulator("addRow", {});
});

..但我正在使用react-tabulator https://www.npmjs.com/package/react-tabulator

这是返回方法下方的布局:

<div>
        <button id="add-row" onClick={ReactTabulator("addRow")}>Add Row</button>
      </div>
        <ReactTabulator
          columns={editableColumns}
          data={data}
          footerElement={<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>}
          options={options}
        />
      </div>

我是 React 新手，所以我不知道如何插入新行。额外的信息可能是，如果您想插入新行，您可以选择是将其插入到第一行还是最后一行，即使用以下选项 addRowPos:"bottom"。

Answer 1

我遇到了同样的问题，以下方法对我有用。

首先，创建 <ReactTabulator> 的引用对象.

为此，请在构造函数中启动引用:

    constructor(props) {
        super(props);
        this.tableRef = React.createRef(); //create reference object
    }

并在 <ReactTabulator> 中添加引用.

<div>
      </div>
        <ReactTabulator
        ref={this.tableRef}
          columns={editableColumns}
          data={data}
          footerElement={<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>}
          options={options}
        />

您现在可以按如下方式访问制表器对象:

var tabulator = this.tableRef.current.table;

要完成示例和奖励问题，请设置 onClick回调:

定义 onAddRow方法作为类的一部分。它调用制表器对象 ( this.tableRef.current.table ) 的 addRow 方法。

根据 http://tabulator.info/docs/4.0/update :addRow 的第二个参数是可选的，决定该行是添加到表的顶部还是底部。值 true 会将行添加到表格顶部，值 false 会将行添加到表格底部。

onAddRow(){
    this.tableRef.current.table.addRow({}, true); //true adds to top
}

绑定(bind)onAddRow方法this在构造函数中

    constructor(props) {
        super(props);
        this.tableRef = React.createRef(); //create reference object

        // This binding is necessary to make `this` work in the callback
        this.onAddRow= this.onAddRow.bind(this);
    }

调用addRow单击方法:

<button id="add-row" onClick={this.onAddRow}>Add Row</button>