【问题标题】:react-table add edit/delete columnreact-table 添加编辑/删除列
【发布时间】:2018-08-03 09:22:31
【问题描述】:

我使用 Rails 和 React-Table 来显示表格。到目前为止它工作正常。但是如何向 React-Table 添加编辑/删除列?

有可能吗?

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

【问题讨论】:

标签: react-table


【解决方案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>
       )
    }
]

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

【讨论】:

  • 据我了解您的演示,您有一个显示/隐藏列功能。但我要求一个“编辑/删除行”列。
  • 我不得不稍微修改@Rico Chen 的答案,以便将行对象传递给回调函数:Cell: ({row}) =&gt; (
  • 是的,正如@AlasdairShields 所说,应该是Cell: ({row}) =&gt; (
猜你喜欢
  • 2019-08-21
  • 1970-01-01
  • 1970-01-01
  • 2019-05-25
  • 1970-01-01
  • 2020-09-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多