React-table: Highlight selected row feature request

Created on 16 Feb 2018  Â·  4Comments  Â·  Source: tannerlinsley/react-table

I've been looking around and it doesn't look like this is a current feature.

I want to be able to click a row and have the whole row highlighted as selected. And then upon clicking on another row the previously selected row should no longer be highlighted and the newly selected row should now be highlighted.

Am I overlooking this basic functionality?

Most helpful comment

No - you are correct. ReactTable is a shell for a table - it does not have all of those features. You have to add them in yourself for your own use case. Clicking on rows, highlighting rows, all up to the developer.

Here is one that someone else put together (maybe not perfect for your needs) but I took a copy and was having a look at fixing it for them. I basically works....

https://codesandbox.io/s/qvo21pl5zj

It is unlikely to be added as a feature because ReactTable is designed to stay light weight.

There is also a Higher Order Component example (selectTableHOC) in the 6.7.6 release. It uses checkboxes for selection rather than row highlighting.

All 4 comments

No - you are correct. ReactTable is a shell for a table - it does not have all of those features. You have to add them in yourself for your own use case. Clicking on rows, highlighting rows, all up to the developer.

Here is one that someone else put together (maybe not perfect for your needs) but I took a copy and was having a look at fixing it for them. I basically works....

https://codesandbox.io/s/qvo21pl5zj

It is unlikely to be added as a feature because ReactTable is designed to stay light weight.

There is also a Higher Order Component example (selectTableHOC) in the 6.7.6 release. It uses checkboxes for selection rather than row highlighting.

I understand it is suppose to be light weight. But row selection/highlight is a basic feature most tables need. Even a lightweight one.
The selectTableHOC is nearly as painful as adding it yourself.

I personally think this should be addressed in V7 with a lightweight implementation.. Or a better version of selectTableHOC be implemented.

I am bumping into needing to switch a react-table to a selectable table quite a bit.. (As features are being added)

You're right. This was one of the motivators for v7 from day one of v6. The new hook based plugin architecture should support this with just a single line added and a few bindings in your table markup.

Tanner Linsley
On Apr 30, 2019, 10:41 PM -0600, James Gardiner notifications@github.com, wrote:

I understand it is suppose to be light weight. But row selection/highlight is a basic feature most tables need. Even a lightweight one.
The selectTableHOC is nearly as painful as adding it yourself.
I personally think this should be addressed in V7 with a lightweight implementation.. Or a better version of selectTableHOC be implemented.
I am bumping into needing to switch a react-table to a selectable table quite a bit.. (As features are being added)
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

I was just looking into this.. And going down the "implement it yourself" route..
I actually think that for v6, there should be an addition to the manual that gives a basic implementation for doing selections. It is actually not that difficult, and in place of having users search around for the (best) answer, providing a 20 lines or so example in the manual readme.md file would save a lot of entry devs time. for example. along the lines of https://codesandbox.io/s/mml59oz86y

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vaidsu picture vaidsu  Â·  29Comments

nikhilem picture nikhilem  Â·  27Comments

BenMGilman picture BenMGilman  Â·  22Comments

ivanov-v picture ivanov-v  Â·  16Comments

JayV30 picture JayV30  Â·  26Comments