material-react-table 2.3.0 → 2.4.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.0",
+  "version": "2.4.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.",
@@ -66,8 +66,8 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.3.1",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/material": "^5.15.2",
+    "@mui/icons-material": "^5.15.3",
+    "@mui/material": "^5.15.3",
     "@mui/x-date-pickers": "^6.18.6",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^11.0.1",
@@ -113,8 +113,8 @@
     "react-dom": ">=18.0"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.11.2",
+    "@tanstack/match-sorter-utils": "8.11.3",
+    "@tanstack/react-table": "8.11.3",
     "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,5 @@
 import { memo, useMemo } from 'react';
-import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableBody, { type TableBodyProps } from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
@@ -7,25 +7,22 @@ import { parseFromValuesOrFunc } from '../column.utils';
 import { useMRT_RowVirtualizer } from '../hooks';
 import { useMRT_Rows } from '../hooks/useMRT_Rows';
 import {
+  type MRT_ColumnVirtualizer,
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
 interface Props<TData extends MRT_RowData> extends TableBodyProps {
-  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
-  virtualPaddingLeft?: number;
-  virtualPaddingRight?: number;
 }
 
 export const MRT_TableBody = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   virtualColumns,
-  virtualPaddingLeft,
-  virtualPaddingRight,
   ...rest
 }: Props<TData>) => {
   const {
@@ -62,17 +59,16 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   const tableFooterHeight =
     (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
 
-  const pinnedRowIds = useMemo(
-    () =>
-      getRowModel()
-        .rows.filter((row) => row.getIsPinned())
-        .map((r) => r.id),
-    [rowPinning, table.getRowModel().rows],
-  );
+  const pinnedRowIds = useMemo(() => {
+    if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
+    return getRowModel()
+      .rows.filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+  }, [rowPinning, getRowModel().rows]);
 
-  const rows = useMRT_Rows(table);
+  const rows = useMRT_Rows(table, pinnedRowIds);
 
-  const rowVirtualizer = useMRT_RowVirtualizer(table);
+  const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
 
   const virtualRows = rowVirtualizer
     ? rowVirtualizer.getVirtualItems()
@@ -83,8 +79,6 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     numRows: rows.length,
     table,
     virtualColumns,
-    virtualPaddingLeft,
-    virtualPaddingRight,
   };
 
   const CreatingRow = creatingRow && createDisplayMode === 'row' && (

package/src/body/MRT_TableBodyRow.tsx

@@ -1,5 +1,5 @@
 import { type DragEvent, memo, useMemo, useRef } from 'react';
-import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import {
   type Theme,
@@ -14,13 +14,14 @@ import { parseFromValuesOrFunc } from '../column.utils';
 import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
+  type MRT_ColumnVirtualizer,
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
 interface Props<TData extends MRT_RowData> {
-  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  columnVirtualizer?: MRT_ColumnVirtualizer;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows?: number;
   pinnedRowIds?: string[];
@@ -28,8 +29,6 @@ interface Props<TData extends MRT_RowData> {
   rowIndex: number;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
-  virtualPaddingLeft?: number;
-  virtualPaddingRight?: number;
   virtualRow?: VirtualItem;
 }
 
@@ -42,8 +41,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   rowIndex,
   table,
   virtualColumns,
-  virtualPaddingLeft,
-  virtualPaddingRight,
   virtualRow,
 }: Props<TData>) => {
   const theme = useTheme();
@@ -75,6 +72,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     rowPinning,
   } = getState();
 
+  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
+
   const isPinned = enableRowPinning && row.getIsPinned();
 
   const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
@@ -219,7 +218,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             rowIndex,
             rowRef,
             table,
-            virtualIndex: columnVirtualizer
+            virtualColumnIndex: columnVirtualizer
               ? (cellOrVirtualCell as VirtualItem).index
               : undefined,
           };

package/src/buttons/MRT_EditActionButtons.tsx

@@ -98,15 +98,18 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
               <CancelIcon />
             </IconButton>
           </Tooltip>
-          <Tooltip title={localization.save}>
-            <IconButton
-              aria-label={localization.save}
-              color="info"
-              onClick={handleSubmitRow}
-            >
-              {isSaving ? <CircularProgress size={18} /> : <SaveIcon />}
-            </IconButton>
-          </Tooltip>
+          {((isCreating && onCreatingRowSave) ||
+            (isEditing && onEditingRowSave)) && (
+            <Tooltip title={localization.save}>
+              <IconButton
+                aria-label={localization.save}
+                color="info"
+                onClick={handleSubmitRow}
+              >
+                {isSaving ? <CircularProgress size={18} /> : <SaveIcon />}
+              </IconButton>
+            </Tooltip>
+          )}
         </>
       ) : (
         <>

package/src/footer/MRT_TableFooter.tsx

@@ -2,20 +2,22 @@ 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';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 interface Props<TData extends MRT_RowData> extends TableFooterProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
-  virtualPaddingLeft?: number;
-  virtualPaddingRight?: number;
 }
 
 export const MRT_TableFooter = <TData extends MRT_RowData>({
+  columnVirtualizer,
   table,
   virtualColumns,
-  virtualPaddingLeft,
-  virtualPaddingRight,
   ...rest
 }: Props<TData>) => {
   const {
@@ -62,12 +64,11 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
     >
       {getFooterGroups().map((footerGroup) => (
         <MRT_TableFooterRow
+          columnVirtualizer={columnVirtualizer}
           footerGroup={footerGroup as any}
           key={footerGroup.id}
           table={table}
           virtualColumns={virtualColumns}
-          virtualPaddingLeft={virtualPaddingLeft}
-          virtualPaddingRight={virtualPaddingRight}
         />
       ))}
     </TableFooter>

package/src/footer/MRT_TableFooterRow.tsx

@@ -4,6 +4,7 @@ import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { getMRTTheme } from '../style.utils';
 import {
+  type MRT_ColumnVirtualizer,
   type MRT_Header,
   type MRT_HeaderGroup,
   type MRT_RowData,
@@ -11,25 +12,25 @@ import {
 } from '../types';
 
 interface Props<TData extends MRT_RowData> extends TableRowProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
-  virtualPaddingLeft?: number;
-  virtualPaddingRight?: number;
 }
 
 export const MRT_TableFooterRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
   footerGroup,
   table,
   virtualColumns,
-  virtualPaddingLeft,
-  virtualPaddingRight,
   ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
   } = table;
 
+  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
+
   // if no content in row, skip row
   if (
     !footerGroup.headers?.some(

package/src/head/MRT_TableHead.tsx

@@ -3,20 +3,22 @@ import TableHead, { type TableHeadProps } from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ToolbarAlertBanner } from '../toolbar';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 interface Props<TData extends MRT_RowData> extends TableHeadProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
-  virtualPaddingLeft?: number;
-  virtualPaddingRight?: number;
 }
 
 export const MRT_TableHead = <TData extends MRT_RowData>({
+  columnVirtualizer,
   table,
   virtualColumns,
-  virtualPaddingLeft,
-  virtualPaddingRight,
   ...rest
 }: Props<TData>) => {
   const {
@@ -79,12 +81,11 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
       ) : (
         getHeaderGroups().map((headerGroup) => (
           <MRT_TableHeadRow
+            columnVirtualizer={columnVirtualizer}
             headerGroup={headerGroup as any}
             key={headerGroup.id}
             table={table}
             virtualColumns={virtualColumns}
-            virtualPaddingLeft={virtualPaddingLeft}
-            virtualPaddingRight={virtualPaddingRight}
           />
         ))
       )}

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -77,7 +77,9 @@ export const MRT_TableHeadCellColumnActionsButton = <
           })}
           title={undefined}
         >
