material-react-table 2.3.1 → 2.4.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.1",
+  "version": "2.4.1",
   "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,9 +113,9 @@
     "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,20 @@ 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,29 +57,23 @@ 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()
-    : undefined;
+  const { virtualRows } = rowVirtualizer ?? {};
 
   const commonRowProps = {
     columnVirtualizer,
     numRows: rows.length,
     table,
-    virtualColumns,
-    virtualPaddingLeft,
-    virtualPaddingRight,
   };
 
   const CreatingRow = creatingRow && createDisplayMode === 'row' && (
@@ -192,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} />
                 );
               })}
             </>
@@ -223,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_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,22 +14,20 @@ 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[];
   row: MRT_Row<TData>;
   rowIndex: number;
   table: MRT_TableInstance<TData>;
-  virtualColumns?: VirtualItem[];
-  virtualPaddingLeft?: number;
-  virtualPaddingRight?: number;
   virtualRow?: VirtualItem;
 }
 
@@ -41,9 +39,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   row,
   rowIndex,
   table,
-  virtualColumns,
-  virtualPaddingLeft,
-  virtualPaddingRight,
   virtualRow,
 }: Props<TData>) => {
   const theme = useTheme();
@@ -75,6 +70,9 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     rowPinning,
   } = getState();
 
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
   const isPinned = enableRowPinning && row.getIsPinned();
 
   const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {

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/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,21 +1,20 @@
-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 +61,10 @@ 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

@@ -1,9 +1,9 @@
-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';
 import { getMRTTheme } from '../style.utils';
 import {
+  type MRT_ColumnVirtualizer,
   type MRT_Header,
   type MRT_HeaderGroup,
   type MRT_RowData,
@@ -11,25 +11,24 @@ 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 { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
   // if no content in row, skip row
   if (
     !footerGroup.headers?.some(

package/src/head/MRT_TableHead.tsx

@@ -1,22 +1,21 @@
-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';
 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 +78,10 @@ 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

@@ -1,10 +1,10 @@
-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';
 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 +12,24 @@ 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 { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
   const tableRowProps = {
     ...parseFromValuesOrFunc(muiTableHeadRowProps, {
       headerGroup,

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -1,14 +1,14 @@
 import { useCallback, useMemo } 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_ColumnVirtualizer,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 export const useMRT_ColumnVirtualizer = <
   TData extends MRT_RowData,
@@ -16,12 +16,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: {
@@ -51,7 +46,8 @@ export const useMRT_ColumnVirtualizer = <
               .map(
                 (c) =>
                   table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
-              ),
+              )
+              .sort((a, b) => a - b),
           ]
         : [[], []],
     [columnPinning, enableColumnVirtualization, enableColumnPinning],
@@ -59,8 +55,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()
@@ -70,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({
@@ -98,27 +97,30 @@ export const useMRT_ColumnVirtualizer = <
           [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
         ),
         ...columnVirtualizerProps,
-      }) as unknown as Virtualizer<TScrollElement, TItemElement>)
-    : undefined;
-
-  if (columnVirtualizerInstanceRef && columnVirtualizer) {
-    //@ts-ignore
-    columnVirtualizerInstanceRef.current = columnVirtualizer;
-  }
-
-  const virtualColumns = columnVirtualizer
-    ? columnVirtualizer.getVirtualItems()
+      }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>)
     : 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_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,12 +54,16 @@ export const useMRT_RowVirtualizer = <
           [draggingRow],
         ),
         ...rowVirtualizerProps,
-      }) as unknown as Virtualizer<TScrollElement, TItemElement>)
+      }) 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/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) {