material-react-table 2.4.0 → 2.5.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -118,4 +118,4 @@
     "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }
-}
+} 

package/src/body/MRT_TableBody.tsx

@@ -16,13 +16,11 @@ import {
 interface Props<TData extends MRT_RowData> extends TableBodyProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
-  virtualColumns?: VirtualItem[];
 }
 
 export const MRT_TableBody = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
-  virtualColumns,
   ...rest
 }: Props<TData>) => {
   const {
@@ -70,15 +68,12 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
 
   const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
 
-  const virtualRows = rowVirtualizer
-    ? rowVirtualizer.getVirtualItems()
-    : undefined;
+  const { virtualRows } = rowVirtualizer ?? {};
 
   const commonRowProps = {
     columnVirtualizer,
     numRows: rows.length,
     table,
-    virtualColumns,
   };
 
   const CreatingRow = creatingRow && createDisplayMode === 'row' && (
@@ -186,13 +181,11 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                     ? (rowOrVirtualRow as VirtualItem)
                     : undefined,
                 };
+                const key = `${row.id}-${row.index}`;
                 return memoMode === 'rows' ? (
-                  <Memo_MRT_TableBodyRow
-                    key={`${row.id}-${row.index}`}
-                    {...props}
-                  />
+                  <Memo_MRT_TableBodyRow key={key} {...props} />
                 ) : (
-                  <MRT_TableBodyRow key={`${row.id}-${row.index}`} {...props} />
+                  <MRT_TableBodyRow key={key} {...props} />
                 );
               })}
             </>
@@ -217,7 +210,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                 rowIndex,
               };
               return memoMode === 'rows' ? (
-                <Memo_MRT_TableBodyRow key={`${row.id}`} {...props} />
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
               ) : (
                 <MRT_TableBodyRow key={row.id} {...props} />
               );

package/src/body/MRT_TableBodyCell.tsx

@@ -11,7 +11,6 @@ import Skeleton from '@mui/material/Skeleton';
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
-import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import {
   getIsFirstColumn,
@@ -58,11 +57,9 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       enableColumnOrdering,
       enableEditing,
       enableGrouping,
-      enableRowNumbers,
       layoutMode,
       muiSkeletonProps,
       muiTableBodyCellProps,
-      rowNumberDisplayMode,
     },
     refs: { editInputRefs },
     setEditingCell,
@@ -210,6 +207,11 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
+  const cellValueProps = {
+    cell,
+    table,
+  };
+
   return (
     <TableCell
       data-index={virtualColumnIndex}
@@ -286,25 +288,18 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               width={skeletonWidth}
               {...skeletonProps}
             />
-          ) : enableRowNumbers &&
-            rowNumberDisplayMode === 'static' &&
-            column.id === 'mrt-row-numbers' ? (
-            rowIndex + 1
-          ) : column.id === 'mrt-row-drag' ? (
-            <MRT_TableBodyRowGrabHandle
-              row={row}
-              rowRef={rowRef}
-              table={table}
-            />
           ) : columnDefType === 'display' &&
-            (column.id === 'mrt-row-select' ||
-              column.id === 'mrt-row-expand' ||
+            (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
+              column.id,
+            ) ||
               !row.getIsGrouped()) ? (
             columnDef.Cell?.({
               cell,
               column,
               renderedCellValue: cell.renderValue() as any,
               row,
+              rowRef,
+              staticRowIndex: rowIndex,
               table,
             })
           ) : isCreating || isEditing ? (
@@ -312,10 +307,10 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
           ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
             columnDef.enableClickToCopy !== false ? (
             <MRT_CopyButton cell={cell} table={table}>
-              <MRT_TableBodyCellValue cell={cell} table={table} />
+              <MRT_TableBodyCellValue {...cellValueProps} />
             </MRT_CopyButton>
           ) : (
-            <MRT_TableBodyCellValue cell={cell} table={table} />
+            <MRT_TableBodyCellValue {...cellValueProps} />
           )}
           {cell.getIsGrouped() && !columnDef.GroupedCell && (
             <> ({row.subRows?.length})</>

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type RefObject } from 'react';
 import Box from '@mui/material/Box';
 import { getMRTTheme } from '../style.utils';
 import {
@@ -12,11 +12,15 @@ const allowedTypes = ['string', 'number'];
 
 interface Props<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
+  rowRef?: RefObject<HTMLTableRowElement>;
+  staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   cell,
+  rowRef,
+  staticRowIndex,
   table,
 }: Props<TData>) => {
   const {
@@ -108,6 +112,8 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
       column,
       renderedCellValue,
       row,
+      rowRef,
+      staticRowIndex,
       table,
     });
   }

