T
TanStack•3y ago
foreign-sapphire

Selecting checkbox not updating row selection state

I'm trying to add a select all option to my table like: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/row-selection?from-embed=&file=/src/main.tsx But it looks like checking my checkboxes isn't updating the setRowSelection state as logging the rowSelection always returns an empty object. I've attached screenshots of the relevant code below. Do I need to manually call setRowSelection anywhere other than in the useReactTable?
CodeSandbox
tanstack-table-example-row-selection - CodeSandbox
tanstack-table-example-row-selection using @faker-js/faker, @tanstack/react-table, react, react-dom
No description
No description
No description
4 Replies
foreign-sapphire
foreign-sapphireOP•3y ago
Just in case anyone comes across this. I had to use toggleSelected & toggleAllRowsSelected instead of the handlers
exotic-emerald
exotic-emerald•3y ago
The real answer to this is to not use an arrow function when calling the getHander functions, because they already return a function Should be onCheckedChange={row.getToggleSelectedHander()} or technically you could do something like 
onCheckedChange={() => {
  handleCheckboxClick();
  row.getToggleSelectedHandler()();
}}
onCheckedChange={() => {
  handleCheckboxClick();
  row.getToggleSelectedHandler()();
}}
foreign-sapphire
foreign-sapphireOP•3y ago
@KevinVandy cheers! Just so i'm clear, is there something wrong with using the toggle functions instead of the getToggles?
exotic-emerald
exotic-emerald•3y ago
Nope those work too

Did you find this page helpful?