material-react-table 0.18.1 → 0.20.0

package/src/body/MRT_TableBody.tsx

@@ -1,16 +1,16 @@
 import React, { FC, RefObject, useMemo } from 'react';
-import { useVirtual } from 'react-virtual';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import type { MRT_Row, MRT_TableInstance } from '..';
 import { rankGlobalFuzzy } from '../sortingFns';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
   tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
+export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -22,13 +22,12 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
       muiTableBodyProps,
       virtualizerProps,
     },
-  } = instance;
-
+  } = table;
   const { density, globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
-      ? muiTableBodyProps({ instance })
+      ? muiTableBodyProps({ table })
       : muiTableBodyProps;
 
   const getIsSomeColumnsSorted = () => {
@@ -62,20 +61,29 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
   ]);
 
   const rowVirtualizer = enableRowVirtualization
-    ? useVirtual({
-        overscan: density === 'compact' ? 20 : 10,
-        size: rows.length,
-        parentRef: tableContainerRef,
+    ? useVirtualizer({
+        count: rows.length,
+        estimateSize: () => (density === 'compact' ? 25 : 50),
+        getScrollElement: () => tableContainerRef.current,
+        overscan: density === 'compact' ? 30 : 10,
         ...virtualizerProps,
       })
-    : ({} as any);
+    : {};
+
+  const virtualRows = enableRowVirtualization
+    ? rowVirtualizer.getVirtualItems()
+    : [];
 
-  const { virtualItems: virtualRows } = rowVirtualizer;
-  const paddingTop = virtualRows?.length > 0 ? virtualRows[0].start : 0;
-  const paddingBottom =
-    virtualRows?.length > 0
-      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-      : 0;
+  let paddingTop = 0;
+  let paddingBottom = 0;
+  if (enableRowVirtualization) {
+    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+    paddingBottom =
+      virtualRows.length > 0
+        ? rowVirtualizer.getTotalSize() -
+          virtualRows[virtualRows.length - 1].end
+        : 0;
+  }
 
   return (
     <TableBody {...tableBodyProps}>
@@ -84,7 +92,6 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
           <td style={{ height: `${paddingTop}px` }} />
         </tr>
       )}
-      {/* @ts-ignore */}
       {(enableRowVirtualization ? virtualRows : rows).map(
         (rowOrVirtualRow: any, rowIndex: number) => {
           const row = enableRowVirtualization
@@ -97,7 +104,7 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
               rowIndex={
                 enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
               }
-              instance={instance}
+              table={table}
             />
           );
         },

package/src/body/MRT_TableBodyCell.tsx

@@ -10,14 +10,14 @@ interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
   rowIndex: number;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
   rowIndex,
-  instance,
+  table,
 }) => {
   const {
     getState,
@@ -34,8 +34,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
     },
     setColumnOrder,
     setCurrentEditingCell,
-  } = instance;
-
+  } = table;
   const {
     columnOrder,
     currentEditingCell,
@@ -44,10 +43,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
     isLoading,
     showSkeletons,
   } = getState();
-
   const { column, row } = cell;
-
-  const { columnDef, columnDefType } = column;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   const [, dropRef] = useDrop({
     accept: 'column',
@@ -59,12 +57,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps({ cell, instance })
+      ? muiTableBodyCellProps({ cell, table })
       : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
     columnDef.muiTableBodyCellProps instanceof Function
-      ? columnDef.muiTableBodyCellProps({ cell, instance })
+      ? columnDef.muiTableBodyCellProps({ cell, table })
       : columnDef.muiTableBodyCellProps;
 
   const tableCellProps = {
@@ -78,7 +76,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
         ? column.getSize() / 2
         : Math.random() * (column.getSize() - column.getSize() / 3) +
           column.getSize() / 3,
-    [columnDefType, column.getSize()],
+    [],
   );
 
   const isEditable =
@@ -113,7 +111,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   const getIsLastLeftPinnedColumn = () => {
     return (
       column.getIsPinned() === 'left' &&
-      instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+      table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
     );
   };
 
@@ -123,8 +121,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const getTotalRight = () => {
     return (
-      (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) *
-      150
+      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
     );
   };
 
@@ -198,7 +195,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       })}
     >
       <>