package/src/body/MRT_TableBodyRow.tsx

@@ -28,7 +28,6 @@ interface Props<TData extends MRT_RowData> {
   row: MRT_Row<TData>;
   rowIndex: number;
   table: MRT_TableInstance<TData>;
-  virtualColumns?: VirtualItem[];
   virtualRow?: VirtualItem;
 }
 
@@ -40,7 +39,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   row,
   rowIndex,
   table,
-  virtualColumns,
   virtualRow,
 }: Props<TData>) => {
   const theme = useTheme();
@@ -72,7 +70,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     rowPinning,
   } = getState();
 
-  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
 
   const isPinned = enableRowPinning && row.getIsPinned();
 

package/src/column.utils.ts

@@ -314,9 +314,10 @@ export const createRow = <TData extends MRT_RowData>(
 
 export const extraIndexRangeExtractor = (
   range: Range,
-  draggingIndex: number,
+  draggingIndex?: number,
 ) => {
   const newIndexes = defaultRangeExtractor(range);
+  if (draggingIndex === undefined) return newIndexes;
   if (
     draggingIndex >= 0 &&
     draggingIndex < Math.max(range.startIndex - range.overscan, 0)

package/src/footer/MRT_TableFooter.tsx

@@ -1,4 +1,3 @@
-import { type VirtualItem } from '@tanstack/react-virtual';
 import TableFooter, { type TableFooterProps } from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -11,13 +10,11 @@ import {
 interface Props<TData extends MRT_RowData> extends TableFooterProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
-  virtualColumns?: VirtualItem[];
 }
 
 export const MRT_TableFooter = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
-  virtualColumns,
   ...rest
 }: Props<TData>) => {
   const {
@@ -68,7 +65,6 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
           footerGroup={footerGroup as any}
           key={footerGroup.id}
           table={table}
-          virtualColumns={virtualColumns}
         />
       ))}
     </TableFooter>

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,4 +1,3 @@
-import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -15,21 +14,20 @@ interface Props<TData extends MRT_RowData> extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
-  virtualColumns?: VirtualItem[];
 }
 
 export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   columnVirtualizer,
   footerGroup,
   table,
-  virtualColumns,
   ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
   } = table;
 
-  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
 
   // if no content in row, skip row
   if (

package/src/head/MRT_TableHead.tsx

@@ -1,4 +1,3 @@
-import { type VirtualItem } from '@tanstack/react-virtual';
 import TableHead, { type TableHeadProps } from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -12,13 +11,11 @@ import {
 interface Props<TData extends MRT_RowData> extends TableHeadProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
-  virtualColumns?: VirtualItem[];
 }
 
 export const MRT_TableHead = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
-  virtualColumns,
   ...rest
 }: Props<TData>) => {
   const {
@@ -85,7 +82,6 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
             headerGroup={headerGroup as any}
             key={headerGroup.id}
             table={table}
-            virtualColumns={virtualColumns}
           />
         ))
       )}

package/src/head/MRT_TableHeadRow.tsx

@@ -1,4 +1,3 @@
-import { type VirtualItem } from '@tanstack/react-virtual';
 import { alpha } from '@mui/material';
 import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
