React-table: Button component in table onClick

Created on 5 Nov 2017  路  4Comments  路  Source: tannerlinsley/react-table

Hey guys, this is more of a question and I apologize for posting it as an issue.
I am using react-table and adding a column that has react bootstrap button:

{ accessor: 'btnBuy', Header: '', width: 95, Cell: row => (
      <div>
      <Button
        bsStyle="success"
        bsSize="large"
        onClick={this.functionX.bind(this)}>
        Click me
      </Button>
    </div>
    )}
...
functionX() {
   // need to access row data here
}

My question is, how can I access the row data from functionX? so for example: row.cells[0]..
I couldn't find this in the documentation.

Most helpful comment

Just for info you can do it

{
        header: "Edit",
        id: "edit",
        Cell: ({ row }) => {
          return (
          <div>
            <Link to="#" onClick={ (e) => this.onDeleteClick(row._original) }>Delete</Link>
          </div>
        )
 }

  onDeleteClick(item) {
    const { _id } = item;
    this.props.deleteUser(_id, () => {});
  }

All 4 comments

Check the documentation under 'Renderers' all the available objects that are passed to Cell in that single parameter are documented there. It is probably better to call it something other than row because it contains metadata about the row (including the visual row and original row). If you expand your Cell function into a braces wrapper function you can do a console.log to inspect what is passed in.

As far as the onClick is concerned, you need to create an arrow function around that so you can pass in any relevant information from the row parameter.

This type of question is better asked on the #react-table Slack channel (there is a badge at the top of the readme doco page).

Thank you, I didn't know about the slack channel.

Just for info you can do it

{
        header: "Edit",
        id: "edit",
        Cell: ({ row }) => {
          return (
          <div>
            <Link to="#" onClick={ (e) => this.onDeleteClick(row._original) }>Delete</Link>
          </div>
        )
 }

  onDeleteClick(item) {
    const { _id } = item;
    this.props.deleteUser(_id, () => {});
  }

Correction

`{
        header: "Edit",
        id: "edit",
        Cell: ({ row }) => {
          return (
          <div>
            <Link to="#" onClick={ (e) => this.onDeleteClick(row.original) }>Delete</Link>
          </div>
        )
 }

  onDeleteClick(item) {
    const { _id } = item;
    this.props.deleteUser(_id, () => {});
  }`
Was this page helpful?
0 / 5 - 0 ratings

Related issues

vaidsu picture vaidsu  路  29Comments

IPessers picture IPessers  路  20Comments

Oskii2311 picture Oskii2311  路  46Comments

ggascoigne picture ggascoigne  路  18Comments

schaeffer11 picture schaeffer11  路  24Comments