React-table with disabled checkboxes

Is react-table amazing? YES, IT IS!!

But
But
But

Recently I wanted to implement a table with row selection and I had some disabled checkboxes in my data, what I observed is when select all checkbox was checked, the disabled checkboxes were also getting checked, something like this:

So, I went through the instance properties that useRowSelect gives and I was able to figure out a solution!

You can play around with my solution with pagination here:

React table with disabled checkboxes in row

Basically, how it works is, every time you click the select-all checkbox you use the toggleRowSelected function to conditionally check the row and then you count the number of selectable rows and selected rows in the current page to determine the state of the select all checkbox.

If you do not need pagination, you can use rowsinstead of page and isAllRowsSelectedinstead of isAllPageRowsSelected