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"
/>
)
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.