material-react-table 1.4.3 → 1.5.0-beta.1

package/src/body/MRT_TableBodyRow.tsx

@@ -3,24 +3,32 @@ import TableRow from '@mui/material/TableRow';
 import { darken, lighten, useTheme } from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import type { VirtualItem } from '@tanstack/react-virtual';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
+  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
   row: MRT_Row;
   rowIndex: number;
   table: MRT_TableInstance;
+  virtualColumns?: VirtualItem[];
+  virtualPaddingLeft?: number;
+  virtualPaddingRight?: number;
   virtualRow?: VirtualItem;
 }
 
 export const MRT_TableBodyRow: FC<Props> = ({
+  columnVirtualizer,
   measureElement,
   numRows,
   row,
   rowIndex,
   table,
+  virtualColumns,
+  virtualPaddingLeft,
+  virtualPaddingRight,
   virtualRow,
 }) => {
   const theme = useTheme();
@@ -108,15 +116,25 @@ export const MRT_TableBodyRow: FC<Props> = ({
           ...draggingBorders,
         })}
       >
-        {row.getVisibleCells().map((cell) => {
+        {virtualPaddingLeft ? (
+          <td style={{ display: 'flex', width: virtualPaddingLeft }} />
+        ) : null}
+        {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
+          const cell = columnVirtualizer
+            ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
+            : (cellOrVirtualCell as MRT_Cell);
           const props = {
             cell,
             enableHover: tableRowProps?.hover !== false,
             key: cell.id,
+            measureElement: columnVirtualizer?.measureElement,
             numRows,
             rowIndex,
             rowRef,
             table,
+            virtualCell: columnVirtualizer
+              ? (cellOrVirtualCell as VirtualItem)
+              : undefined,
           };
           return memoMode === 'cells' &&
             cell.column.columnDef.columnDefType === 'data' &&
@@ -129,6 +147,9 @@ export const MRT_TableBodyRow: FC<Props> = ({
             <MRT_TableBodyCell {...props} />
           );
         })}
+        {virtualPaddingRight ? (
+          <td style={{ display: 'flex', width: virtualPaddingRight }} />
+        ) : null}
       </TableRow>
       {renderDetailPanel && !row.getIsGrouped() && (
         <MRT_TableDetailPanel

package/src/column.utils.ts

@@ -266,7 +266,10 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'right'
       ? `${getTotalRight(table, column)}px`
       : undefined,
-  transition: `all ${column.getIsResizing() ? 0 : '150ms'} ease-in-out`,
+  transition:
+    table.options.enableColumnVirtualization || column.getIsResizing()
+      ? 'none'
+      : `all 150ms ease-in-out`,
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),

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

@@ -51,7 +51,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,27 @@ 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

@@ -123,9 +123,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,21 @@ 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/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/table/MRT_TableRoot.tsx

@@ -239,7 +239,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               {},
               ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
                 (col) => ({
-                  [col.id ?? col.accessorKey ?? '']: null,
+                  [getColumnId(col)]: null,
                 }),
               ),
             ),

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,