Row selection in react-virtualized

Question

The documentation in react-virtualized is not clear on how row selection is handled. I need to:

• track selected row
• highlight selected row
• query which row is selected (I care for getting to its data)

It appears that there is a way to handle row click events and change style class on per row basis. I assume I have to roll my own selection tracking based on these parameters. I hope I am wrong and there is a better way.

Than you

Answer 1

The concept of a selected row or per-row styling is not specific to windowing. It's part of application code and should be tracked there- using React's built-in setState probably.

react-virtualized doesn't have anything built-in for this because it's orthogonal to the purpose of the library and I wouldn't want to add bloat (in terms of byte size or maintenance efforts) for features that aren't core to windowing.

I've created examples of doing similar types of things online that you might find useful to look at. For example this slide (source code here) shows click-to-select styling.

Answer 2

I have used React-Virtualized Table in my app, and there are library provided functions for row style and row data.

version: react-virtualized: ^9.19.1,

Link: https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md

checkout function onRowClick for picking rowdata, and getRowStyle for giving styling to row.