jbetancur / react-data-table-component

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.
https://react-data-table-component.netlify.app
Apache License 2.0
2.04k stars 411 forks source link

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

Open ADTC opened 9 months ago

ADTC commented 9 months ago

Feature Check list

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

eosvn commented 8 months ago

I'm also interested in this issue.

ADTC commented 8 months ago

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

ADTC commented 8 months ago

Hope to get some thoughts on this.