imballinst / react-bs-datatable

Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.

Home Page:https://imballinst.github.io/react-bs-datatable

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add `event` object to `onCheckboxChange`

Thomas-Boi opened this issue · comments

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.

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!

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!

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.

@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!