Header checkbox does not get selected when selecting page with grouped data

material-react-table version

v2.13.1

react & react-dom versions

React v18.3.1

Describe the bug and the steps to reproduce it

If you select elements one by one in a table with grouped data, the header checkbox does not reflect the correct selection state when all elements in the page get selected.
I think this might be caused by the following:
With default selection mode (page), the header checkbox will use the method table.getIsAllPageRowsSelected() to determine if it should be checked.
If dig into the tanstack table code we see that this method uses the pagination model flatRows to determine the total number in rows in the table: https://github.com/TanStack/table/blob/ab2819cb53098e1891d68041e439692afc2d52b7/packages/table-core/src/features/RowSelection.ts#L415-L431
The return value of getPaginationRowModel includes all rows, even parent grouped ones.

However, in MRT when selecting children rows one by one there will be a point in which all elements of the group will be selected, so the parent checkbox is rendered as checked. In the code we can see that while visually the parent is rendered as checked, it is not included in the selection state. However, if we select using the parent checkbox, the parent will be included in the state. This means that we can get different state values depending on the user usage.

Screen.Recording.2024-08-26.at.11.05.40.a.m.mp4

This is reflected in the row utils code, which for grouped columns ontains the checked state from the state of the children and not directly from the table rowSelection state:

material-react-table/packages/material-react-table/src/utils/row.utils.ts

Lines 126 to 143 in 7c23a21

    
           export const getIsRowSelected = <TData extends MRT_RowData>({ 
        
             row, 
        
             table, 
        
           }: { 
        
             row: MRT_Row<TData>; 
        
             table: MRT_TableInstance<TData>; 
        
           }) => { 
        
             const { 
        
               options: { enableRowSelection }, 
        
             } = table; 
        
             return ( 
        
               row.getIsSelected() || 
        
               (parseFromValuesOrFunc(enableRowSelection, row) && 
        
                 row.getCanSelectSubRows() && 
        
                 row.getIsAllSubRowsSelected()) 
        
             ); 
        
           };

Steps to reproduce

Open the sandbox to find a table with grouped data and selection enabled
Select children rows one by one
Notice that when all elements are selected the header checkbox changes to unselected state

Minimal, Reproducible Example - (Optional, but Recommended)

CodeSandbox: https://codesandbox.io/p/devbox/mrt-column-grouping-selection-and-select-all-pgvk7x?workspaceId=a99c66fb-3472-4189-a44e-72c9121d3c0a

Screenshots or Videos (Optional)

Screen.Recording.2024-08-26.at.11.12.19.a.m.mp4

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

This is an important defect with significant impact to our use cases, can you please give priority to select state related defects? We are open to create contributions too

	export const getIsRowSelected = <TData extends MRT_RowData>({
	row,
	table,
	}: {
	row: MRT_Row<TData>;
	table: MRT_TableInstance<TData>;
	}) => {
	const {
	options: { enableRowSelection },
	} = table;

	return (
	row.getIsSelected() \|\|
	(parseFromValuesOrFunc(enableRowSelection, row) &&
	row.getCanSelectSubRows() &&
	row.getIsAllSubRowsSelected())
	);
	};