table row selection not working for nested rows (`getSubRows`)

Describe the bug

row-selection in the group rows are not correctly reacting to their sub-rows row-selection state

Your minimal, reproducible example

https://codesandbox.io/s/row-selection-sub-rows-kfgh2j

Steps to reproduce

Go to https://codesandbox.io/s/row-selection-sub-rows-kfgh2j
Expand the first group row
Select the first sub-row
✅ Notice the parent row checkbox being "indeterminate"
Select the other 2 sub-rows in that same group
🛑 Notice the parent row checkbox is "unchecked", when it should be "checked"

Probably the same issue:

Go to the same codesandbox: https://codesandbox.io/s/row-selection-sub-rows-kfgh2j
Expand the first group row
Select the checkbox from the column header
✅ Notice all rows (parent and children) are selected
Unselect the first sub-row of the expanded group
🛑 Notice the parent row checkbox is stuck on "checked", when it should be "indeterminate"

Expected behavior

As a user, I expected the parent row to react to the row-selection status of its children, regardless on how they are selected/unselected:

some sub-rows selected: parent row "indeterminate"
no sub-rows selected: parent row "unchecked"
all sub-rows selected: parent row "checked"

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Browser: N/A
OS: N/A

Happens in codesandbox

react-table version

v8.9.1

TypeScript version

N/A - whatever codesandbox uses

Additional context

No response

Terms & Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

May 25 '23 18:05 csantos-nydig

Also see: https://github.com/TanStack/table/issues/4720

@tannerlinsley could you please take a look at this 🥹🙏

I really want to use tabstack table for a project but this specific issue is preventing me from being able to use it.

This naive UI example here (cascade checking) has the behavior we are expecting:

https://www.naiveui.com/en-US/os-theme/components/tree#cascade.vue

May 30 '23 13:05 VincEnterprise

bump

Jun 07 '23 15:06 VincEnterprise

I use this workaround until the bug is fixed (React):

useEffect(() => {
  const { rows } = table.getRowModel();
  rows.forEach((row) => {
    const allSuRowsSelected = row.subRows.length > 0 && row.subRows.every(({ getIsSelected }) => getIsSelected());
    if (allSuRowsSelected) {
      row.toggleSelected(true);
    }
  });
}, [rowSelection, table]);

Jun 14 '23 10:06 artem-zaiko-yara

Link to fix: https://github.com/TanStack/table/issues/3965#issuecomment-1912872932

Jan 27 '24 00:01 R-Bower

bump, issue is actual

Current workaround is to toggle manually

  useEffect(() => {
    const { rows } = table.getRowModel();

    rows.forEach((row) => {
      if (row.subRows.length > 0) {
        if (row.getIsAllSubRowsSelected() === true) {
          row.toggleSelected(true);
        } else if (row.getIsSomeSelected() === false) {
          row.toggleSelected(false);
        }
      }
    });
  }, [rowSelection, table]);

Jan 30 '24 09:01 Profesor08

Any updates on this issue? I'm planning to update from v7 -> v8 because v7 has a bug with isSomeSelected prop for nested rows, but looks like updating does not make any sense because a v8 still has a problem with checkboxes for nested rows...

#3965

Feb 10 '24 02:02 VACincoming

Just noticed the same issue :+1:

Feb 28 '24 18:02 pelletier197

Yep, I've run into this issue too.

Mar 20 '24 13:03 Macs89

same issue here

Mar 27 '24 07:03 minhdtb-tanaakk

bump, issue is actual

Current workaround is to toggle manually

  useEffect(() => {
    const { rows } = table.getRowModel();

    rows.forEach((row) => {
      if (row.subRows.length > 0) {
        if (row.getIsAllSubRowsSelected() === true) {
          row.toggleSelected(true);
        } else if (row.getIsSomeSelected() === false) {
          row.toggleSelected(false);
        }
      }
    });
  }, [rowSelection, table]);

This is a great fix since the issue is still occurring, thank you! I noticed that the table.getIsSomeRowsSelected() handler isn't counting grouped rows that are being selected, so to fix this I fixed up a function you can use to check if any are selected in the grouped or subrows, hope it helps someone like it did for me.

function getIsAnyRowsSelected(table: Table<any>) {
    const rows = table.getExpandedRowModel().rows;
    const { rowSelection } = table.getState();

    let isAnyRowsSelected = rows.some(row => {
      if (rowSelection[row.id]) return true;

      if (row.subRows.some(subRow => rowSelection[subRow.id])) return true;

      return false;
    });

    return isAnyRowsSelected;
  }