-          <MoreVertIcon style={{ transform: 'scale(0.9)' }} />
+          {iconButtonProps?.children ?? (
+            <MoreVertIcon style={{ transform: 'scale(0.9)' }} />
+          )}
         </IconButton>
       </Tooltip>
       {anchorEl && (

package/src/head/MRT_TableHeadRow.tsx

@@ -5,6 +5,7 @@ import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { getMRTTheme } from '../style.utils';
 import {
+  type MRT_ColumnVirtualizer,
   type MRT_Header,
   type MRT_HeaderGroup,
   type MRT_RowData,
@@ -12,25 +13,25 @@ import {
 } from '../types';
 
 interface Props<TData extends MRT_RowData> extends TableRowProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
-  virtualPaddingLeft?: number;
-  virtualPaddingRight?: number;
 }
 
 export const MRT_TableHeadRow = <TData extends MRT_RowData>({
+  columnVirtualizer,
   headerGroup,
   table,
   virtualColumns,
-  virtualPaddingLeft,
-  virtualPaddingRight,
   ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
+  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
+
   const tableRowProps = {
     ...parseFromValuesOrFunc(muiTableHeadRowProps, {
       headerGroup,

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -1,14 +1,17 @@
 import { useCallback, useMemo } from 'react';
 import {
   type Range,
-  type Virtualizer,
   useVirtualizer,
 } from '@tanstack/react-virtual';
 import {
   extraIndexRangeExtractor,
   parseFromValuesOrFunc,
 } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 export const useMRT_ColumnVirtualizer = <
   TData extends MRT_RowData,
@@ -16,12 +19,7 @@ export const useMRT_ColumnVirtualizer = <
   TItemElement extends Element = HTMLTableCellElement,
 >(
   table: MRT_TableInstance<TData>,
-):
-  | (Virtualizer<TScrollElement, TItemElement> & {
-      virtualPaddingLeft?: number;
-      virtualPaddingRight?: number;
-    })
-  | undefined => {
+): MRT_ColumnVirtualizer | undefined => {
   const {
     getState,
     options: {
@@ -59,8 +57,9 @@ export const useMRT_ColumnVirtualizer = <
 
   //get first 16 column widths and average them if calc is needed
   const averageColumnWidth = useMemo(() => {
-    if (!enableColumnVirtualization || columnVirtualizerProps?.estimateSize)
+    if (!enableColumnVirtualization || columnVirtualizerProps?.estimateSize) {
       return 0;
+    }
     const columnsWidths =
       table
         .getRowModel()
@@ -98,7 +97,7 @@ export const useMRT_ColumnVirtualizer = <
           [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
         ),
         ...columnVirtualizerProps,
-      }) as unknown as Virtualizer<TScrollElement, TItemElement>)
+      }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>)
     : undefined;
 
   if (columnVirtualizerInstanceRef && columnVirtualizer) {

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -1,14 +1,15 @@
 import { useCallback } from 'react';
-import {
-  type Range,
-  type Virtualizer,
-  useVirtualizer,
-} from '@tanstack/react-virtual';
+import { type Range, useVirtualizer } from '@tanstack/react-virtual';
 import {
   extraIndexRangeExtractor,
   parseFromValuesOrFunc,
 } from '../column.utils';
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_RowVirtualizer,
+  type MRT_TableInstance,
+} from '../types';
 
 export const useMRT_RowVirtualizer = <
   TData extends MRT_RowData,
@@ -16,7 +17,8 @@ export const useMRT_RowVirtualizer = <
   TItemElement extends Element = HTMLTableRowElement,
 >(
   table: MRT_TableInstance<TData>,
-): Virtualizer<TScrollElement, TItemElement> | undefined => {
+  rows?: MRT_Row<TData>[],
+): MRT_RowVirtualizer<TScrollElement, TItemElement> | undefined => {
   const {
     getRowModel,
     getState,
@@ -35,7 +37,7 @@ export const useMRT_RowVirtualizer = <
 
   const rowVirtualizer = enableRowVirtualization
     ? (useVirtualizer({
-        count: getRowModel().rows.length,
+        count: rows?.length ?? getRowModel().rows.length,
         estimateSize: () =>
           density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
         getScrollElement: () => tableContainerRef.current,
@@ -52,7 +54,7 @@ export const useMRT_RowVirtualizer = <
           [draggingRow],
         ),
         ...rowVirtualizerProps,
-      }) as unknown as Virtualizer<TScrollElement, TItemElement>)
+      }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>)
     : undefined;
 
   if (rowVirtualizerInstanceRef && rowVirtualizer) {

package/src/hooks/useMRT_Rows.ts

@@ -9,6 +9,7 @@ import {
 
 export const useMRT_Rows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
+  pinnedRowIds: string[] = [],
 ): MRT_Row<TData>[] => {
   const {
     getBottomRows,
@@ -49,14 +50,6 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
     ],
   );
 
-  const pinnedRowIds = useMemo(
-    () =>
-      getRowModel()
-        .rows.filter((row) => row.getIsPinned())
-        .map((r) => r.id),
-    [rowPinning, table.getRowModel().rows],
-  );
-
   const rows = useMemo(() => {
     let rows: MRT_Row<TData>[] = [];
     if (!shouldRankRows) {

package/src/inputs/MRT_FilterTextField.tsx

@@ -21,6 +21,14 @@ import {
   DatePicker,
   type DatePickerProps,
 } from '@mui/x-date-pickers/DatePicker';
+import {
+  DateTimePicker,
+  type DateTimePickerProps,
+} from '@mui/x-date-pickers/DateTimePicker';
+import {
+  TimePicker,
+  type TimePickerProps,
+} from '@mui/x-date-pickers/TimePicker';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import {
@@ -50,7 +58,9 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       manualFiltering,
       muiFilterAutocompleteProps,
       muiFilterDatePickerProps,
+      muiFilterDateTimePickerProps,
       muiFilterTextFieldProps,
+      muiFilterTimePickerProps,
     },
     refs: { filterInputRefs },
     setColumnFilterFns,
@@ -84,7 +94,24 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     }),
   };
 
-  const isDateFilter = filterVariant?.startsWith('date');
+  const dateTimePickerProps: DateTimePickerProps<any> = {
+    ...parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
+      column,
+      table,
+    }),
+  };
+
+  const timePickerProps: TimePickerProps<any> = {
+    ...parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
+      column,
+      table,
+    }),
+  };
+
+  const isDateFilter =
+    filterVariant?.startsWith('date') || filterVariant?.startsWith('time');
   const isAutocompleteFilter = filterVariant === 'autocomplete';
   const isRangeFilter =
     filterVariant?.includes('range') || rangeFilterIndex !== undefined;
@@ -350,14 +377,50 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     }),
   };
 