-        {isLoading || showSkeletons ? (
+        {cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (
           <Skeleton
             animation="wave"
             height={20}
@@ -210,27 +207,21 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.id === 'mrt-row-numbers' ? (
           rowIndex + 1
         ) : columnDefType === 'display' ? (
-          columnDef.Cell?.({ cell, instance })
-        ) : cell.getIsPlaceholder() ||
-          (row.getIsGrouped() &&
-            column.id !==
-              row.groupingColumnId) ? null : cell.getIsAggregated() ? (
-          columnDef.AggregatedCell?.({ cell, instance }) ??
-          cell.renderAggregatedCell()
+          columnDef.Cell?.({ cell, table })
         ) : isEditing ? (
-          <MRT_EditCellTextField cell={cell} instance={instance} />
+          <MRT_EditCellTextField cell={cell} table={table} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
           columnDef.enableClickToCopy !== false ? (
           <>
-            <MRT_CopyButton cell={cell} instance={instance}>
-              <>{columnDef?.Cell?.({ cell, instance }) ?? cell.renderCell()}</>
+            <MRT_CopyButton cell={cell} table={table}>
+              <>{columnDef?.Cell?.({ cell, table }) ?? cell.renderValue()}</>
             </MRT_CopyButton>
-            {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+            {cell.getIsGrouped() && <> ({row.subRows?.length})</>}
           </>
         ) : (
           <>
-            {columnDef?.Cell?.({ cell, instance }) ?? cell.renderCell()}
-            {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
+            {columnDef?.Cell?.({ cell, table }) ?? cell.renderValue()}
+            {cell.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}
       </>

package/src/body/MRT_TableBodyRow.tsx

@@ -7,18 +7,18 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   row: MRT_Row;
   rowIndex: number;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
+export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
   const {
     getIsSomeColumnsPinned,
     options: { muiTableBodyRowProps, renderDetailPanel },
-  } = instance;
+  } = table;
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, instance })
+      ? muiTableBodyRowProps({ row, table })
       : muiTableBodyRowProps;
 
   return (
@@ -41,18 +41,18 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
           ...(tableRowProps?.sx as any),
         })}
       >
-        {row.getVisibleCells().map((cell) => (
+        {row?.getVisibleCells()?.map?.((cell) => (
           <MRT_TableBodyCell
             cell={cell}
             key={cell.id}
             enableHover={tableRowProps?.hover !== false}
             rowIndex={rowIndex}
-            instance={instance}
+            table={table}
           />
         ))}
       </TableRow>
       {renderDetailPanel && !row.getIsGrouped() && (
-        <MRT_TableDetailPanel row={row} instance={instance} />
+        <MRT_TableDetailPanel row={row} table={table} />
       )}
     </>
   );

package/src/body/MRT_TableDetailPanel.tsx

@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
+export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
   const {
     getVisibleLeafColumns,
     options: {
@@ -15,16 +15,16 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
       muiTableDetailPanelProps,
       renderDetailPanel,
     },
-  } = instance;
+  } = table;
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, instance })
+      ? muiTableBodyRowProps({ row, table })
       : muiTableBodyRowProps;
 
   const tableCellProps =
     muiTableDetailPanelProps instanceof Function
-      ? muiTableDetailPanelProps({ row, instance })
+      ? muiTableDetailPanelProps({ row, table })
       : muiTableDetailPanelProps;
 
   return (
@@ -37,13 +37,13 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 0.2s ease-in-out',
-          width: `${instance.getTotalSize()}px`,
+          width: `${table.getTotalSize()}px`,
           ...tableCellProps?.sx,
         }}
       >
         {renderDetailPanel && (
           <Collapse in={row.getIsExpanded()}>
-            {renderDetailPanel({ row, instance })}
+            {renderDetailPanel({ row, table })}
           </Collapse>
         )}
       </TableCell>

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -4,16 +4,16 @@ import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   column: MRT_Column;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ColumnPinningButtons: FC<Props> = ({ column, instance }) => {
+export const MRT_ColumnPinningButtons: FC<Props> = ({ column, table }) => {
   const {
     options: {
       icons: { PushPinIcon },
       localization,
     },
-  } = instance;
+  } = table;
 
   const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
     column.pin(pinDirection);

package/src/buttons/MRT_CopyButton.tsx

@@ -5,16 +5,14 @@ import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
   cell: MRT_Cell;
   children: ReactNode;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_CopyButton: FC<Props> = ({ cell, children, instance }) => {
+export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
   const {
     options: { localization, muiTableBodyCellCopyButtonProps },
-  } = instance;
-
+  } = table;
   const { column } = cell;
-
   const { columnDef } = column;
 
   const [copied, setCopied] = useState(false);
@@ -27,14 +25,14 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, instance }) => {
 
   const mTableBodyCellCopyButtonProps =
     muiTableBodyCellCopyButtonProps instanceof Function
-      ? muiTableBodyCellCopyButtonProps({ cell, instance })
+      ? muiTableBodyCellCopyButtonProps({ cell, table })
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
     columnDef.muiTableBodyCellCopyButtonProps instanceof Function
       ? columnDef.muiTableBodyCellCopyButtonProps({
           cell,
-          instance,
+          table,
         })
       : columnDef.muiTableBodyCellCopyButtonProps;
 

package/src/buttons/MRT_EditActionButtons.tsx

@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
+export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
   const {
     getState,
     options: {
@@ -16,8 +16,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
       onEditRowSubmit,
     },
     setCurrentEditingRow,
-  } = instance;
-
+  } = table;
   const { currentEditingRow } = getState();
 
   const handleCancel = () => {
@@ -26,7 +25,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
   };
 
   const handleSave = () => {
-    onEditRowSubmit?.({ row: currentEditingRow ?? row, instance });
+    onEditRowSubmit?.({ row: currentEditingRow ?? row, table });
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -3,10 +3,10 @@ import { IconButton, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
+export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
   const {
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
@@ -19,13 +19,12 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
       renderDetailPanel,
     },
     toggleAllRowsExpanded,
-  } = instance;
-
+  } = table;
   const { density } = getState();
 
   const iconButtonProps =
     muiExpandAllButtonProps instanceof Function
