T
TanStack•3y ago
unwilling-turquoise

Add extra function to onchange of indeterminate checkbox

Hi guys, I have a question about the v8 Row Selection example for React: In that example a custom component IndeterminateCheckbox is created and then used as the cell value for the columns: 
            <IndeterminateCheckbox
              {...{
                checked: row.getIsSelected(),
                indeterminate: row.getIsSomeSelected(),
                onChange: row.getToggleSelectedHandler(),
              }}
            />
            <IndeterminateCheckbox
              {...{
                checked: row.getIsSelected(),
                indeterminate: row.getIsSomeSelected(),
                onChange: row.getToggleSelectedHandler(),
              }}
            />
This works great, but I would like to add extra functionality to the onChange, I have tried to begin simple and changed the code to: 
            <IndeterminateCheckbox
              {...{
                checked: row.getIsSelected(),
                indeterminate: row.getIsSomeSelected(),
                onChange: () => {row.getToggleSelectedHandler(); console.log(row.original.SomeInformationFromData)},
              }}
            />
            <IndeterminateCheckbox
              {...{
                checked: row.getIsSelected(),
                indeterminate: row.getIsSomeSelected(),
                onChange: () => {row.getToggleSelectedHandler(); console.log(row.original.SomeInformationFromData)},
              }}
            />
Now the console.log() does work and does print the data as expected, however, the selection does not work anymore! Not visual and not in the state either (I printed it, but am getting an empty array) Does anyone have any idea how I can add an extra function to the onChange without breaking the row.getToggleSelectedHandler()
3 Replies
unwilling-turquoise
unwilling-turquoise•3y ago
Best to put this in a code sandbox for ease of assessing what’s going on. Have you tried return ing the row.get call?
unwilling-turquoise
unwilling-turquoiseOP•3y ago
Thanks will try to do that when I find the time 🙂 Return could indeed be worth a try 🤔
unwilling-turquoise
unwilling-turquoiseOP•3y ago
So I finally found the time! I think this code sandbox shows the problem: https://codesandbox.io/embed/react-table-select-problem-vqbmrm?fontsize=14&hidenavigation=1&theme=dark To explain a bit more: I am using the ReactTable component for multiple occassions, so I made it such that it is a reusable component, that can be called with an array of columns and data in other components. In this case I am calling the ReactTable component from the PersonsTab component, normally the data is fetched but I rewrote it now such that some data is already there. As mentioned above, if I do not alter the onChange function the selection works (that's why the select all checkbox still works in the sandbox. However, as soon as I try to add something to the onChange function (in this case a simple console.log) it does not work anymore. The console.log is performed, but the row.getToggleSelectedHandler() does not do anything. (the checkboxes of the rows in the sandbox). Unfortunately returning did not solve it either.
React-table select problem - CodeSandbox
React-table select problem by heijntje using @tanstack/match-sorter-utils, @tanstack/react-table, react, react-dom, react-scripts

Did you find this page helpful?