material-react-table 1.4.2 → 1.5.0-beta.0

package/src/footer/MRT_TableFooter.tsx

@@ -2,13 +2,22 @@ import React, { FC } from 'react';
 import TableFooter from '@mui/material/TableFooter';
 import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
+  virtualColumns?: VirtualItem[];
+  virtualPaddingLeft?: number;
+  virtualPaddingRight?: number;
 }
 
-export const MRT_TableFooter: FC<Props> = ({ table }) => {
+export const MRT_TableFooter: FC<Props> = ({
+  table,
+  virtualColumns,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+}) => {
   const {
     getFooterGroups,
     getState,
@@ -48,6 +57,9 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
           footerGroup={footerGroup as any}
           key={footerGroup.id}
           table={table}
+          virtualColumns={virtualColumns}
+          virtualPaddingLeft={virtualPaddingLeft}
+          virtualPaddingRight={virtualPaddingRight}
         />
       ))}
     </TableFooter>

package/src/footer/MRT_TableFooterCell.tsx

@@ -8,7 +8,10 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
+export const MRT_TableFooterCell: FC<Props> = ({
+  footer,
+  table,
+}) => {
   const {
     getState,
     options: { layoutMode, muiTableFooterCellProps },
@@ -51,7 +54,12 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
             : '1.5rem',
         verticalAlign: 'top',
         zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
-        ...getCommonCellStyles({ column, table, theme, tableCellProps }),
+        ...getCommonCellStyles({
+          column,
+          table,
+          theme,
+          tableCellProps,
+        }),
       })}
     >
       <>

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,14 +1,24 @@
 import React, { FC } from 'react';
 import TableRow from '@mui/material/TableRow';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
+import { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
+  virtualColumns?: VirtualItem[];
+  virtualPaddingLeft?: number;
+  virtualPaddingRight?: number;
 }
 
-export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, table }) => {
+export const MRT_TableFooterRow: FC<Props> = ({
+  footerGroup,
+  table,
+  virtualColumns,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+}) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
   } = table;
@@ -34,14 +44,31 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, table }) => {
       {...tableRowProps}
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        width: '100%',
         ...(tableRowProps?.sx instanceof Function
           ? tableRowProps?.sx(theme)
           : (tableRowProps?.sx as any)),
       })}
     >
-      {footerGroup.headers.map((footer: MRT_Header) => (
-        <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
-      ))}
+      {virtualPaddingLeft ? (
+        <th style={{ display: 'flex', width: virtualPaddingLeft }} />
+      ) : null}
+      {(virtualColumns ?? footerGroup.headers).map((footerOrVirtualFooter) => {
+        const footer = virtualColumns
+          ? footerGroup.headers[footerOrVirtualFooter.index]
+          : (footerOrVirtualFooter as MRT_Header);
+
+        return (
+          <MRT_TableFooterCell
+            footer={footer}
+            key={footer.id}
+            table={table}
+          />
+        );
+      })}
+      {virtualPaddingRight ? (
+        <th style={{ display: 'flex', width: virtualPaddingRight }} />
+      ) : null}
     </TableRow>
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -1,13 +1,22 @@
 import React, { FC } from 'react';
 import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
+  virtualColumns?: VirtualItem[];
+  virtualPaddingLeft?: number;
+  virtualPaddingRight?: number;
 }
 
-export const MRT_TableHead: FC<Props> = ({ table }) => {
+export const MRT_TableHead: FC<Props> = ({
+  table,
+  virtualColumns,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+}) => {
   const {
     getHeaderGroups,
     getState,
@@ -41,6 +50,9 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
           headerGroup={headerGroup as any}
           key={headerGroup.id}
           table={table}
+          virtualColumns={virtualColumns}
+          virtualPaddingLeft={virtualPaddingLeft}
+          virtualPaddingRight={virtualPaddingRight}
         />
       ))}
     </TableHead>

package/src/head/MRT_TableHeadCell.tsx

