material-react-table 0.38.4 → 0.40.1

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,16 +1,16 @@
 import React, { useMemo } from 'react';
 import { Box, Menu, MenuItem } from '@mui/material';
-import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
+import type {
+  MRT_FilterOption,
+  MRT_Header,
+  MRT_InternalFilterOption,
+  MRT_TableInstance,
+} from '..';
 import { MRT_Localization } from '../localization';
 
-export const internalFilterOptions = (
+export const mrtFilterOptions = (
   localization: MRT_Localization,
-): {
-  option: string;
-  symbol: string;
-  label: string;
-  divider: boolean;
-}[] => [
+): MRT_InternalFilterOption[] => [
   {
     option: 'fuzzy',
     symbol: '≈',
@@ -118,31 +118,33 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
       enabledGlobalFilterOptions,
       columnFilterModeOptions,
       localization,
+      renderColumnFilterModeMenuItems,
+      renderGlobalFilterModeMenuItems,
     },
     setColumnFilterFns,
     setGlobalFilterFn,
   } = table;
-  const { columnFilterFns, globalFilterFn, density } = getState();
+  const { globalFilterFn, density } = getState();
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
 
   const allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
-  const filterOptions = useMemo(
+  const internalFilterOptions = useMemo(
     () =>
-      internalFilterOptions(localization).filter((filterOption) =>
+      mrtFilterOptions(localization).filter((filterOption) =>
         columnDef
           ? allowedColumnFilterOptions === undefined ||
             allowedColumnFilterOptions?.includes(filterOption.option)
           : (!enabledGlobalFilterOptions ||
               enabledGlobalFilterOptions.includes(filterOption.option)) &&
-            ['fuzzy', 'contains'].includes(filterOption.option),
+            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option),
       ),
     [],
   );
 
-  const handleSelectFilterType = (option: MRT_FilterOption) => {
+  const handleSelectFilterMode = (option: MRT_FilterOption) => {
     if (header && column) {
       setColumnFilterFns((prev: { [key: string]: any }) => ({
         ...prev,
@@ -162,7 +164,8 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
     onSelect?.();
   };
 
-  const filterOption = !!header ? columnFilterFns[header.id] : globalFilterFn;
+  const filterOption =
+    !!header && columnDef ? columnDef._filterFn : globalFilterFn;
 
   return (
     <Menu
@@ -174,25 +177,39 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         dense: density === 'compact',
       }}
     >
-      {filterOptions.map(({ option, label, divider, symbol }, index) => (
-        <MenuItem
-          divider={divider}
-          key={index}
-          onClick={() => handleSelectFilterType(option as MRT_FilterOption)}
-          selected={option === filterOption}
-          sx={{
-            py: '6px',
-            my: 0,
-            alignItems: 'center',
-            display: 'flex',
-            gap: '2ch',
-          }}
-          value={option}
-        >
-          <Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
-          {label}
-        </MenuItem>
-      ))}
+      {(header && column
+        ? renderColumnFilterModeMenuItems?.({
+            column: column as any,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          })
+        : renderGlobalFilterModeMenuItems?.({
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+          })) ??
+        internalFilterOptions.map(
+          ({ option, label, divider, symbol }, index) => (
+            <MenuItem
+              divider={divider}
+              key={index}
+              onClick={() => handleSelectFilterMode(option as MRT_FilterOption)}
+              selected={option === filterOption}
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                gap: '2ch',
+                my: 0,
+                py: '6px',
+              }}
+              value={option}
+            >
+              <Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
+              {label}
+            </MenuItem>
+          ),
+        )}
     </Menu>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   TableState,
   getCoreRowModel,
@@ -24,6 +24,7 @@ import {
   getDefaultColumnFilterFn,
   defaultDisplayColumnDefOptions,
   showExpandColumn,
+  getColumnId,
 } from '../column.utils';
 import type {
   MRT_Cell,
@@ -65,13 +66,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       {},
       ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<TData>[]).map(
         (col) => ({
-          [col.id?.toString() ?? col.accessorKey?.toString() ?? '']:
+          [getColumnId(col)]:
             col.filterFn instanceof Function
               ? col.filterFn.name ?? 'custom'
               : col.filterFn ??
-                initialState?.columnFilterFns?.[
-                  col.id?.toString() ?? col.accessorKey?.toString() ?? ''
-                ] ??
+                initialState?.columnFilterFns?.[getColumnId(col)] ??
                 getDefaultColumnFilterFn(col),
         }),
       ),
@@ -135,7 +134,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               <MRT_ToggleRowActionMenuButton
                 cell={cell as any}
                 row={row as any}
-                table={table}
+                table={table as any}
               />
             ),
             header: props.localization?.actions,
@@ -147,11 +146,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
           columnOrder.includes('mrt-row-expand') &&
             showExpandColumn(props, grouping) && {
               Cell: ({ row }) => (
-                <MRT_ExpandButton row={row as any} table={table} />
+                <MRT_ExpandButton row={row as any} table={table as any} />
               ),
               Header: () =>
                 props.enableExpandAll ? (
-                  <MRT_ExpandAllButton table={table} />
+                  <MRT_ExpandAllButton table={table as any} />
                 ) : null,
               header: props.localization?.expand,
               size: 60,
@@ -161,11 +160,11 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             },
           columnOrder.includes('mrt-row-select') && {
             Cell: ({ row }) => (
-              <MRT_SelectCheckbox row={row as any} table={table} />
+              <MRT_SelectCheckbox row={row as any} table={table as any} />
             ),
             Header: () =>
               props.enableSelectAll ? (
-                <MRT_SelectCheckbox selectAll table={table} />
+                <MRT_SelectCheckbox selectAll table={table as any} />
               ) : null,
             header: props.localization?.select,
             size: 60,
@@ -302,7 +301,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
-  } as MRT_TableInstance;
+  } as MRT_TableInstance<TData>;
+
+  useEffect(() => {
+    if (props.tableInstanceRef) {
+      props.tableInstanceRef.current = table;
+    }
+  }, [table]);
 
   return (
     <>
@@ -316,9 +321,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         open={isFullScreen}
         transitionDuration={400}
       >
-        <MRT_TablePaper table={table} />
+        <MRT_TablePaper table={table as any} />
       </Dialog>
-      {!isFullScreen && <MRT_TablePaper table={table} />}
+      {!isFullScreen && <MRT_TablePaper table={table as any} />}
       {editingRow && props.editingMode === 'modal' && (
         <MRT_EditRowModal row={editingRow as any} table={table} open />
       )}

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',