From 66b00f67eeb6c5ba8df30adc2e750fc98fa3cee2 Mon Sep 17 00:00:00 2001 From: Rahul Patwa Date: Tue, 20 Jan 2026 15:58:32 +0530 Subject: [PATCH] fix(row-selection): correct select-all checkbox state for manual pagination --- .../components/inputs/MRT_SelectCheckbox.tsx | 44 +++++++++++++++++-- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx b/packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx index 03c3f53d6..2f6616f5c 100644 --- a/packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx +++ b/packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx @@ -37,9 +37,11 @@ export const MRT_SelectCheckbox = ({ muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode, + manualPagination, + rowCount, }, } = table; - const { density, isLoading } = getState(); + const { density, isLoading, rowSelection } = getState(); const selectAll = !row; @@ -49,8 +51,29 @@ export const MRT_SelectCheckbox = ({ : table.getIsAllRowsSelected() : undefined; + const isVisuallyChecked = + selectAll && manualPagination && rowCount !== undefined + ? Object.keys(rowSelection).length === rowCount + : allRowsSelected; + + const isSomeRowsSelected = selectAll + ? manualPagination && rowCount !== undefined + ? Object.keys(rowSelection).length > 0 && + Object.keys(rowSelection).length < rowCount + : selectAllMode === 'page' && table.getIsAllPageRowsSelected() + ? false + : table.getIsSomeRowsSelected() + : undefined; + + const shouldDeselect = + selectAll && manualPagination && rowCount !== undefined + ? selectAllMode === 'page' + ? table.getIsAllPageRowsSelected() + : Object.keys(rowSelection).length === rowCount + : allRowsSelected; + const isChecked = selectAll - ? allRowsSelected + ? isVisuallyChecked : getIsRowSelected({ row, table }); const checkboxProps = { @@ -74,6 +97,19 @@ export const MRT_SelectCheckbox = ({ const onSelectAllChange = getMRT_SelectAllHandler({ table }); + const handleSelectAllChange = (event: any) => { + event.stopPropagation(); + if (selectAll && manualPagination && rowCount !== undefined) { + const syntheticEvent = { + ...event, + target: { ...event.target, checked: !shouldDeselect }, + }; + onSelectAllChange(syntheticEvent); + } else { + onSelectAllChange(event); + } + }; + const commonProps = { 'aria-label': selectAll ? localization.toggleSelectAll @@ -88,7 +124,7 @@ export const MRT_SelectCheckbox = ({ }, onChange: (event) => { event.stopPropagation(); - selectAll ? onSelectAllChange(event) : onSelectionChange!(event); + selectAll ? handleSelectAllChange(event) : onSelectionChange!(event); }, size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small', ...checkboxProps, @@ -122,7 +158,7 @@ export const MRT_SelectCheckbox = ({