search

imballinst / react-bs-datatable

Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.
https://imballinst.github.io/react-bs-datatable
MIT License
60 stars 20 forks source link

Add `event` object to `onCheckboxChange` #164

Closed Thomas-Boi closed 1 year ago

Thomas-Boi commented 1 year ago

Hi @imballinst,

Thank you again for your previous fix. This time, I'd like to request you to add the event object to the onCheckboxChange callback. I'm running into this problem for my code:

  1. Add a onRowClick to my table.
  2. Turn on the checkbox option for one of the rows.
  3. Clicking on the checkbox would bubble up the event for the row onclick => it also triggers a onRowClick that I don't want

Having a event to event.stopPropagation() would be great for me to address this issue. I believe you can add it here and maybe anywhere else where the event handler is added.

Thank you again for your time.

imballinst commented 1 year ago

hi @Thomas-Boi! Sounds good, I will do these on the next update:

  1. Add event to the onCheckboxChange
  2. Probably for safety measures, I'll add the event.stopPropagation on both onRowClick and onCheckboxChange.

Thanks for the idea!

imballinst commented 1 year ago

hi @Thomas-Boi, I have published the beta version: https://www.npmjs.com/package/react-bs-datatable/v/3.8.0-beta.1. Demo can be checked here: https://codesandbox.io/s/youthful-nova-cky9u9?file=/src/App.tsx

Also, I wasn't able to fix the bubbling thingy by stopPropagation. For some reasons, the row on click always gets called first (IIRC stopPropagation only works if it's the children event that's fired first). So I worked it around by checking if the clicked part of the row is either <tr> or <td>.

Let me know if there are things that's still missing. Thanks!

Thomas-Boi commented 1 year ago

hi @Thomas-Boi, I have published the beta version: https://www.npmjs.com/package/react-bs-datatable/v/3.8.0-beta.1. Demo can be checked here: https://codesandbox.io/s/youthful-nova-cky9u9?file=/src/App.tsx

Also, I wasn't able to fix the bubbling thingy by stopPropagation. For some reasons, the row on click always gets called first (IIRC stopPropagation only works if it's the children event that's fired first). So I worked it around by checking if the clicked part of the row is either <tr> or <td>.

Let me know if there are things that's still missing. Thanks!

Thank you so much! I installed the beta version and it works just as I wanted. I also appreciate that this works out of the box with the default checkbox event handler and not having to override it just to prevent a propagation. I look forward to this new update.

imballinst commented 1 year ago

@Thomas-Boi 3.8.0 has been published --> https://www.npmjs.com/package/react-bs-datatable/v/3.8.0. Feel free to re-open or create new issue if there are more issues/requests that you'd like to post. Thanks!