T
TanStack•3y ago
correct-apricot

Has anyone been successful implementing rowSelection and selected update on a button click?

I have been mirroring the example for row selection found here: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/row-selection?from-embed=&file=/src/main.tsx But unfortunately the selected state does not update on button click, however I am able to select a row and view the data in the row, its just the state is always false even though I can retrieve the data and see the index of the selected row in the rowSelection state.
CodeSandbox
tanstack-table-example-row-selection - CodeSandbox
tanstack-table-example-row-selection using @faker-js/faker, @tanstack/react-table, react, react-dom
2 Replies
sensitive-blue
sensitive-blue•3y ago
Did you remember to include the state updating function?
No description
correct-apricot
correct-apricotOP•3y ago
Yes and since writing this question I have been able to make it work properly! 
cell: ({ row }) => (
    <>
    <RowAction
     selected={row.getIsSelected()}
     setRow_id={setRow_id}
     row_id={row_id}
     setRowSelection={setRowSelection}
     handleButtonClick={row.toggleSelected} />
     </>)
cell: ({ row }) => (
    <>
    <RowAction
     selected={row.getIsSelected()}
     setRow_id={setRow_id}
     row_id={row_id}
     setRowSelection={setRowSelection}
     handleButtonClick={row.toggleSelected} />
     </>)
and this is my button component: 
<button
    onClick={() => {
    handleButtonClick();
   }}
    ref={btnRef}
> ....</button>
<button
    onClick={() => {
    handleButtonClick();
   }}
    ref={btnRef}
> ....</button>

Honestly I think the disconnect was happening because of a different IconButton component i was using....

Did you find this page helpful?