AgGridReact - Grid does not update when isRowSelectable changes

Question

I am trying to pass isRowSelectable dynamically as a prop to an AgGridReact. In the following toy example, You expect that clicking the "Switch criteria" button will change the set of items in the grid that have checkboxes. Instead, the grid is unchanged.

Screenshots:

interface Item { name: string, age: number, height: number}
const data: Item[] = [
    {name: "old and tall", age: 80, height: 80}, 
    {name: "old and short", age: 80, height: 20},
    {name: "young and tall", age: 10, height: 80}, 
    {name: "young and short", age: 10, height: 20}, 
]
const colDefs: ColDef[] = [
    {
        headerName: "",
        checkboxSelection: true,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        width: 60,
        sortable: false
    },
    { field: "name"},
    { field: "age"},
    { field: "height"}
]

const criteria1 = (node: RowNode) => node.data.age > 50
const criteria2 = (node: RowNode) => node.data.height > 50

export const DevPage: FunctionComponent = () => {

    const [isCriteria1, setIsCriteria1] = useState<boolean>(false)

    return ( <Fragment>
    
        <h2> {isCriteria1 ? "By Age" : "By Height"} </h2>
        <Button onClick = { () => setIsCriteria1(!isCriteria1) }> 
            Switch criteria
        </Button> 
        
        <div className="ag-theme-alpine" style={{height:"800px"}}>
            <AgGridReact
                rowSelection="multiple"
                columnDefs = {colDefs}
                rowData={data}
                isRowSelectable = {isCriteria1 ? criteria1 : criteria2}
                suppressRowClickSelection={true}
            />
        </div>
        
    </Fragment> )
}

Answer 1

As a workaround, you can force all RowNodes to re-evaluate selectable property when onClick event fires.

const [rowData, setRowData] = React.useState<RowDataType[]>([]);
const criterial = React.useRef(true);
const isSelectable = (rowNode: RowNode) => {
  const result = rowNode.data.age > 25;
  const selectable = result === criterial.current;

  return selectable;
};
const toggleCriteria = () => {
  const updateSelectable = (rowNode: RowNode) => {
    rowNode.setRowSelectable(isSelectable(rowNode));
  };

  criterial.current = !criterial.current;
  gridApi.deselectAll();
  gridApi.forEachNodeAfterFilterAndSort(updateSelectable);
};

return (
  <>
    <button onClick={toggleCriteria}>Toggle Criteria</button>
    <AgGridReact
      rowSelection="multiple"
      suppressRowClickSelection
      columnDefs={columnDefs}
      onGridReady={onGridReady}
      isRowSelectable={isSelectable}
      rowData={rowData}
    />
  </>
);

Live Demo