@@ -16,21 +15,20 @@ interface Props<TData extends MRT_RowData> extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
-  virtualColumns?: VirtualItem[];
 }
 
 export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   columnVirtualizer,
   headerGroup,
   table,
-  virtualColumns,
   ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
-  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
 
   const tableRowProps = {
     ...parseFromValuesOrFunc(muiTableHeadRowProps, {

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -1,8 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import {
-  type Range,
-  useVirtualizer,
-} from '@tanstack/react-virtual';
+import { type Range, useVirtualizer } from '@tanstack/react-virtual';
 import {
   extraIndexRangeExtractor,
   parseFromValuesOrFunc,
@@ -49,7 +46,8 @@ export const useMRT_ColumnVirtualizer = <
               .map(
                 (c) =>
                   table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
-              ),
+              )
+              .sort((a, b) => a - b),
           ]
         : [[], []],
     [columnPinning, enableColumnVirtualization, enableColumnPinning],
@@ -69,9 +67,11 @@ export const useMRT_ColumnVirtualizer = <
     return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
   }, [table.getRowModel().rows, columnPinning, columnVisibility]);
 
-  const draggingColumnIndex = table
-    .getVisibleLeafColumns()
-    .findIndex((c) => c.id === draggingColumn?.id);
+  const draggingColumnIndex = draggingColumn?.id
+    ? table
+        .getVisibleLeafColumns()
+        .findIndex((c) => c.id === draggingColumn?.id)
+    : undefined;
 
   const columnVirtualizer = enableColumnVirtualization
     ? (useVirtualizer({
@@ -100,24 +100,27 @@ export const useMRT_ColumnVirtualizer = <
       }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>)
     : undefined;
 
-  if (columnVirtualizerInstanceRef && columnVirtualizer) {
-    //@ts-ignore
-    columnVirtualizerInstanceRef.current = columnVirtualizer;
-  }
-
-  const virtualColumns = columnVirtualizer
-    ? columnVirtualizer.getVirtualItems()
-    : undefined;
-
-  if (columnVirtualizer && virtualColumns?.length) {
-    // @ts-ignore
-    columnVirtualizer.virtualPaddingLeft =
-      virtualColumns[leftPinnedIndexes!.length]?.start ?? 0;
-    // @ts-ignore
-    columnVirtualizer.virtualPaddingRight =
-      columnVirtualizer.getTotalSize() -
-      (virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes!.length]
-        ?.end ?? 0);
+  if (columnVirtualizer) {
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    columnVirtualizer.virtualColumns = virtualColumns;
+    if (virtualColumns.length) {
+      columnVirtualizer.virtualPaddingLeft =
+        (virtualColumns[leftPinnedIndexes.length]?.start ?? 0) -
+        (virtualColumns[leftPinnedIndexes.length - 1]?.end ?? 0);
+      columnVirtualizer.virtualPaddingRight =
+        columnVirtualizer.getTotalSize() -
+        (virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]
+          ?.end ?? 0) -
+        (rightPinnedIndexes.length
+          ? columnVirtualizer.getTotalSize() -
+            (virtualColumns[virtualColumns.length - rightPinnedIndexes.length]
+              ?.start ?? 0)
+          : 0);
+    }
+    if (columnVirtualizerInstanceRef) {
+      //@ts-ignore
+      columnVirtualizerInstanceRef.current = columnVirtualizer;
+    }
   }
 
   return columnVirtualizer as any;

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -1,4 +1,6 @@
-import { type RefObject, useMemo } from 'react';
+import { type ReactNode, type RefObject, useMemo } from 'react';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
 import { MRT_TableBodyRowGrabHandle } from '../body';
 import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
@@ -63,6 +65,7 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
       tableOptions.enableRowOrdering,
       tableOptions.enableRowSelection,
       tableOptions.enableSelectAll,
+      tableOptions.groupedColumnMode,
       tableOptions.localization,
       tableOptions.positionActionsColumn,
       tableOptions.renderDetailPanel,
