Skip to content

Row Selection: Incorrect Parent Row Selection Behavior with Nested Data #6049

@aakkss37

Description

@aakkss37

TanStack Table version

v8.21.3

Framework/Library version

react: v18.2.0

Describe the bug and the steps to reproduce it

The row selection behavior for parent rows with subRows is inconsistent and incorrect in certain scenarios. The parent row selection state does not properly reflect the selection state of its children, leading to unexpected behavior where:

1. Parent becomes unchecked when all children are selected
2. Parent becomes checked when all children are unchecked

Expected vs Actual Behavior

Expected Behavior

  • Parent should be checked: Only when ALL child rows are selected
  • Parent should be indeterminate: When SOME (but not all) child rows are selected
  • Parent should be unchecked: When NO child rows are selected

Actual Behavior

The parent selection state becomes inverted in certain sequences of selection/deselection operations.

Steps to Reproduce

Let's say we have 4 rows, where one is a parent and 3 are subrows

Scenario 1: Parent becomes unchecked when all children are selected

Initial State: All rows unchecked

  • Check one subrow (id: "1.1") → Parent becomes indeterminate (correct)
  • Check another subrow (id: "1.2") → Parent remains indeterminate (correct)
  • BUG: Check the last subrow (id: "1.3") → Parent becomes unchecked instead of checked

Expected: Parent should be checked since all children are selected
Actual: Parent shows as unchecked despite all children being selected

Scenario 2: Parent becomes checked when all children are unchecked

Initial State: All rows unchecked

  • Check parent row (id: "1") → All subrows get selected (correct)
  • Uncheck one subrow (id: "1.1") → Parent becomes indeterminate (correct)
  • Uncheck another subrow (id: "1.2") → Parent remains indeterminate (correct)
  • BUG: Uncheck the last subrow (id: "1.3") → Parent becomes checked instead of unchecked

Expected: Parent should be unchecked since no children are selected
Actual: Parent shows as checked despite all children being unchecked

Additional Context

This behavior is inconsistent with standard UI patterns found in most tree/hierarchical selection components, where parent selection state should always accurately reflect the aggregate state of its children.

Reproducible Code

Note: Please let me know if you need any additional information or if you'd like me to test specific scenarios to help debug this issue.

Reproducible Example

Follow the steps discussed in Scenario 1 and Scenario 2

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/devbox/youthful-oskar-5v3v93

Screenshots or Videos (Optional)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions