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

I agree to follow this project's Code of Conduct
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.

@tannerlinsley

Also see: #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

bump

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]);

Link to fix:
#3965 (comment)

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]);

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

Just noticed the same issue 👍

Yep, I've run into this issue too.

same issue here

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;
  }

same issue

Following this issue.

same issue

I'm curious what makes this a bug?

With the above proposal, selecting all of the children and therefore making the parent row selected, then the parent row can never be a selectable element. There is no independence between parent and children. The opposite would be true too (deselecting all of the children will automatically deselect its parent).

follow this.

+1

bump here

Update: contains bugs, do not use

~~Provided solution sometimes leaves parent row selected in the state when not all its children have been selected. This leads to the parent row checkbox being unresponsive~~

~~Here is an improved solution as a custom hook:~~

Old code

import * as React from 'react';

import type {RowSelectionState, Table} from '@tanstack/react-table';

export const useRowSelectionWithSubRows = (
    table: Table<any>,
    rowSelection: RowSelectionState,
    setRowSelection: React.Dispatch<React.SetStateAction<RowSelectionState>>,
) => {
    React.useEffect(() => {
        const {rows} = table.getRowModel();

        const rowSelectionUpdated = rowSelection;

        rows.forEach((row) => {
            let isSelected = false;

            if (row.subRows.length > 0) {
                isSelected = row.getIsAllSubRowsSelected() === true;
            } else {
                isSelected = row.getIsSelected();
            }

            if (isSelected) {
                rowSelectionUpdated[row.id] = true;
            } else if (row.id in rowSelectionUpdated) {
                delete rowSelectionUpdated[row.id];
            }
        });

        setRowSelection(rowSelectionUpdated);
    }, [rowSelection, table]);
};

Here is revised solution

import * as React from 'react';

import type {RowSelectionState, Updater} from '@tanstack/react-table';

interface RowSelectionProps<T> {
    rowSelection: RowSelectionState;
    setRowSelection: React.Dispatch<React.SetStateAction<RowSelectionState>>;
    tableData: T[];
    item: T;
    getSubRows: (item: T) => T[] | undefined;
    getRowId: (row: T) => string;
}

const processItemSelection = <T>({
    rowSelection,
    item,
    getSubRows,
    getRowId,
}: Omit<RowSelectionProps<T>, 'setRowSelection' | 'tableData'>): boolean => {
    let isSelected = true;

    const itemId = getRowId(item);

    const subRows = getSubRows(item) ?? [];

    if (subRows.length > 0) {
        subRows.forEach((subRow) => {
            const isSubRowSelected = processItemSelection({
                item: subRow,
                rowSelection,
                getSubRows,
                getRowId,
            });

            if (!isSubRowSelected) {
                isSelected = false;
            }
        });
    } else {
        isSelected = rowSelection[itemId] === true;
    }

    if (isSelected) {
        rowSelection[itemId] = true;
    } else if (itemId in rowSelection) {
        delete rowSelection[itemId];
    }

    return isSelected;
};

export const useRowSelectionFixedHandler = <T>({
    rowSelection,
    setRowSelection,
    tableData,
    getSubRows,
    getRowId,
}: Omit<RowSelectionProps<T>, 'item'>) => {
    const fixedRowSelectionHandler = React.useCallback(
        (rowSelectionUpdater: Updater<RowSelectionState>) => {
            const rowSelectionUpdated =
                typeof rowSelectionUpdater === 'function'
                    ? rowSelectionUpdater(rowSelection)
                    : rowSelectionUpdater;

            tableData.forEach((item) => {
                processItemSelection({
                    item,
                    rowSelection: rowSelectionUpdated,
                    getSubRows,
                    getRowId,
                });
            });

            setRowSelection(rowSelectionUpdated);
        },
        [rowSelection, setRowSelection, tableData, getSubRows, getRowId],
    );

    return fixedRowSelectionHandler;
};

fix: honor selection rules in select-all paths, add deselectParents o…

Navigation Menu

Repository navigation

row selection not working for nested rows (`getSubRows`) #4878

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Probably the same issue:

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

react-table version

TypeScript version

Additional context

Terms & Code of Conduct

Update: contains bugs, do not use

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

row selection not working for nested rows (getSubRows) #4878

Description

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Probably the same issue:

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

react-table version

TypeScript version

Additional context

Terms & Code of Conduct

Activity

VincEnterprise commented on May 30, 2023

VincEnterprise commented on Jun 7, 2023

artem-zaiko-yara commented on Jun 14, 2023

R-Bower commented on Jan 27, 2024

Profesor08 commented on Jan 30, 2024

VACincoming commented on Feb 10, 2024

pelletier197 commented on Feb 28, 2024

Macs89 commented on Mar 20, 2024

minhdtb-tanaakk commented on Mar 27, 2024

cthomesmatt commented on Apr 3, 2024

vladcos commented on Apr 17, 2024

mttigg commented on May 8, 2024

xuyunan commented on May 30, 2024

etiennecoyacabelio commented on Jul 18, 2024

thescripted commented on Oct 11, 2024

TsengTofu commented on Jan 21, 2025

ahmedprusevic commented on Jun 8, 2025

Rushour0 commented on Sep 8, 2025

Radomir-Drukh commented on Oct 14, 2025

Update: contains bugs, do not use

Radomir-Drukh commented on Nov 10, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

row selection not working for nested rows (`getSubRows`) #4878