Custom function for selecting all rows.

[husnainali92]

Hi I'm using react aria checkbox for selection.
Their onChange method doesn't send the native event when onChange triggers they only send isSelected (e.target.checked) flag.
But getToggleAllRowsSelectedHandler and getToggleAllPageRowsSelectedHandler expect event.

My app crashed when I try to select all and react table was reading checked property. Screenshot attached.

The weird thing is single row selection is working fine but select all not working. They both have different function but both functions are expecting event.

Here is the codesandbox link to see

[rickvian]

Hi, i bumped to this issue as well, due to my component passing boolean of checked instead of event

it looks like the ideal fix is to make the component passes the event

but here is the work around

because it try to access e.target.checked, you can create such structure, passes it to function that returned by getToggleAllRowsSelectedHandler

  onChange: (checked) =>
    table?.getToggleAllRowsSelectedHandler()?.({
      target: { checked },
    }),

[nmatsumoto4]

I also solved it using this method. It seems that getToggleAllRowsSelectedHandler assumes a DOM event format. When using a custom component other than a primitive checkbox, it needs to be handled as mentioned above.

[KevinVandy]

Just don't use the get handlers APIs. They are just shortcuts for the toggle function APIs.