material-react-table 2.1.0 → 2.2.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.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.",
@@ -61,30 +61,30 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.6",
+    "@babel/core": "^7.23.7",
     "@babel/preset-react": "^7.23.3",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.3.1",
-    "@mui/icons-material": "^5.15.1",
-    "@mui/material": "^5.15.1",
-    "@mui/x-date-pickers": "^6.18.5",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/material": "^5.15.2",
+    "@mui/x-date-pickers": "^6.18.6",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^11.0.1",
-    "@storybook/addon-a11y": "^7.6.6",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-storysource": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-vite": "^7.6.6",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-vite": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.45",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -97,7 +97,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.1",
-    "storybook": "^7.6.6",
+    "storybook": "^7.6.7",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",

package/src/body/MRT_TableBody.tsx

@@ -1,19 +1,11 @@
-import { memo, useCallback, useMemo } from 'react';
-import {
-  type Range,
-  type VirtualItem,
-  type Virtualizer,
-  useVirtualizer,
-} from '@tanstack/react-virtual';
+import { memo, useMemo } from 'react';
+import { type VirtualItem, type Virtualizer } 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';
-import {
-  extraIndexRangeExtractor,
-  getCanRankRows,
-  parseFromValuesOrFunc,
-} from '../column.utils';
-import { rankGlobalFuzzy } from '../sortingFns';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { useMRT_RowVirtualizer } from '../hooks';
+import { useMRT_Rows } from '../hooks/useMRT_Rows';
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -38,56 +30,30 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
 }: Props<TData>) => {
   const {
     getBottomRows,
-    getCenterRows,
     getIsSomeRowsPinned,
-    getPrePaginationRowModel,
     getRowModel,
     getState,
     getTopRows,
     options: {
       createDisplayMode,
-      enableGlobalFilterRankedResults,
-      enablePagination,
-      enableRowPinning,
-      enableRowVirtualization,
       enableStickyFooter,
       enableStickyHeader,
       layoutMode,
       localization,
-      manualExpanding,
-      manualFiltering,
-      manualGrouping,
-      manualPagination,
-      manualSorting,
       memoMode,
       muiTableBodyProps,
       renderEmptyRowsFallback,
       rowPinningDisplayMode,
-      rowVirtualizerInstanceRef,
-      rowVirtualizerOptions,
     },
-    refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef },
+    refs: { tableFooterRef, tableHeadRef, tablePaperRef },
   } = table;
-  const {
-    columnFilters,
-    creatingRow,
-    density,
-    draggingRow,
-    expanded,
-    globalFilter,
-    isFullScreen,
-    pagination,
-    rowPinning,
-    sorting,
-  } = getState();
+  const { columnFilters, creatingRow, globalFilter, isFullScreen, rowPinning } =
+    getState();
 
   const tableBodyProps = {
     ...parseFromValuesOrFunc(muiTableBodyProps, { table }),
     ...rest,
   };
-  const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
-    table,
-  });
 
   const tableHeadHeight =
     ((enableStickyHeader || isFullScreen) &&
@@ -96,23 +62,6 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   const tableFooterHeight =
     (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
 
-  const shouldRankRows = useMemo(
-    () =>
-      getCanRankRows(table) &&
-      !Object.values(sorting).some(Boolean) &&
-      globalFilter,
-    [
-      enableGlobalFilterRankedResults,
-      expanded,
-      globalFilter,
-      manualExpanding,
-      manualFiltering,
-      manualGrouping,
-      manualSorting,
-      sorting,
-    ],
-  );
-
   const pinnedRowIds = useMemo(
     () =>
       getRowModel()
@@ -121,66 +70,9 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     [rowPinning, table.getRowModel().rows],
   );
 
-  const rows = useMemo(() => {
-    let rows: MRT_Row<TData>[] = [];
-    if (!shouldRankRows) {
-      rows =
-        !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
-          ? getRowModel().rows
-          : getCenterRows();
-    } else {
-      rows = getPrePaginationRowModel().rows.sort((a, b) =>
-        rankGlobalFuzzy(a, b),
-      );
-      if (enablePagination && !manualPagination) {
-        const start = pagination.pageIndex * pagination.pageSize;
-        rows = rows.slice(start, start + pagination.pageSize);
-      }
-    }
-    if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
-      rows = [
-        ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
-        ...rows,
-        ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
-      ];
-    }
-
-    return rows;
-  }, [
-    shouldRankRows,
-    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
-    pagination.pageIndex,
-    pagination.pageSize,
-    rowPinning,
-  ]);
-
-  const rowVirtualizer:
-    | Virtualizer<HTMLDivElement, HTMLTableRowElement>
-    | undefined = enableRowVirtualization
-    ? useVirtualizer({
-        count: rows.length,
-        estimateSize: () =>
-          density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
-        getScrollElement: () => tableContainerRef.current,
-        measureElement:
-          typeof window !== 'undefined' &&
-          navigator.userAgent.indexOf('Firefox') === -1
-            ? (element) => element?.getBoundingClientRect().height
-            : undefined,
-        overscan: 4,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
-          },
-          [draggingRow],
-        ),
-        ...rowVirtualizerProps,
-      })
-    : undefined;
+  const rows = useMRT_Rows(table);
 
