React-table: table row onClick()

Created on 30 Aug 2017  路  5Comments  路  Source: tannerlinsley/react-table

I want to be able to click on a table row and navigate to drill-down to a detail page about that record. This is pretty standard right?

I could just make the first cell a Link with the columns.Cell overrider, but I'd like the onClick() to be on the row ('rt-tr-group') level.

I could add this functionality to react-table w/ a PR, but I want to make sure it doesn't already exist ...

Most helpful comment

Which is why we switched to this: https://spectrum.chat/react-table. Searchable, indexed and community driven.

All 5 comments

The subcomponent prop may do what you want. And there is also the getTRProps prop that you can return an object with onClick set to the function you want.

Since this is more of an implementation question and not an issue or bug,
we suggest you use our slack channel to ask for more assistance. Thanks!

If I understand OP correctly, this is a bug and I have it also. If I use both sub-components and clickable rows, like this

      <ReactTable
        data={data}
        columns={columns}
        SubComponent={row => {
          return <pre>{JSON.stringify(row.original, null, 2)}</pre>
        }}
        getTrProps={(state, rowInfo) => ({
          onClick: () => this.props.history.push(`/db/${entity.id}/${rowInfo.original.__id}`)
        })}
        className="-striped -highlight"
      />

The caret of the sub-component is displayed, but clicking it triggers the row event (which navigates away in my case) so it can't be used.
Is there a workaround ?

Since this is more of an implementation question and not an issue or bug,
we suggest you use our slack channel to ask for more assistance. Thanks!

Slack channel signup is dead now, and folks are still looking to answer this question. I get that Github Issues are for _issues_ and not troubleshooting, but one of these approaches clearly brings a greater benefit to the community and there's always the [question] tag. ;)

Which is why we switched to this: https://spectrum.chat/react-table. Searchable, indexed and community driven.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Codar97 picture Codar97  路  3Comments

bdkersey picture bdkersey  路  3Comments

mellis481 picture mellis481  路  3Comments

missmellyg85 picture missmellyg85  路  3Comments

danielmariz picture danielmariz  路  3Comments