React-table: Add action buttons to Table Rows

[developerPratik]

I am working on a web application that views firebase data in the react-table. I need to add edit and delete buttons on each row. Is there any way to achieve this?

[aaronschwartz]

Absolutely. You just need to add columns for each of your buttons and render a custom cell.

      {
        id: 'edit',
        accessor: '[row identifier to be passed to button]',
        Cell: ({value}) => (<button onClick={this.editRow({value})}>Edit</button>)
      },

[damianlajara]

I tried doing this, but the click event never gets fired when I click on the button. However, when I click on the header part to sort, it fires with an undefined. Any clue as to why this is happening?

[aaronschwartz]

Can you post your code or even better recreate it on codepen: https://codepen.io/tannerlinsley/pen/QpeZBa?editors=0010

[damianlajara]

Here you go: https://codepen.io/damiansito/pen/WOvjVz/?editors=0010

[aaronschwartz]

That's not a valid function handler you're passing to onClick. You're executing that console log on every row immediately after each render. Clicking the header will cause a re-render so it prints out every line again.

https://codepen.io/aaronschwartz/pen/awOyQq?editors=0010

[damianlajara]

Oh wow, silly mistake. Thanks a bunch @aaronschwartz

[DanEvers]

Hey guys....is it possible to combine react table with react x editable?
I am brand new to react and working on:

 <ReactTable
    columns={columns}
    data={this.state.jumps}
    filterable
    noDataText={"There is no data to display"}>
  </ReactTable>

How can I include react-x editable?

name="any item name"
dataType="text"
mode={"inline"}
title="Enter username for example"
value="this will be rendered"
/>