Skip to content

[v8] grouped row selection/deselection is not working properly 聽#4349

Closed

Description

@stefanthaler

Describe the bug

When using the getGroupedRowModel, some of the selection behvaior seems to be off:

a) when using table.getToggleAllRowsSelectedHandler(), all rows get selected, but none of the grouped.
b) after manually selecting all groups (or when using table.getToggleAllPageRowsSelectedHandler()), when all rows are deselected, the groups remain selected.
c) when manually selecting all groups and rows, and then deselecting one row of a grouped row, then the group itself remains selected, but the table.getIsAllRowsSelected() checkbox gets deselected.

Your minimal, reproducible example

https://codesandbox.io/s/react-table-8-5-11-grouped-issue-xghfs0?file=/src/main.tsx

Steps to reproduce

a) click select all checkbox

b)

  1. select all groups manually
  2. click select all checkbox

c)

  1. select all groups manually
  2. de-select 1 row in a group (not a grouped row)

Expected behavior

a) Toggle all selected row should toggle all selected rows
b) Toggling all rows should remove all selected columns
c) De-selecting one row in a selected group should put all selected rows to intermediate and the group into intermediate

How often does this bug happen?

Every time

Screenshots or Videos

Screen Shot 2022-08-29 at 18 20 14
Screen Shot 2022-08-29 at 18 20 04
Screen Shot 2022-08-29 at 18 19 49
Screen Shot 2022-08-29 at 18 19 34

Platform

-OS: MacOS 12.5.1
-Browser: Firefox, Chrome, Safari

react-table version

v8.5.11

TypeScript version

No response

Additional context

Probably related to:

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.

Activity

  1. ludydoo commented on Feb 16, 2023

    @ludydoo

    A workaround I found for this is to

    • Not use the info.table.toggleAllRowsExpanded()
    • Instead, use
    const allSelected = info.table.getIsAllRowsSelected();
    for (const row of info.table.getRowModel().flatRows) {
        row.toggleSelected(!allSelected);
    }
    
  2. alexbezhan commented on Apr 19, 2023

    @alexbezhan

    My workaround:

    1. toggleAllRowsSelectedHandler() that uses expanded row model
    2. getIsAllRowsSelected() that uses expanded row model
    function getIsAllRowsSelected(table: Table<any>) {
        // implementation is a copy from the Tanstack table implementation, except we use expanded row model to work properly with grouped rows
        const rows = table.getExpandedRowModel().rows
        const { rowSelection } = table.getState()
    
        let isAllRowsSelected = Boolean(
            rows.length && Object.keys(rowSelection).length
        )
    
        if (isAllRowsSelected) {
            if (
                rows.some(
                    row => row.getCanSelect() && !rowSelection[row.id]
                )
            ) {
                isAllRowsSelected = false
            }
        }
    
        return isAllRowsSelected
    }
    
    function getToggleAllRowsSelectedHandler(table: Table<any>) {
        return () => {
            const newRowSelection = { ...table.getState().rowSelection }
            const newSelected = !getIsAllRowsSelected(table)
    
            if (newSelected) {
                for (const row of table.getExpandedRowModel().rows) {
                    if (!row.getCanSelect()) {
                        continue
                    }
                    newRowSelection[row.id] = true
                }
            } else {
                for (const row of table.getExpandedRowModel().rows) {
                    if (!row.getCanSelect()) {
                        continue
                    }
                    delete newRowSelection[row.id]
                }
            }
            table.setRowSelection(newRowSelection)
        }
    }
    
  3. lattemisa commented on Aug 15, 2023

    @lattemisa

    Hello, I am still facing this issue, was this ever resolved?

  4. KevinVandy commented on Jul 27, 2026

    @KevinVandy
    Member

    Group-row selection IDs are independent by design. Descendant checkbox state is meant to be set via getIsAllSubRowsSelected/getIsSomeSelected

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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