Programmatically disabling RowSelect checkboxes

[dekhaus]

Hi All

I'm using an older version of React-Table (7.0.0-alpha.36) and I need to be able to programmatically disable the 'row select' checkboxes that are in my table. I've successfully built a table component using useRowSelect and the checkboxes appear and function as they should (both in the Header and each Cell) ...

Header: ({ getToggleAllRowsSelectedProps }) => (
  <div>
    <input id='blah' type="checkbox" disabled={false} onClick={(e) => e.stopPropagation()} {...getToggleAllRowsSelectedProps()} />
  </div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
  <div>
    <input type="checkbox" onClick={(e) => e.stopPropagation()} {...row.getToggleRowSelectedProps()} />
  </div>
),

Now I need to be able to disable all checkboxes. I don't want to remove them - I want to disable all of them.

In the code above as well as all the online references - I read about getToggleAllRowsSelectedProps and row.getToggleRowSelectedProps() - and both functions seem like the perfect way of setting a disable property.

The problem is - I have no clue about how to use either function. Can someone please help me ?

Thanks
Dave

[GuptaSiddhant]

The way I understand it, you want to pass disabled={isDisabled} property to your checkboxes pragmatically where isDisabled is a boolean. There are 2 ways:

1. Define isDisabled as a state variable (useState) and then use it in Checkboxes. Obviously value can be changes with setDisabled callback.
2. You could alter the functionality of getToggleRowSelectedProps and getToggleAllRowsSelectedProps. usTable provides a hook callback which can be used to alter these.

Following is for example of row-select

const {... } = useTable(
    {
      columns,
      data,
    },
    useRowSelect,
    hooks => {

      hooks.getToggleAllRowsSelectedProps = [ 
          (props, {instance}) => [ props, {               
               ...
                // Here change functionality
               disabled: true,
               ...
           } ]
     ];

      hooks.visibleColumns.push(columns => [
        // Let's make a column for selection
        {
          id: 'selection',
          // The header can use the table's getToggleAllRowsSelectedProps method
          // to render a checkbox
          Header: ({ getToggleAllRowsSelectedProps }) => (
            <div>
              <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
            </div>
          ),
          // The cell can use the individual row's getToggleRowSelectedProps method
          // to the render a checkbox
          Cell: ({ row }) => (
            <div>
              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
            </div>
          ),
        },
        ...columns,
      ])
    }
  )