-      ? muiExpandAllButtonProps({ instance })
+      ? muiExpandAllButtonProps({ table })
       : muiExpandAllButtonProps;
 
   return (

package/src/buttons/MRT_ExpandButton.tsx

@@ -4,10 +4,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
+export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
   const {
     getState,
     options: {
@@ -16,13 +16,12 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
       muiExpandButtonProps,
       renderDetailPanel,
     },
-  } = instance;
-
+  } = table;
   const { density } = getState();
 
   const iconButtonProps =
     muiExpandButtonProps instanceof Function
-      ? muiExpandButtonProps({ instance, row })
+      ? muiExpandButtonProps({ table, row })
       : muiExpandButtonProps;
 
   const handleToggleExpand = () => {

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -3,13 +3,10 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_FullScreenToggleButton: FC<Props> = ({
-  instance,
-  ...rest
-}) => {
+export const MRT_FullScreenToggleButton: FC<Props> = ({ table, ...rest }) => {
   const {
     getState,
     options: {
@@ -17,8 +14,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
       localization,
     },
     setIsFullScreen,
-  } = instance;
-
+  } = table;
   const { isFullScreen } = getState();
 
   const handleToggleFullScreen = () => {

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -4,48 +4,46 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   ref: Ref<HTMLButtonElement>;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_GrabHandleButton: FC<Props> = forwardRef(
-  ({ instance }, ref) => {
-    const {
-      options: {
-        icons: { DragHandleIcon },
-        localization,
-      },
-    } = instance;
+export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
+  const {
+    options: {
+      icons: { DragHandleIcon },
+      localization,
+    },
+  } = table;
 
-    return (
-      <Tooltip
-        arrow
-        enterDelay={1000}
-        enterNextDelay={1000}
-        placement="top"
-        title={localization.grab}
+  return (
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      placement="top"
+      title={localization.grab}
+    >
+      <IconButton
+        disableRipple
+        ref={ref}
+        size="small"
+        sx={{
+          cursor: 'grab',
+          m: 0,
+          opacity: 0.5,
+          p: '2px',
+          transition: 'all 0.2s ease-in-out',
+          '&:hover': {
+            backgroundColor: 'transparent',
+            opacity: 1,
+          },
+          '&:active': {
+            cursor: 'grabbing',
+          },
+        }}
       >
-        <IconButton
-          disableRipple
-          ref={ref}
-          size="small"
-          sx={{
-            cursor: 'grab',
-            m: 0,
-            opacity: 0.5,
-            p: '2px',
-            transition: 'all 0.2s ease-in-out',
-            '&:hover': {
-              backgroundColor: 'transparent',
-              opacity: 1,
-            },
-            '&:active': {
-              cursor: 'grabbing',
-            },
-          }}
-        >
-          <DragHandleIcon />
-        </IconButton>
-      </Tooltip>
-    );
-  },
-);
+        <DragHandleIcon />
+      </IconButton>
+    </Tooltip>
+  );
+});

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -4,16 +4,16 @@ import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ShowHideColumnsButton: FC<Props> = ({ instance, ...rest }) => {
+export const MRT_ShowHideColumnsButton: FC<Props> = ({ table, ...rest }) => {
   const {
     options: {
       icons: { ViewColumnIcon },
       localization,
     },
-  } = instance;
+  } = table;
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -35,7 +35,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ instance, ...rest }) => {
       <MRT_ShowHideColumnsMenu
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
-        instance={instance}
+        table={table}
       />
     </>
   );

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -3,13 +3,10 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToggleDensePaddingButton: FC<Props> = ({
-  instance,
-  ...rest
-}) => {
+export const MRT_ToggleDensePaddingButton: FC<Props> = ({ table, ...rest }) => {
   const {
     getState,
     options: {
@@ -17,8 +14,7 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
       localization,
     },
     setDensity,
-  } = instance;
-
+  } = table;
   const { density } = getState();
 
   const handleToggleDensePadding = () => {

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -3,10 +3,10 @@ import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
+export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
   const {
     getState,
     options: {
@@ -14,8 +14,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
       localization,
     },
     setShowFilters,
-  } = instance;
-
+  } = table;
   const { showFilters } = getState();
 
   const handleToggleShowFilters = () => {