react-data-table-component icon indicating copy to clipboard operation
react-data-table-component copied to clipboard

[FEATURE]: How to select a row by clicking anywhere on it?

Open ADTC opened this issue 2 years ago • 3 comments

Feature Check list

  • [x] Agree to the Code of Conduct
  • [x] Read the README to ensure the feature is not already present
  • [x] You read Creating Issues, Features and Pull Requests
  • [x] Considered the value versus complexity for all users of the library as well as library maintenance
  • [x] Considered if this can be a storybook or documentation example

Is your feature request related to a problem? Please describe

Currently the only way to select a row is to click the checkbox. If there's no "expand" functionality or other click-based interactivity in the entire row, I would like to have the ability to click

It is also crucial that if some parts of the row has click interactivity (for example buttons or links), all other parts without click interactivity would still select the row when clicked. So event propagation should be handled properly.

Describe the solution you'd like

selectOnRowClicked and selectOnRowDoubleClicked booleans on the DataTable component as a prop, will be good to have.

If both selectOnRowClicked and expandOnRowClicked are true, prioritize expansion.

Describe alternatives you've considered

I considered using the onRowClicked handler, but not sure how to programmatically select the clicked row. I suppose you could have a selected boolean prop in the data which is toggled by the handler, forcing the component to re-render (using selectableRowSelected). But this is clunky and also needs onSelectedRowsChange to do the same thing as well (I think). Clunky solution that might work.

As an alternative, consider enhancing the checkbox column so that a click anywhere in the cell will select the row. This makes it easier to click, because you don't have to click directly inside the checkbox. (I can't do this myself though.)

Additional context

Already checked #213

ADTC avatar Dec 08 '23 05:12 ADTC

I'm also interested in this issue.

eosvn avatar Jan 02 '24 02:01 eosvn

@jbetancur this would be good to have. Any idea? Thank you for considering.

ADTC avatar Jan 02 '24 16:01 ADTC

Hope to get some thoughts on this.

ADTC avatar Jan 15 '24 18:01 ADTC