Skip to content

fix: let parent rows unselect child rows when not itself selected#6364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KevinVandy merged 1 commit into from
Jul 1, 2026
Merged

fix: let parent rows unselect child rows when not itself selected #6364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/alpine/expanding/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -97,7 +97,7 @@
<input
type="checkbox"
style="cursor: pointer"
:checked="cell.row.getIsSelected()"
:checked="cell.row.getIsSelected() || (cell.row.getCanSelectSubRows() && cell.row.getIsAllSubRowsSelected())"
x-effect="$el.indeterminate = !cell.row.getIsSelected() && cell.row.getIsSomeSelected()"
@change="cell.row.getToggleSelectedHandler()($event)"
/>
Expand Down
5 changes: 4 additions & 1 deletion examples/angular/expanding/src/app/expandable-cell/expandable-cell.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -43,7 +43,10 @@ export class ExpandableHeaderCell<T extends RowData> {
<input
type="checkbox"
[indeterminate]="row.getIsSomeSelected()"
[checked]="row.getIsSelected()"
[checked]="
row.getIsSelected() ||
(row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
"
(change)="row.getToggleSelectedHandler()($event)"
/>
{{ ' ' }}
Expand Down
4 changes: 3 additions & 1 deletion examples/lit/expanding/src/main.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -123,7 +123,9 @@ const columns: Array<ColumnDef<typeof features, Person>> = [
cell: ({ row, getValue }) => html`
<div style="padding-left:${row.depth * 2}rem">
${indeterminateCheckbox({
checked: row.getIsSelected(),
checked:
row.getIsSelected() ||
(row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()),
indeterminate: row.getIsSomeSelected(),
onChange: row.getToggleSelectedHandler(),
})}
Expand Down
5 changes: 4 additions & 1 deletion examples/preact/expanding/src/main.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -68,7 +68,10 @@ function App() {
>
<div>
<IndeterminateCheckbox
checked={row.getIsSelected()}
checked={
row.getIsSelected() ||
(row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>{' '}
Expand Down
8 changes: 6 additions & 2 deletions examples/react/expanding/src/main.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -69,7 +69,10 @@ function App() {
>
<div>
<IndeterminateCheckbox
checked={row.getIsSelected()}
checked={
row.getIsSelected() ||
(row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>{' '}
Expand DownExpand Up@@ -129,6 +132,7 @@ function App() {
// filterFromLeafRows: true,
// maxLeafRowFilterDepth: 0,
debugTable: true,
debugRows: true,
},
(state) => state, // default selector
)
Expand DownExpand Up@@ -343,7 +347,7 @@ function IndeterminateCheckbox({
if (typeof indeterminate === 'boolean') {
ref.current.indeterminate = !rest.checked && indeterminate
}
}, [ref, indeterminate])
}, [ref, indeterminate, rest.checked])

return (
<input
Expand Down
5 changes: 4 additions & 1 deletion examples/solid/expanding/src/App.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -59,7 +59,10 @@ function App() {
<div style={{ 'padding-left': `${row.depth * 2}rem` }}>
<div>
<IndeterminateCheckbox
checked={row.getIsSelected()}
checked={
row.getIsSelected() ||
(row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>{' '}
Expand Down
4 changes: 3 additions & 1 deletion examples/svelte/expanding/src/App.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -156,7 +156,9 @@
<div>
<input
type="checkbox"
checked={row.getIsSelected()}
checked={row.getIsSelected() ||
(row.getCanSelectSubRows() &&
row.getIsAllSubRowsSelected())}
use:setIndeterminate={!row.getIsSelected() && row.getIsSomeSelected()}
onchange={row.getToggleSelectedHandler()}
class="sortable-header"
Expand Down
5 changes: 4 additions & 1 deletion examples/vue/expanding/src/App.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -156,7 +156,10 @@ export default defineComponent({
<div style={{ paddingLeft: `${row.depth * 2}rem` }}>
<div>
<IndeterminateCheckbox
checked={row.getIsSelected()}
checked={
row.getIsSelected() ||
(row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>{' '}
Expand Down
10 changes: 10 additions & 0 deletions packages/table-core/src/features/row-selection/rowSelectionFeature.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -61,9 +61,19 @@ export const rowSelectionFeature: TableFeature = {
},
row_getIsSomeSelected: {
fn: (row) => row_getIsSomeSelected(row),
memoDeps: (row) => [
row.subRows,
row.table.atoms.rowSelection?.get(),
row.table.options.enableRowSelection,
],
},
row_getIsAllSubRowsSelected: {
fn: (row) => row_getIsAllSubRowsSelected(row),
memoDeps: (row) => [
row.subRows,
row.table.atoms.rowSelection?.get(),
row.table.options.enableRowSelection,
],
},
row_getCanSelect: {
fn: (row) => row_getCanSelect(row),
Expand Down
15 changes: 6 additions & 9 deletions packages/table-core/src/features/row-selection/rowSelectionFeature.utils.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -497,10 +497,6 @@ export function row_toggleSelected<
table_setRowSelection(row.table, (old) => {
value = typeof value !== 'undefined' ? value : !isSelected

if (row_getCanSelect(row) && isSelected === value) {
return old
}

const rowSelection = Object.assign(makeObjectMap<true>(), old)

mutateRowIsSelected(
Expand DownExpand Up@@ -787,13 +783,15 @@ export function isSubRowSelected<

const rowSelection = row.table.atoms.rowSelection?.get() ?? {}

let allChildrenSelected = true
let someSelected = false
let allChildrenSelected = true

for (let i = 0; i < row.subRows.length; i++) {
const subRow = row.subRows[i]!

row.subRows.forEach((subRow) => {
// Bail out early if we know both of these
if (someSelected && !allChildrenSelected) {
return
break
}

if (row_getCanSelect(subRow)) {
Expand All@@ -816,8 +814,7 @@ export function isSubRowSelected<
allChildrenSelected = false
}
}
})
}

// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
return allChildrenSelected ? 'all' : someSelected ? 'some' : false
}
4 changes: 1 addition & 3 deletions perf-done.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -525,9 +525,7 @@ const results: Array<{ colSpan: number; rowSpan: number }> = []

for (let i = 0; i < headers.length; i++) {
const header = headers[i]!
if (
!callMemoOrStaticFn(header.column, 'getIsVisible', column_getIsVisible)
) {
if (!callMemoOrStaticFn(header.column, 'getIsVisible', column_getIsVisible)) {
continue
}

Expand Down
8 changes: 3 additions & 5 deletions perf-skipped.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -36,8 +36,7 @@ if (existingGrouping.includes(colId)) {
}

if (groupedRows[0]) {
row._valuesCache[colId] =
groupedRows[0].getValue(colId) ?? undefined
row._valuesCache[colId] = groupedRows[0].getValue(colId) ?? undefined
}

return row._valuesCache[colId]
Expand DownExpand Up@@ -134,9 +133,8 @@ Each call walks the `columnFilters` array. When a filter UI re-renders columns,
**Before**

```ts
return column.table.atoms.columnFilters
?.get()
?.find((d) => d.id === column.id)?.value
return column.table.atoms.columnFilters?.get()?.find((d) => d.id === column.id)
?.value
```

**After (new memoized table API)**
Expand Down
Loading