-  if (rowVirtualizerInstanceRef && rowVirtualizer) {
-    rowVirtualizerInstanceRef.current = rowVirtualizer;
-  }
+  const rowVirtualizer = useMRT_RowVirtualizer(table);
 
   const virtualRows = rowVirtualizer
     ? rowVirtualizer.getVirtualItems()
@@ -227,9 +119,10 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
         {...tableBodyProps}
         sx={(theme) => ({
           display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
-          height: rowVirtualizer
-            ? `${rowVirtualizer.getTotalSize()}px`
-            : 'inherit',
+          height:
+            rowVirtualizer
+              ? `${rowVirtualizer.getTotalSize()}px`
+              : undefined,
           minHeight: !rows.length ? '100px' : undefined,
           position: 'relative',
           ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
@@ -289,11 +182,11 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                 };
                 return memoMode === 'rows' ? (
                   <Memo_MRT_TableBodyRow
-                    key={`${row.id}${row.index}`}
+                    key={`${row.id}-${row.index}`}
                     {...props}
                   />
                 ) : (
-                  <MRT_TableBodyRow key={`${row.id}${row.index}`} {...props} />
+                  <MRT_TableBodyRow key={`${row.id}-${row.index}`} {...props} />
                 );
               })}
             </>

package/src/body/MRT_TableBodyCell.tsx

@@ -33,7 +33,7 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
-  virtualIndex?: number;
+  virtualColumnIndex?: number;
 }
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
@@ -43,7 +43,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   rowIndex,
   rowRef,
   table,
-  virtualIndex,
+  virtualColumnIndex,
   ...rest
 }: Props<TData>) => {
   const theme = useTheme();
@@ -212,7 +212,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
-      data-index={virtualIndex}
+      data-index={virtualColumnIndex}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           measureElement?.(node);

package/src/body/MRT_TableBodyRow.tsx

@@ -106,10 +106,14 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
   const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme as any);
 
-  const rowHeight =
+  const defaultRowHeight =
+    density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
+
+  const customRowHeight =
     // @ts-ignore
