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 ...
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.
Most helpful comment
Which is why we switched to this: https://spectrum.chat/react-table. Searchable, indexed and community driven.