react-table添加编辑/删除列

Question

我使用Rails和React-Table来显示表。到目前为止，它工作得很好。但是如何在React-Table中添加编辑/删除列呢？

这有可能吗？

return (
    <ReactTable
      data={this.props.working_hours}
      columns={columns}
      defaultPageSize={50}
      className="-striped -highlight"
    />
    )

Answer 1

您所需要做的就是将columns转换为组件状态。您可以看到一个有效的https://codesandbox.io/s/0pp97jnrvv示例

2018年3月5日更新误解了问题，以下是更新后的答案：

const columns = [
    ...
    {
       Header: '',
       Cell: row => (
           <div>
               <button onClick={() => handleEdit(row.original)}>Edit</button>
               <button onClick={() => handleDelete(row.original)}>Delete</button>
           </div>
       )
    }
]

其中handleEdit和handleDelete将是您希望在单击按钮时如何处理操作的回调。

Answer 2

实际上，您可以使用react-table中列的访问器属性来添加按钮。以下是代码示例：

     {
        Header: 'Action',
        accessor: (originalRow, rowIndex) => (
           <div>
               <button onClick={() => handleEdit(originalRow)}>Edit</button>
               <button onClick={() => handleDelete(originalRow)}>Delete</button>
           </div>
        ),
        id: 'action',
      },