material-react-table 0.40.0 → 0.40.3

package/dist/esm/menus/MRT_RowActionMenu.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, MouseEvent } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
-    handleEdit: () => void;
+    handleEdit: (event: MouseEvent) => void;
     row: MRT_Row;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance;

package/dist/index.d.ts

@@ -2,7 +2,7 @@
 import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, ToolbarProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
-import { Options } from 'react-virtual';
+import { Options, VirtualItem } from 'react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 
@@ -701,8 +701,16 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     virtualizerProps?: Partial<Options<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => Partial<Options<HTMLDivElement>>);
+    virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterModes, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterModes, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare type Virtualizer = {
+    virtualItems: VirtualItem[];
+    totalSize: number;
+    scrollToOffset: (index: number, options?: any | undefined) => void;
+    scrollToIndex: (index: number, options?: any | undefined) => void;
+    measure: () => void;
+};
+declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
 interface Props$6<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;
@@ -741,4 +749,4 @@ interface Props<TData extends Record<string, any> = {}> extends IconButtonProps
 }
 declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props<TData>) => JSX.Element;
 
-export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };
+export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, Virtualizer, _default as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.0",
+  "version": "0.40.3",
   "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.",
@@ -49,13 +49,13 @@
     "storybook": "start-storybook -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.4.0",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.10.1",
+    "@mui/icons-material": "^5.10.2",
+    "@mui/material": "^5.10.2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",

package/src/MaterialReactTable.tsx

@@ -40,7 +40,7 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions } from 'react-virtual';
+import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
 // import type { VirtualizerOptions } from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
@@ -856,8 +856,17 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     //     }: {
     //       table: MRT_TableInstance<TData>;
     //     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+    virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
   };
 