@@ -158,11 +161,60 @@ function makeRowExpandColumn<TData extends MRT_RowData>(
     showExpandColumn(tableOptions, tableOptions.state?.grouping ?? grouping)
   ) {
     return {
-      Cell: ({ row, table }) => <MRT_ExpandButton row={row} table={table} />,
+      Cell: ({ cell, column, row, table }) => {
+        const expandButtonProps = { row, table };
+        const subRowsLength = row.subRows?.length;
+        if (
+          tableOptions.groupedColumnMode === 'remove' &&
+          row.groupingColumnId
+        ) {
+          return (
+            <Stack alignItems="center" flexDirection="row" gap="0.25rem">
+              <MRT_ExpandButton {...expandButtonProps} />
+              <Tooltip
+                enterDelay={1000}
+                enterNextDelay={1000}
+                placement="right"
+                title={table.getColumn(row.groupingColumnId).columnDef.header}
+              >
+                <span>{row.groupingValue as ReactNode}</span>
+              </Tooltip>
+              {!!subRowsLength && <span>({subRowsLength})</span>}
+            </Stack>
+          );
+        } else {
+          return (
+            <>
+              <MRT_ExpandButton {...expandButtonProps} />
+              {column.columnDef.GroupedCell?.({ cell, column, row, table })}
+            </>
+          );
+        }
+      },
       Header: tableOptions.enableExpandAll
-        ? ({ table }) => <MRT_ExpandAllButton table={table} />
+        ? ({ table }) => {
+            return (
+              <>
+                <MRT_ExpandAllButton table={table} />
+                {tableOptions.groupedColumnMode === 'remove' &&
+                  grouping
+                    .map(
+                      (groupedColumnId) =>
+                        table.getColumn(groupedColumnId).columnDef.header,
+                    )
+                    .join(', ')}
+              </>
+            );
+          }
         : undefined,
-      ...defaultDisplayColumnProps(tableOptions, id, 'expand'),
+      ...defaultDisplayColumnProps(
+        tableOptions,
+        id,
+        'expand',
+        tableOptions.groupedColumnMode === 'remove'
+          ? tableOptions?.defaultColumn?.size
+          : 60,
+      ),
     };
   }
   return null;
