material-react-table 2.1.0 → 2.2.0

package/src/table/MRT_Table.tsx

@@ -1,17 +1,10 @@
-import { useCallback, useMemo } from 'react';
-import {
-  type Range,
-  type Virtualizer,
-  useVirtualizer,
-} from '@tanstack/react-virtual';
+import { useMemo } from 'react';
 import Table, { type TableProps } from '@mui/material/Table';
 import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
-import {
-  extraIndexRangeExtractor,
-  parseFromValuesOrFunc,
-} from '../column.utils';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
+import { useMRT_ColumnVirtualizer } from '../hooks/useMRT_ColumnVirtualizer';
 import { parseCSSVarId } from '../style.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
@@ -27,11 +20,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
     getFlatHeaders,
     getState,
     options: {
-      columnVirtualizerInstanceRef,
-      columnVirtualizerOptions,
       columns,
-      enableColumnPinning,
-      enableColumnVirtualization,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -39,27 +28,15 @@ export const MRT_Table = <TData extends MRT_RowData>({
       memoMode,
       muiTableProps,
     },
-    refs: { tableContainerRef },
   } = table;
-  const {
-    columnPinning,
-    columnSizing,
-    columnSizingInfo,
-    columnVisibility,
-    draggingColumn,
-    isFullScreen,
-  } = getState();
+  const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
+    getState();
 
   const tableProps = {
     ...parseFromValuesOrFunc(muiTableProps, { table }),
     ...rest,
   };
 
-  const columnVirtualizerProps = parseFromValuesOrFunc(
-    columnVirtualizerOptions,
-    { table },
-  );
-
   const columnSizeVars = useMemo(() => {
     const headers = getFlatHeaders();
     const colSizes: { [key: string]: number } = {};
@@ -74,93 +51,26 @@ export const MRT_Table = <TData extends MRT_RowData>({
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
 
-  //get first 16 column widths and average them
-  const averageColumnWidth = useMemo(() => {
-    if (!enableColumnVirtualization) 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 [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
-    () =>
-      enableColumnVirtualization && enableColumnPinning
-        ? [
-            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-              .getRightLeafColumns()
-              .map(
-                (c) =>
-                  table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
-              ),
-          ]
-        : [[], []],
-    [columnPinning, enableColumnVirtualization, enableColumnPinning],
-  );
-
-  const draggingColumnIndex = table
-    .getVisibleLeafColumns()
-    .findIndex((c) => c.id === draggingColumn?.id);
+  const columnVirtualizer = useMRT_ColumnVirtualizer(table);
 
-  const columnVirtualizer:
-    | Virtualizer<HTMLDivElement, HTMLTableCellElement>
-    | undefined = enableColumnVirtualization
-    ? useVirtualizer({
-        count: table.getVisibleLeafColumns().length,
-        estimateSize: () => averageColumnWidth,
-        getScrollElement: () => tableContainerRef.current,
-        horizontal: true,
-        overscan: 3,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            const newIndexs = extraIndexRangeExtractor(
-              range,
-              draggingColumnIndex,
-            );
-            return [
-              ...new Set([
-                ...leftPinnedIndexes,
-                ...newIndexs,
-                ...rightPinnedIndexes,
-              ]),
-            ];
-          },
-          [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
-        ),
-        ...columnVirtualizerProps,
-      })
-    : undefined;
-
-  if (columnVirtualizerInstanceRef && columnVirtualizer) {
-    columnVirtualizerInstanceRef.current = columnVirtualizer;
-  }
+  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
 
   const virtualColumns = columnVirtualizer
     ? columnVirtualizer.getVirtualItems()
     : undefined;
 
-  let virtualPaddingLeft: number | undefined;
-  let virtualPaddingRight: number | undefined;
-
-  if (columnVirtualizer && virtualColumns?.length) {
-    virtualPaddingLeft = virtualColumns[leftPinnedIndexes.length]?.start ?? 0;
-    virtualPaddingRight =
-      columnVirtualizer.getTotalSize() -
-      (virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]
-        ?.end ?? 0);
-  }
-
-  const props = {
+  const commonTableGroupProps = {
     table,
     virtualColumns,
     virtualPaddingLeft,
     virtualPaddingRight,
   };
 
+  const commonTableBodyProps = {
+    ...commonTableGroupProps,
+    columnVirtualizer,
+  };
+
   return (
     <Table
       stickyHeader={enableStickyHeader || isFullScreen}
@@ -172,13 +82,13 @@ export const MRT_Table = <TData extends MRT_RowData>({
         ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
       })}
     >
-      {enableTableHead && <MRT_TableHead {...props} />}
+      {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
       {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
-        <Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+        <Memo_MRT_TableBody {...commonTableBodyProps} />
       ) : (
-        <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+        <MRT_TableBody {...commonTableBodyProps} />
       )}
-      {enableTableFooter && <MRT_TableFooter {...props} />}
+      {enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />}
     </Table>
   );
 };