+export type Virtualizer = {
+  virtualItems: VirtualItem[];
+  totalSize: number;
+  scrollToOffset: (index: number, options?: any | undefined) => void;
+  scrollToIndex: (index: number, options?: any | undefined) => void;
+  measure: () => void;
+};
+
 export default <TData extends Record<string, any> = {}>({
   aggregationFns,
   autoResetExpanded = false,
@@ -866,7 +875,6 @@ export default <TData extends Record<string, any> = {}>({
   editingMode = 'modal',
   enableBottomToolbar = true,
   enableColumnActions = true,
-  enableColumnFilterModes = false,
   enableColumnFilters = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
@@ -875,7 +883,6 @@ export default <TData extends Record<string, any> = {}>({
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
-  enableGlobalFilterModes = false,
   enableGlobalFilterRankedResults = true,
   enableGrouping = false,
   enableHiding = true,
@@ -913,7 +920,6 @@ export default <TData extends Record<string, any> = {}>({
     editingMode={editingMode}
     enableBottomToolbar={enableBottomToolbar}
     enableColumnActions={enableColumnActions}
-    enableColumnFilterModes={enableColumnFilterModes}
     enableColumnFilters={enableColumnFilters}
     enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
@@ -922,7 +928,6 @@ export default <TData extends Record<string, any> = {}>({
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
-    enableGlobalFilterModes={enableGlobalFilterModes}
     enableGlobalFilterRankedResults={enableGlobalFilterRankedResults}
     enableGrouping={enableGrouping}
     enableHiding={enableHiding}

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,5 @@
-import React, { FC, RefObject, useMemo } from 'react';
-import { useVirtual } from 'react-virtual';
+import React, { FC, RefObject, useEffect, useMemo } from 'react';
+import { useVirtual } from 'react-virtual'; //stuck on v2 for now
 // import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
@@ -22,6 +22,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       enableRowVirtualization,
       muiTableBodyProps,
       virtualizerProps,
+      virtualizerInstanceRef,
     },
   } = table;
   const { globalFilter, pagination, sorting } = getState();
@@ -62,7 +63,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
     globalFilter,
   ]);
 
-  const rowVirtualizer = enableRowVirtualization
+  const virtualizer = enableRowVirtualization
     ? useVirtual({
         size: rows.length,
         parentRef: tableContainerRef,
@@ -71,7 +72,13 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       })
     : ({} as any);
 
-  // const rowVirtualizer: Virtualizer = enableRowVirtualization
+  useEffect(() => {
+    if (virtualizerInstanceRef) {
+      virtualizerInstanceRef.current = virtualizer;
+    }
+  }, [virtualizer]);
+
+  // const virtualizer: Virtualizer = enableRowVirtualization
   //   ? useVirtualizer({
   //       count: rows.length,
   //       estimateSize: () => (density === 'compact' ? 25 : 50),
@@ -81,12 +88,10 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
   //     })
   //   : ({} as any);
 
-  const virtualRows = enableRowVirtualization
-    ? rowVirtualizer.virtualItems
-    : [];
+  const virtualRows = enableRowVirtualization ? virtualizer.virtualItems : [];
 
   // const virtualRows = enableRowVirtualization
-  //   ? rowVirtualizer.getVirtualItems()
+  //   ? virtualizer.getVirtualItems()
   //   : [];
 
   let paddingTop = 0;
@@ -94,13 +99,13 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
   if (enableRowVirtualization) {
     paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
     paddingBottom = !!virtualRows.length
-      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
+      ? virtualizer.totalSize - virtualRows[virtualRows.length - 1].end
       : 0;
   }
   // if (enableRowVirtualization) {
   //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
   //   paddingBottom = !!virtualRows.length
-  //     ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+  //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
   //     : 0;
   // }
 

package/src/buttons/MRT_CopyButton.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react';
+import React, { MouseEvent, ReactNode, useState } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import { MRT_Cell, MRT_TableInstance } from '..';
 
@@ -21,7 +21,8 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
 
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = (text: unknown) => {
+  const handleCopy = (event: MouseEvent, text: unknown) => {
+    event.stopPropagation();
     navigator.clipboard.writeText(text as string);
     setCopied(true);
     setTimeout(() => setCopied(false), 4000);
@@ -54,7 +55,7 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
       title={copied ? localization.copiedToClipboard : localization.clickToCopy}
     >
       <Button
-        onClick={() => handleCopy(cell.getValue())}
+        onClick={(e) => handleCopy(e, cell.getValue())}
         size="small"
         type="button"
         variant="text"

package/src/buttons/MRT_EditActionButtons.tsx

@@ -47,7 +47,10 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
   };
 
   return (
-    <Box sx={{ display: 'flex', gap: '0.75rem' }}>
+    <Box
+      onClick={(e) => e.stopPropagation()}
+      sx={{ display: 'flex', gap: '0.75rem' }}
+    >
       {variant === 'icon' ? (
         <>
           <Tooltip arrow title={localization.cancel}>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
@@ -24,8 +24,10 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
       ? muiExpandButtonProps({ table, row })
       : muiExpandButtonProps;
 
-  const handleToggleExpand = () => {
+  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
     row.toggleExpanded();
+    iconButtonProps?.onClick?.(event);
   };
 
   return (
@@ -39,8 +41,8 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
         <IconButton
           aria-label={localization.expand}
           disabled={!row.getCanExpand() && !renderDetailPanel}
-          onClick={handleToggleExpand}
           {...iconButtonProps}
+          onClick={handleToggleExpand}
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -37,6 +37,10 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
         onDragEnd={onDragEnd}
         size="small"
         {...iconButtonProps}
+        onClick={(e) => {
+          e.stopPropagation();
+          iconButtonProps?.onClick?.(e);
+        }}
         sx={(theme) => ({
           cursor: 'grab',
           m: 0,

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -16,12 +16,16 @@ const commonIconButtonStyles = {
 };
 
 interface Props {
-  cell: MRT_Cell
+  cell: MRT_Cell;
   row: MRT_Row;
   table: MRT_TableInstance;
 }
 
-export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ cell, row, table }) => {
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({
+  cell,
+  row,
+  table,
+}) => {
   const {
     getState,
     options: {
@@ -45,7 +49,8 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ cell, row, table }) =
     setAnchorEl(event.currentTarget);
   };
 
-  const handleStartEditMode = () => {
+  const handleStartEditMode = (event: MouseEvent) => {
+    event.stopPropagation();
     setEditingRow({ ...row });
     setAnchorEl(null);
   };

package/src/head/MRT_TableHeadCell.tsx

@@ -28,8 +28,13 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     },
     setHoveredColumn,
   } = table;
-  const { density, draggingColumn, hoveredColumn, showColumnFilters } =
-    getState();
+  const {
+    density,
+    draggingColumn,
+    grouping,
+    hoveredColumn,
+    showColumnFilters,
+  } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -221,17 +226,20 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
           </Box>
           {columnDefType !== 'group' && (
             <Box sx={{ whiteSpace: 'nowrap' }}>
-              {((enableColumnDragging &&
-                columnDef.enableColumnDragging !== false) ||
-                (enableColumnOrdering &&
-                  columnDef.enableColumnOrdering !== false) ||
-                (enableGrouping && columnDef.enableGrouping !== false)) && (
-                <MRT_TableHeadCellGrabHandle
-                  column={column}
-                  table={table}
-                  tableHeadCellRef={tableHeadCellRef}
-                />
-              )}
+              {enableColumnDragging !== false &&
+                columnDef.enableColumnDragging !== false &&
+                (enableColumnDragging ||
+                  (enableColumnOrdering &&
+                    columnDef.enableColumnOrdering !== false) ||
+                  (enableGrouping &&
+                    columnDef.enableGrouping !== false &&
+                    !grouping.includes(column.id))) && (
+                  <MRT_TableHeadCellGrabHandle
+                    column={column}
+                    table={table}
+                    tableHeadCellRef={tableHeadCellRef}
+                  />
+                )}
               {(enableColumnActions || columnDef.enableColumnActions) &&
                 columnDef.enableColumnActions !== false && (
                   <MRT_TableHeadCellColumnActionsButton

package/src/inputs/MRT_EditCellTextField.tsx

@@ -2,7 +2,6 @@ import React, {
   ChangeEvent,
   FocusEvent,
   KeyboardEvent,
-  MouseEvent,
   useState,
 } from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
@@ -101,11 +100,14 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       label={showLabel ? column.columnDef.header : undefined}
       margin="none"
       name={column.id}
-      onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}
+      onClick={(e) => {
+        e.stopPropagation();
+        textFieldProps?.onClick?.(e);
+      }}
       onBlur={handleBlur}
       onChange={handleChange}
       onKeyDown={handleEnterKeyDown}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -58,6 +58,10 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         }
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
+        onClick={(e) => {
+          e.stopPropagation();
+          checkboxProps?.onClick?.(e);
+        }}
         sx={(theme) => ({
           height: density === 'compact' ? '1.75rem' : '2.5rem',
           width: density === 'compact' ? '1.75rem' : '2.5rem',

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { Box, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 import {
@@ -8,7 +8,7 @@ import {
 
 interface Props {
   anchorEl: HTMLElement | null;
-  handleEdit: () => void;
+  handleEdit: (event: MouseEvent) => void;
   row: MRT_Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   table: MRT_TableInstance;

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -84,7 +84,7 @@ export const MRT_ShowHideColumnsMenuItems = <
   };
 
   const handleDragEnter = (_e: DragEvent) => {
-    if (!isDragging) {
+    if (!isDragging && columnDef.enableColumnOrdering !== false) {
       setHoveredColumn(column);
     }
   };

package/src/table/MRT_TableRoot.tsx

@@ -307,7 +307,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     if (props.tableInstanceRef) {
       props.tableInstanceRef.current = table;
     }
-  }, []);
+  }, [table]);
 
   return (
     <>

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -13,14 +13,22 @@ export const MRT_ToolbarDropZone: FC<Props> = ({ table }) => {
     setHoveredColumn,
   } = table;
 
-  const { draggingColumn, hoveredColumn } = getState();
+  const { draggingColumn, hoveredColumn, grouping } = getState();
 
   const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
     setHoveredColumn({ id: 'drop-zone' });
   };
 
   return (
-    <Fade unmountOnExit mountOnEnter in={!!enableGrouping && !!draggingColumn}>
+    <Fade
+      unmountOnExit
+      mountOnEnter
+      in={
+        !!enableGrouping &&
+        !!draggingColumn &&
+        !grouping.includes(draggingColumn.id)
+      }
+    >
       <Box
         sx={(theme) => ({
           alignItems: 'center',