-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Description
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