@@ -175,7 +227,13 @@ function makeRowSelectColumn<TData extends MRT_RowData>(
   const id: MRT_DisplayColumnIds = 'mrt-row-select';
   if (order.includes(id)) {
     return {
-      Cell: ({ row, table }) => <MRT_SelectCheckbox row={row} table={table} />,
+      Cell: ({ row, staticRowIndex, table }) => (
+        <MRT_SelectCheckbox
+          row={row}
+          staticRowIndex={staticRowIndex}
+          table={table}
+        />
+      ),
       Header:
         tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
           ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
@@ -193,7 +251,10 @@ function makeRowNumbersColumn<TData extends MRT_RowData>(
   const id: MRT_DisplayColumnIds = 'mrt-row-numbers';
   if (order.includes(id) || tableOptions.enableRowNumbers)
     return {
-      Cell: ({ row }) => row.index + 1,
+      Cell: ({ row, staticRowIndex }) =>
+        ((tableOptions.rowNumberDisplayMode === 'static'
+          ? staticRowIndex
+          : row.index) ?? 0) + 1,
       Header: () => tableOptions.localization.rowNumber,
       ...defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'),
     };

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -57,9 +57,13 @@ export const useMRT_RowVirtualizer = <
       }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>)
     : undefined;
 
-  if (rowVirtualizerInstanceRef && rowVirtualizer) {
-    //@ts-ignore
-    rowVirtualizerInstanceRef.current = rowVirtualizer;
+  if (rowVirtualizer) {
+    const virtualRows = rowVirtualizer.getVirtualItems();
+    rowVirtualizer.virtualRows = virtualRows;
+    if (rowVirtualizerInstanceRef) {
+      //@ts-ignore
+      rowVirtualizerInstanceRef.current = rowVirtualizer;
+    }
   }
 
   return rowVirtualizer;

package/src/inputs/MRT_FilterTextField.tsx

@@ -465,6 +465,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         />
       ) : (
         <TextField
+          select={isSelectFilter || isMultiSelectFilter}
+          {...commonTextFieldProps}
           SelectProps={{
             displayEmpty: true,
             multiple: isMultiSelectFilter,
@@ -488,10 +490,9 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
                     </Box>
                   )
               : undefined,
+            ...commonTextFieldProps.SelectProps,
           }}
           onChange={handleTextFieldChange}
-          select={isSelectFilter || isMultiSelectFilter}
-          {...commonTextFieldProps}
           value={filterValue ?? ''}
         >
           {(isSelectFilter || isMultiSelectFilter) && [

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,4 +1,4 @@
-import { type MouseEvent } from 'react';
+import { type ChangeEvent, type MouseEvent } from 'react';
 import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
 import Radio, { type RadioProps } from '@mui/material/Radio';
 import Tooltip from '@mui/material/Tooltip';
@@ -13,12 +13,14 @@ import {
 interface Props<TData extends MRT_RowData> extends CheckboxProps {
   row?: MRT_Row<TData>;
   selectAll?: boolean;
+  staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   row,
   selectAll,
+  staticRowIndex,
   table,
   ...rest
 }: Props<TData>) => {
@@ -39,18 +41,56 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   const checkboxProps = {
     ...(!row
       ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-      : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table })),
+      : parseFromValuesOrFunc(muiSelectCheckboxProps, {
+          row,
+          staticRowIndex,
+          table,
+        })),
     ...rest,
   };
 
+  const isStickySelection =
+    enableRowPinning && rowPinningDisplayMode?.includes('select');
+
   const allRowsSelected = selectAll
     ? selectAllMode === 'page'
       ? table.getIsAllPageRowsSelected()
       : table.getIsAllRowsSelected()
     : undefined;
 
+  const onSelectionChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    row: MRT_Row<TData>,
+  ) => {
+    if (row.getIsAllSubRowsSelected()) {
+      row.subRows?.forEach((r) => r.toggleSelected(false));
+    }
+    row.getToggleSelectedHandler()(event);
+
+    if (isStickySelection) {
+      row.pin(
+        !row.getIsPinned() && event.target.checked
+          ? rowPinningDisplayMode?.includes('bottom')
+            ? 'bottom'
+            : 'top'
+          : false,
+      );
+    }
+  };
+
+  const onSelectAllChange = (event: ChangeEvent<HTMLInputElement>) => {
+    selectAllMode === 'all'
+      ? table.getToggleAllRowsSelectedHandler()(event)
+      : table.getToggleAllPageRowsSelectedHandler()(event);
+    if (isStickySelection) {
+      table.setRowPinning({ bottom: [], top: [] });
+    }
+  };
+
   const commonProps = {
-    checked: selectAll ? allRowsSelected : row?.getIsSelected(),
+    checked: selectAll
+      ? allRowsSelected
+      : row?.getIsSelected() || row?.getIsAllSubRowsSelected(),
     disabled:
       isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     inputProps: {
@@ -60,24 +100,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     },
     onChange: (event) => {
       event.stopPropagation();
-      row
-        ? row.getToggleSelectedHandler()(event)
-        : selectAllMode === 'all'
-          ? table.getToggleAllRowsSelectedHandler()(event)
-          : table.getToggleAllPageRowsSelectedHandler()(event);
-      if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
-        if (row) {
-          row.pin(
-            !row.getIsPinned() && event.target.checked
-              ? rowPinningDisplayMode?.includes('bottom')
-                ? 'bottom'
-                : 'top'
-              : false,
-          );
-        } else {
-          table.setRowPinning({ bottom: [], top: [] });
-        }
-      }
+      row ? onSelectionChange(event, row) : onSelectAllChange(event);
     },
     size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
     ...checkboxProps,