Question

我正在尝试使用ReactTable来绘制一个带有服务调用结果的简单表。我的服务返回一个只有一个字段的简单对象，例如：

[{id: "myId"}]

我希望表具有两列：一列带有“ id”字段，另一列带有“删除”按钮，该按钮将触发另一个服务调用以告知后端删除该项目。

根据在StackOverflow上找到的其他答案，我以这种方式定义了列：

this.columns = [
        { Header: "Id", accessor: "id" },
        {
            Header: '',
            Cell: row => (
                    <button className="btn btn-danger" onClick={() => this._removeCollection(row.original)}>Remove</button> 
            )
         }
    ]

，然后以最简单的方式将其包含在我的表格中：

render() {
    return (
        <div>
            <ReactTable
                data={this.state.collections}
                columns={this.columns} />
        </div>
    )
}

结果？我的按钮出现在“ id”列（此示例中的id为1和2）下方： Table as rendered

怎么了？

ReactTable总是堆叠列

0 个答案: