Problem with useRowSelect. Checkbox disables after filtering or sorting

[raquishp]

Hi all,

I've been trying to implement the example available in:
https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink

I've adapted the same type of code and the only different is the columns and data:

const columns = React.useMemo(
    () => [
	{
		Header: 'Name',
		accessor: 'name'
	},
	{
		Header: 'Tag',
		accessor: 'tag',
		Filter: false
	},
	{
		Header: 'Type',
		accessor: 'type',
		Filter: SelectColumnFilter
	},
    ],
    []
  )

The issue that I have is that I'm using the hook implemented in the example for useRowSelect, however, when compiling, I get the following error message:

TypeError: Cannot read property 'push' of undefined

  225 | usePagination,
  226 | useRowSelect,
  227 | hooks => {
> 228 | 	hooks.visibleColumns.push(columns => {
      | ^  229 | 		return [
  230 | 			{
  231 | 				id: 'selection',

I made sure that the version of react-table I'm using is the correct one by having "react-table": "latest", in package.json as in the example. However I still have that visibleColumns is undefined.

I tried replacing visibleColumns by columns, which actually compiles, but then the checkboxes are disabled if I apply any filter or sort.

Is there a way to fix this? or maybe a different way of implementing row selection?

Thanks!