-    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) ||
-    (density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69);
+    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) || undefined;
+
+  const rowHeight = customRowHeight || defaultRowHeight;
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableRowOrdering && draggingRow) {
@@ -128,7 +132,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   return (
     <>
       <TableRow
-        data-index={virtualRow?.index}
+        data-index={rowIndex}
         data-pinned={!!isPinned || undefined}
         data-selected={row.getIsSelected() || undefined}
         onDragEnter={handleDragEnter}
@@ -142,7 +146,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         {...tableRowProps}
         style={{
           transform: virtualRow
-            ? `translateY(${virtualRow?.start}px)`
+            ? `translateY(${virtualRow.start}px)`
             : undefined,
           ...tableRowProps?.style,
         }}

package/src/hooks/index.ts

@@ -1,4 +1,7 @@
+export * from './useMRT_ColumnVirtualizer';
 export * from './useMRT_DisplayColumns';
 export * from './useMRT_Effects';
+export * from './useMRT_RowVirtualizer';
+export * from './useMRT_Rows';
 export * from './useMRT_TableInstance';
 export * from './useMRT_TableOptions';

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -0,0 +1,125 @@
+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';
+
+export const useMRT_ColumnVirtualizer = <
+  TData extends MRT_RowData,
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableCellElement,
+>(
+  table: MRT_TableInstance<TData>,
+):
+  | (Virtualizer<TScrollElement, TItemElement> & {
+      virtualPaddingLeft?: number;
+      virtualPaddingRight?: number;
+    })
+  | undefined => {
+  const {
+    getState,
+    options: {
+      columnVirtualizerInstanceRef,
+      columnVirtualizerOptions,
+      enableColumnPinning,
+      enableColumnVirtualization,
+    },
+    refs: { tableContainerRef },
+  } = table;
+  const { columnPinning, columnVisibility, draggingColumn } = getState();
+
+  const columnVirtualizerProps = parseFromValuesOrFunc(
+    columnVirtualizerOptions,
+    {
+      table,
+    },
+  );
+
+  const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
+    () =>
+      enableColumnVirtualization && enableColumnPinning
+        ? [
+            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+              .getRightLeafColumns()
+              .map(
+                (c) =>
+                  table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
+              ),
+          ]
+        : [[], []],
+    [columnPinning, enableColumnVirtualization, enableColumnPinning],
+  );
+
+  //get first 16 column widths and average them if calc is needed
+  const averageColumnWidth = useMemo(() => {
+    if (!enableColumnVirtualization || columnVirtualizerProps?.estimateSize)
+      return 0;
+    const columnsWidths =
+      table
+        .getRowModel()
+        .rows[0]?.getCenterVisibleCells()
+        ?.slice(0, 16)
+        ?.map((cell) => cell.column.getSize() * 1.2) ?? [];
+    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 columnVirtualizer = enableColumnVirtualization
+    ? (useVirtualizer({
+        count: table.getVisibleLeafColumns().length,
+        estimateSize: () => averageColumnWidth,
+        getScrollElement: () => tableContainerRef.current,
+        horizontal: true,
+        overscan: 3,
+        rangeExtractor: useCallback(
+          (range: Range) => {
+            const newIndexes = extraIndexRangeExtractor(
+              range,
+              draggingColumnIndex,
+            );
+            return [
+              ...new Set([
+                ...leftPinnedIndexes,
+                ...newIndexes,
+                ...rightPinnedIndexes,
+              ]),
+            ];
+          },
+          [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
+        ),
+        ...columnVirtualizerProps,
+      }) as unknown as Virtualizer<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);
+  }
+
+  return columnVirtualizer as any;
+};

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -16,6 +16,7 @@ import {
   type MRT_Row,
   type MRT_RowData,
 } from '../types';
+import { MRT_DefaultDisplayColumn } from '.';
 
 interface Params<TData extends MRT_RowData> {
   columnOrder: MRT_ColumnOrderState;
@@ -217,6 +218,7 @@ function makeSpacerColumn<TData extends MRT_RowData>(
   if (order.includes(id)) {
     return {
       ...defaultDisplayColumnProps(tableOptions, id, undefined, 0),
+      ...MRT_DefaultDisplayColumn,
       muiTableBodyCellProps: blankColProps,
       muiTableFooterCellProps: blankColProps,
       muiTableHeadCellProps: blankColProps,

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -0,0 +1,64 @@
+import { useCallback } 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';
+
+export const useMRT_RowVirtualizer = <
+  TData extends MRT_RowData,
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableRowElement,
+>(
+  table: MRT_TableInstance<TData>,
+): Virtualizer<TScrollElement, TItemElement> | undefined => {
+  const {
+    getRowModel,
+    getState,
+    options: {
+      enableRowVirtualization,
+      rowVirtualizerInstanceRef,
+      rowVirtualizerOptions,
+    },
+    refs: { tableContainerRef },
+  } = table;
+  const { density, draggingRow } = getState();
+
+  const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
+    table,
+  });
+
+  const rowVirtualizer = enableRowVirtualization
+    ? (useVirtualizer({
+        count: getRowModel().rows.length,
+        estimateSize: () =>
+          density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73,
+        getScrollElement: () => tableContainerRef.current,
+        measureElement:
+          typeof window !== 'undefined' &&
+          navigator.userAgent.indexOf('Firefox') === -1
+            ? (element) => element?.getBoundingClientRect().height
+            : undefined,
+        overscan: 4,
+        rangeExtractor: useCallback(
+          (range: Range) => {
+            return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
+          },
+          [draggingRow],
+        ),
+        ...rowVirtualizerProps,
+      }) as unknown as Virtualizer<TScrollElement, TItemElement>)
+    : undefined;
+
+  if (rowVirtualizerInstanceRef && rowVirtualizer) {
+    //@ts-ignore
+    rowVirtualizerInstanceRef.current = rowVirtualizer;
+  }
+
+  return rowVirtualizer;
+};

package/src/hooks/useMRT_Rows.ts

@@ -0,0 +1,94 @@
+import { useMemo } from 'react';
+import { getCanRankRows } from '../column.utils';
+import { rankGlobalFuzzy } from '../sortingFns';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+
+export const useMRT_Rows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+): MRT_Row<TData>[] => {
+  const {
+    getBottomRows,
+    getCenterRows,
+    getPrePaginationRowModel,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      enableGlobalFilterRankedResults,
+      enablePagination,
+      enableRowPinning,
+      manualExpanding,
+      manualFiltering,
+      manualGrouping,
+      manualPagination,
+      manualSorting,
+      rowPinningDisplayMode,
+    },
+  } = table;
+  const { expanded, globalFilter, pagination, rowPinning, sorting } =
+    getState();
+
+  const shouldRankRows = useMemo(
+    () =>
+      getCanRankRows(table) &&
+      !Object.values(sorting).some(Boolean) &&
+      globalFilter,
+    [
+      enableGlobalFilterRankedResults,
+      expanded,
+      globalFilter,
+      manualExpanding,
+      manualFiltering,
+      manualGrouping,
+      manualSorting,
+      sorting,
+    ],
+  );
+
+  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) {
+      rows =
+        !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
+          ? getRowModel().rows
+          : getCenterRows();
+    } else {
+      rows = getPrePaginationRowModel().rows.sort((a, b) =>
+        rankGlobalFuzzy(a, b),
+      );
+      if (enablePagination && !manualPagination) {
+        const start = pagination.pageIndex * pagination.pageSize;
+        rows = rows.slice(start, start + pagination.pageSize);
+      }
+    }
+    if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
+      rows = [
+        ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+        ...rows,
+        ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
+      ];
+    }
+
+    return rows;
+  }, [
+    shouldRankRows,
+    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
+    pagination.pageIndex,
+    pagination.pageSize,
+    rowPinning,
+  ]);
+
+  return rows;
+};