react-table add edit/delete column

Question

I use Rails and React-Table to display tables. It works fine so far. But How can one add an edit/delete column to the React-Table?

Is it even possible?

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

Solution

All you need to do is turn columns into a component state. You can see a working example https://codesandbox.io/s/0pp97jnrvv

[Updated 3/5/2018] Misunderstood the question, here's the updated answer:

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

where handleEdit and handleDelete will be the callbacks how you want to handle the actions when the buttons are clicked.

Comments

[Trinity76]

As far as I understand your demo, you have a show/hide column function. But I asked for an "edit/delete row" column.

[Alasdair Shields]

I had to amend @Rico Chen's answer slightly for the row object to be passed to the callback funtions: Cell: ({row}) => (

[Ayoub Laazazi]

Yes, as @AlasdairShields said, it should be Cell: ({row}) => ( !