v8 - Indeterminate Checkbox on Grouped Row

[treasurely]

Does anyone know how to get around this? I'm using grouping/expanding in my table, and want row selection for individual rows, as well as to be able to select an entire group & have result in having each subrow selected . The issue I'm running into is when I select the group, it will select all subrows, but won't move back to an indeterminate state if I uncheck an individual subrow in that group afterwards. Doing everything from the subrow level works correctly (group box is checked if all are chosen, indeterminate if some, and empty if none are).

Code for the column & table instance and an example are below - thanks!

table.createDataColumn("select", {
    accessorKey: "select",
    enableGrouping: false,
    header: ({ instance }) => (
      <IndeterminateCheckbox
        {...{
          checked: instance.getIsAllPageRowsSelected(),
          indeterminate: instance.getIsSomePageRowsSelected(),
          onChange: instance.getToggleAllPageRowsSelectedHandler(),
        }}
      />
    ),
    aggregatedCell: ({ row }) => {
      return (
        <div>
          <IndeterminateCheckbox
            {...{
              checked: row.getIsSelected(),
              indeterminate: row.getIsSomeSelected(),
              onChange: row.getToggleSelectedHandler(),
            }}
          />
        </div>
      );
    },
    cell: ({ row }) => (
      <div>
        <IndeterminateCheckbox
          {...{
            checked: row.getIsSelected(),
            indeterminate: row.getIsSomeSelected(),
            onChange: row.getToggleSelectedHandler(),
          }}
        />
      </div>
    ),
  })

const Table = () => {
  const cellFormat = "px-4 py-2 border-[1px] border-slate-800 border-solid";
  const [data, setData] = useState(() => [...defaultData]);
  const [columns] = useState(() => [...defaultColumns]);

  const [grouping, setGrouping] = useState([]);
  const [columnVisibility, setColumnVisibility] = useState([]);

  const instance = useTableInstance(table, {
    data,
    columns,
    state: {
      grouping,
      columnVisibility: {
        ...columnVisibility,
        expander: grouping.length ? true : false,
      },
    },
    onGroupingChange: setGrouping,
    getExpandedRowModel: getExpandedRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
    getGroupedSelectedRowModel: getGroupedSelectedRowModel,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    groupedColumnMode: false,
    enableSubRowSelection: true,
    debugTable: true,
  });