@@ -17,7 +17,10 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
+export const MRT_TableHeadCell: FC<Props> = ({
+  header,
+  table,
+}) => {
   const theme = useTheme();
   const {
     getState,
@@ -123,9 +126,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
       onDragEnter={handleDragEnter}
-      ref={(node) => {
+      ref={(node: HTMLTableCellElement) => {
         if (node) {
-          tableHeadCellRefs.current[column.id] = node as HTMLTableCellElement;
+          tableHeadCellRefs.current[column.id] = node;
         }
       }}
       {...tableCellProps}

package/src/head/MRT_TableHeadRow.tsx

@@ -2,14 +2,24 @@ import React, { FC } from 'react';
 import TableRow from '@mui/material/TableRow';
 import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import type { VirtualItem } from '@tanstack/react-virtual';
 import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
+  virtualColumns?: VirtualItem[];
+  virtualPaddingLeft?: number;
+  virtualPaddingRight?: number;
 }
 
-export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
+export const MRT_TableHeadRow: FC<Props> = ({
+  headerGroup,
+  table,
+  virtualColumns,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+}) => {
   const {
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
@@ -32,9 +42,25 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
           : (tableRowProps?.sx as any)),
       })}
     >
-      {headerGroup.headers.map((header: MRT_Header) => (
-        <MRT_TableHeadCell header={header} key={header.id} table={table} />
-      ))}
+      {virtualPaddingLeft ? (
+        <th style={{ display: 'flex', width: virtualPaddingLeft }} />
+      ) : null}
+      {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader) => {
+        const header = virtualColumns
+          ? headerGroup.headers[headerOrVirtualHeader.index]
+          : (headerOrVirtualHeader as MRT_Header);
+
+        return (
+          <MRT_TableHeadCell
+            header={header}
+            key={header.id}
+            table={table}
+          />
+        );
+      })}
+      {virtualPaddingRight ? (
+        <th style={{ display: 'flex', width: virtualPaddingRight }} />
+      ) : null}
     </TableRow>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -15,7 +15,7 @@ import InputAdornment from '@mui/material/InputAdornment';
 import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
-import debounce from '@mui/material/utils/debounce';
+import { debounce } from '@mui/material/utils';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
@@ -87,7 +87,8 @@ export const MRT_FilterTextField: FC<Props> = ({
       ]
     : '';
   const filterPlaceholder = !isRangeFilter
-    ? localization.filterByColumn?.replace('{column}', String(columnDef.header))
+    ? textFieldProps?.placeholder ??
+      localization.filterByColumn?.replace('{column}', String(columnDef.header))
     : rangeFilterIndex === 0
     ? localization.min
     : rangeFilterIndex === 1

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -10,7 +10,7 @@ import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
-import debounce from '@mui/material/utils/debounce';
+import { debounce } from '@mui/material/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 

package/src/table/MRT_Table.tsx

@@ -1,4 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
+import {
+  defaultRangeExtractor,
+  Range,
+  useVirtualizer,
+  Virtualizer,
+} from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
@@ -13,7 +19,11 @@ export const MRT_Table: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
+      columnVirtualizerInstanceRef,
+      columnVirtualizerProps,
       enableColumnResizing,
+      enableColumnVirtualization,
+      enablePinning,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -21,33 +31,121 @@ export const MRT_Table: FC<Props> = ({ table }) => {
       memoMode,
       muiTableProps,
     },
+    refs: { tableContainerRef },
   } = table;
-  const { isFullScreen } = getState();
+  const { isFullScreen, columnPinning, columnVisibility } = getState();
 
   const tableProps =
     muiTableProps instanceof Function
       ? muiTableProps({ table })
       : muiTableProps;
 