+  const commonDatePickerProps = {
+    onChange: (newDate: any) => {
+      handleChange(newDate);
+    },
+    value: filterValue || null,
+  };
+
   return (
     <>
-      {isDateFilter ? (
-        <DatePicker
-          onChange={(newDate) => {
-            handleChange(newDate);
+      {filterVariant?.startsWith('time') ? (
+        <TimePicker
+          {...commonDatePickerProps}
+          {...timePickerProps}
+          slotProps={{
+            field: {
+              clearable: true,
+              onClear: () => handleClear(),
+              ...timePickerProps?.slotProps?.field,
+            },
+            textField: {
+              ...commonTextFieldProps,
+              ...timePickerProps?.slotProps?.textField,
+            },
+          }}
+        />
+      ) : filterVariant?.startsWith('datetime') ? (
+        <DateTimePicker
+          {...commonDatePickerProps}
+          {...dateTimePickerProps}
+          slotProps={{
+            field: {
+              clearable: true,
+              onClear: () => handleClear(),
+              ...dateTimePickerProps?.slotProps?.field,
+            },
+            textField: {
+              ...commonTextFieldProps,
+              ...dateTimePickerProps?.slotProps?.textField,
+            },
           }}
-          value={filterValue || null}
+        />
+      ) : filterVariant?.startsWith('date') ? (
+        <DatePicker
+          {...commonDatePickerProps}
           {...datePickerProps}
           slotProps={{
             field: {

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -51,7 +51,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
 
   const commonProps = {
     checked: selectAll ? allRowsSelected : row?.getIsSelected(),
-    disabled: isLoading || (row && !row.getCanSelect()),
+    disabled:
+      isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     inputProps: {
       'aria-label': selectAll
         ? localization.toggleSelectAll

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -103,7 +103,7 @@ export const mrtFilterOptions = (
 const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
 const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
-const rangeVariants = ['range-slider', 'date-range', 'range'];
+const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
 
 interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;

package/src/table/MRT_Table.tsx

@@ -53,22 +53,14 @@ export const MRT_Table = <TData extends MRT_RowData>({
 
   const columnVirtualizer = useMRT_ColumnVirtualizer(table);
 
-  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
-
   const virtualColumns = columnVirtualizer
     ? columnVirtualizer.getVirtualItems()
     : undefined;
 
   const commonTableGroupProps = {
+    columnVirtualizer,
     table,
     virtualColumns,
-    virtualPaddingLeft,
-    virtualPaddingRight,
-  };
-
-  const commonTableBodyProps = {
-    ...commonTableGroupProps,
-    columnVirtualizer,
   };
 
   return (
@@ -84,9 +76,9 @@ export const MRT_Table = <TData extends MRT_RowData>({
     >
       {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
       {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
-        <Memo_MRT_TableBody {...commonTableBodyProps} />
+        <Memo_MRT_TableBody {...commonTableGroupProps} />
       ) : (
-        <MRT_TableBody {...commonTableBodyProps} />
+        <MRT_TableBody {...commonTableGroupProps} />
       )}
       {enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />}
     </Table>