react-table 添加编辑/删除列

Posted 2023-02-19

【中文标题】react-table 添加编辑/删除列

【英文标题】：react-table add edit/delete column

【发布时间】：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"
    />
    )

【问题讨论】：

您想在要提供编辑行数据或删除行的位置添加新列。我说的对吗？

@GAJESHPANIGRAHI 你有什么线索可以让单元格可编辑，然后添加这些按钮吗？

@vrosario 是的，请检查此链接codesandbox.io/s/github/tannerlinsley/react-table/tree/master/…

你可以用这个npmjs.com/package/eprofit

【参考方案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 将是您希望在单击按钮时如何处理操作的回调。

【讨论】：

据我了解您的演示，您有一个显示/隐藏列功能。但我要求一个“编辑/删除行”列。

我不得不稍微修改@Rico Chen 的答案，以便将行对象传递给回调函数：Cell: (row) => (

是的，正如@AlasdairShields 所说，应该是Cell: (row) => (！