+  const vProps =
+    columnVirtualizerProps instanceof Function
+      ? columnVirtualizerProps({ table })
+      : columnVirtualizerProps;
+
+  //get first 16 column widths and average them
+  const averageColumnWidth = useMemo(() => {
+    const columnsWidths =
+      table
+        .getRowModel()
+        .rows[0]?.getCenterVisibleCells()
+        ?.slice(0, 16)
+        ?.map((cell) => cell.column.getSize() * 1.25) ?? [];
+    return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
+  }, [table.getRowModel().rows, columnPinning, columnVisibility]);
+
+  const pinnedColumnIndexes = useMemo(
+    () =>
+      enableColumnVirtualization && enablePinning
+        ? [
+            ...table.getLeftFlatHeaders().map((h) => h.column.getPinnedIndex()),
+            ...table
+              .getRightFlatHeaders()
+              .map(
+                (h) =>
+                  table.getVisibleFlatColumns().length -
+                  h.column.getPinnedIndex() -
+                  1,
+              ),
+          ]
+        : [],
+    [columnPinning, enableColumnVirtualization, enablePinning],
+  );
+
+  const columnVirtualizer:
+    | Virtualizer<HTMLDivElement, HTMLTableCellElement>
+    | undefined = enableColumnVirtualization
+    ? useVirtualizer({
+        count: table.getRowModel().rows[0].getVisibleCells().length,
+        estimateSize: () => averageColumnWidth,
+        getScrollElement: () => tableContainerRef.current,
+        horizontal: true,
+        measureElement: (element) => element?.getBoundingClientRect().width,
+        overscan: 3,
+        rangeExtractor: useCallback(
+          (range: Range) =>
+            [
+              ...new Set([
+                ...pinnedColumnIndexes,
+                ...defaultRangeExtractor(range),
+              ]),
+            ].sort((a, b) => a - b),
+          [pinnedColumnIndexes],
+        ),
+        ...vProps,
+      })
+    : undefined;
+
+  if (columnVirtualizerInstanceRef && columnVirtualizer) {
+    columnVirtualizerInstanceRef.current = columnVirtualizer;
+  }
+
+  const virtualColumns = columnVirtualizer
+    ? columnVirtualizer.getVirtualItems()
+    : undefined;
+
+  let virtualPaddingLeft: number | undefined;
+  let virtualPaddingRight: number | undefined;
+
+  if (columnVirtualizer && virtualColumns?.length) {
+    virtualPaddingLeft = virtualColumns?.length
+      ? virtualColumns[0]?.start || 0
+      : 0;
+    virtualPaddingRight = virtualColumns?.length
+      ? columnVirtualizer.getTotalSize() -
+        (virtualColumns[virtualColumns.length - 1]?.end || 0)
+      : 0;
+  }
+
+  const props = {
+    table,
+    virtualColumns,
+    virtualPaddingLeft,
+    virtualPaddingRight,
+  };
+
   return (
     <Table
       stickyHeader={enableStickyHeader || isFullScreen}
       {...tableProps}
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'grid' : 'table',
-        tableLayout: enableColumnResizing ? 'fixed' : 'auto',
+        tableLayout:
+          layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
         ...(tableProps?.sx instanceof Function
           ? tableProps.sx(theme)
           : (tableProps?.sx as any)),
       })}
     >
-      {enableTableHead && <MRT_TableHead table={table} />}
+      {enableTableHead && <MRT_TableHead {...props} />}
       {memoMode === 'table-body' ? (
-        <Memo_MRT_TableBody table={table} />
+        <Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
       ) : (
-        <MRT_TableBody table={table} />
+        <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
       )}
-      {enableTableFooter && <MRT_TableFooter table={table} />}
+      {enableTableFooter && <MRT_TableFooter {...props} />}
     </Table>
   );
 };

package/src/toolbar/MRT_TablePagination.tsx

@@ -3,13 +3,13 @@ import TablePagination from '@mui/material/TablePagination';
 import { MRT_TableInstance } from '..';
 
 interface Props<TData extends Record<string, any> = {}> {
-  position: 'top' | 'bottom';
+  position?: 'top' | 'bottom';
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
   table,
-  position,
+  position = 'bottom',
 }: Props<TData>) => {
   const {
     getPrePaginationRowModel,