React-table: How to link the whole row in the table?

[nullhook]

Is there a way that I can make the whole row clickable to a href?

I'm currently adding an anchor tag in one of the columns.

[tannerlinsley]

Easily. Just use the getTrProps prop:

<ReactTable
  getTrProps={(state, rowInfo, column, instance) => ({
    onClick: e => console.log('A row was clicked!')
  })}
/>

getTrProps is passed some handy arguments you may want to use. They are explained here: https://github.com/tannerlinsley/react-table#custom-props

[tannerlinsley]

I just realized that you asked about using a href specifically. Though this is technically feasible, I wouldn't suggest it, as it would require a heavy amount of component overrides and restyling to get an <a> element to behave like a React-Table <tr> element. But you can easily add a cursor: pointer style to clickable rows and simply handle the page change programmatically. :)

[shaikjohnsaida]

Is there a way that I can make the single column clickable to a href?

Right now I m using for row
getTrProps={(state, rowInfo, column, instance) => ({
onClick: e => console.log('A row was clicked!')
})}
/>

[justduy]

@shaikjohnsaida you can override the cell with a custom made component.

  Cell: cell => {
        return (
          <Link> <div className="styled" /> </Link>
        );
      }

I guess you could try something like this.

[jogoool]

is there a way to have both functionality, I want when user click the whole row redirects the app to user profile and when click each icon in actions redirect the user to edit, view or delete page.

[mayank-gangwal]

@jogoool I'm looking for something similar - view, edit, delete. Did you get the approach?

[ritikatandon01]

@justduy i want to make row a link so that on right click on a row i can see 'open in new tab' option in antd table. How can i do that in antd table?

[mayank-gangwal]

Well, I found this useful, if anyone's looking for -
```
getTableRowProps = (state, rowInfo, instance) => {
if (rowInfo && rowInfo.row) {
return {
onClick: (e) => {
this.setState({
selectedRow: rowInfo.row
})
}
}
}else{
return {}
}
}

Here, getTableRowProps is used as a prop to my `<table>` and `selectedRow` is the row that is being clicked upon. This is state property

Now, here's a catch. Once you get `selectedRow` set as the row that is created, we can then extract all the data values in this object. 
Remember to initialize the state with `selectedRow: null`
Secondly, I was looking for a column/ field called `_id` that is not displayed in the table, for that, I added a new column, like this -

columns : [
{
Header: ID,
accessor: '_id',
show:false
},
{
...
}
]
`` Usingshow:falseproperty that hides the column, but remains inselectedRow`

Hope this helps.