material-react-table 0.33.6 → 0.35.0

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,22 +1,24 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import type { MRT_Column, MRT_TableInstance } from '..';
 import { getDefaultColumnOrderIds } from '../column.utils';
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenu: FC<Props> = ({
+export const MRT_ShowHideColumnsMenu = <
+  TData extends Record<string, any> = {},
+>({
   anchorEl,
   isSubMenu,
   setAnchorEl,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getAllColumns,
     getAllLeafColumns,
@@ -60,10 +62,11 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getCenterLeafColumns(),
     getLeftLeafColumns(),
     getRightLeafColumns(),
-  ]) as MRT_Column[];
+  ]) as MRT_Column<TData>[];
 
-  const [currentHoveredColumn, setCurrentHoveredColumn] =
-    useState<MRT_Column | null>(null);
+  const [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(
+    null,
+  );
 
   return (
     <Menu
@@ -121,10 +124,10 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}
           column={column}
-          currentHoveredColumn={currentHoveredColumn}
+          hoveredColumn={hoveredColumn}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
-          setCurrentHoveredColumn={setCurrentHoveredColumn}
+          setHoveredColumn={setHoveredColumn}
           table={table}
         />
       ))}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,8 +1,8 @@
 import React, {
   Dispatch,
   DragEvent,
-  FC,
   SetStateAction,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -18,23 +18,25 @@ import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { reorderColumn } from '../column.utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
-interface Props {
-  allColumns: MRT_Column[];
-  column: MRT_Column;
-  currentHoveredColumn: MRT_Column | null;
+interface Props<TData extends Record<string, any> = {}> {
+  allColumns: MRT_Column<TData>[];
+  column: MRT_Column<TData>;
+  hoveredColumn: MRT_Column<TData> | null;
   isSubMenu?: boolean;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
-  table: MRT_TableInstance;
+  setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
+export const MRT_ShowHideColumnsMenuItems = <
+  TData extends Record<string, any> = {},
+>({
   allColumns,
-  currentHoveredColumn,
-  setCurrentHoveredColumn,
+  hoveredColumn,
+  setHoveredColumn,
   column,
   isSubMenu,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -54,9 +56,9 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     (columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
-  const handleToggleColumnHidden = (column: MRT_Column) => {
+  const handleToggleColumnHidden = (column: MRT_Column<TData>) => {
     if (columnDefType === 'group') {
-      column?.columns?.forEach?.((childColumn: MRT_Column) => {
+      column?.columns?.forEach?.((childColumn: MRT_Column<TData>) => {
         childColumn.toggleVisibility(!switchChecked);
       });
     } else {
@@ -64,7 +66,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     }
   };
 
-  const menuItemRef = React.useRef<HTMLElement>(null);
+  const menuItemRef = useRef<HTMLElement>(null);
 
   const [isDragging, setIsDragging] = useState(false);
 
@@ -75,15 +77,15 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 
   const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
     setIsDragging(false);
-    setCurrentHoveredColumn(null);
-    if (currentHoveredColumn) {
-      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    setHoveredColumn(null);
+    if (hoveredColumn) {
+      setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
     }
   };
 
   const handleDragEnter = (_e: DragEvent) => {
     if (!isDragging) {
-      setCurrentHoveredColumn(column);
+      setHoveredColumn(column);
     }
   };
 
@@ -100,7 +102,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           opacity: isDragging ? 0.5 : 1,
           outline: isDragging
             ? `1px dashed ${theme.palette.divider}`
-            : currentHoveredColumn?.id === column.id
+            : hoveredColumn?.id === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : 'none',
           pl: `${(column.depth + 0.5) * 2}rem`,
@@ -172,14 +174,14 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           )}
         </Box>
       </MenuItem>
-      {column.columns?.map((c: MRT_Column, i) => (
+      {column.columns?.map((c: MRT_Column<TData>, i) => (
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}
           column={c}
-          currentHoveredColumn={currentHoveredColumn}
+          hoveredColumn={hoveredColumn}
           isSubMenu={isSubMenu}
           key={`${i}-${c.id}`}
-          setCurrentHoveredColumn={setCurrentHoveredColumn}
+          setHoveredColumn={setHoveredColumn}
           table={table}
         />
       ))}

package/src/table/MRT_TableRoot.tsx

@@ -48,31 +48,57 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     const initState = props.initialState ?? {};
     initState.columnOrder =
       initState.columnOrder ?? getDefaultColumnOrderIds(props);
+    initState.columnFilterFns = Object.assign(
+      {},
+      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<TData>[]).map(
+        (col) => ({
+          [col.id?.toString() ?? col.accessorKey?.toString() ?? '']:
+            col.filterFn instanceof Function
+              ? col.filterFn.name ?? 'custom'
+              : col.filterFn ??
+                initialState?.columnFilterFns?.[
+                  col.id?.toString() ?? col.accessorKey?.toString() ?? ''
+                ] ??
+                getDefaultColumnFilterFn(col),
+        }),
+      ),
+    );
+    initState.globalFilterFn =
+      props.globalFilterFn instanceof String
+        ? (props.globalFilterFn as MRT_FilterOption)
+        : 'fuzzy';
     return initState;
   }, []);
 
+  const [columnFilterFns, setColumnFilterFns] = useState<{
+    [key: string]: MRT_FilterOption;
+  }>(initialState.columnFilterFns ?? {});
   const [columnOrder, setColumnOrder] = useState(
     initialState.columnOrder ?? [],
   );
-  const [currentDraggingColumn, setCurrentDraggingColumn] =
-    useState<MRT_Column<TData> | null>(
-      initialState.currentDraggingColumn ?? null,
-    );
-  const [currentDraggingRow, setCurrentDraggingRow] =
-    useState<MRT_Row<TData> | null>(initialState.currentDraggingRow ?? null);
-  const [currentEditingCell, setCurrentEditingCell] =
-    useState<MRT_Cell<TData> | null>(initialState.currentEditingCell ?? null);
-  const [currentEditingRow, setCurrentEditingRow] =
-    useState<MRT_Row<TData> | null>(initialState.currentEditingRow ?? null);
-  const [currentHoveredColumn, setCurrentHoveredColumn] = useState<
-    MRT_Column<TData> | { id: string } | null
-  >(initialState.currentHoveredColumn ?? null);
-  const [currentHoveredRow, setCurrentHoveredRow] = useState<
-    MRT_Row<TData> | { id: string } | null
-  >(initialState.currentHoveredRow ?? null);
   const [density, setDensity] = useState(
     initialState?.density ?? 'comfortable',
   );
+  const [draggingColumn, setDraggingColumn] =
+    useState<MRT_Column<TData> | null>(initialState.draggingColumn ?? null);
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>(
+    initialState.draggingRow ?? null,
+  );
+  const [editingCell, setEditingCell] = useState<MRT_Cell<TData> | null>(
+    initialState.editingCell ?? null,
+  );
+  const [editingRow, setEditingRow] = useState<MRT_Row<TData> | null>(
+    initialState.editingRow ?? null,
+  );
+  const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
+    initialState.globalFilterFn ?? 'fuzzy',
+  );
+  const [hoveredColumn, setHoveredColumn] = useState<
+    MRT_Column<TData> | { id: string } | null
+  >(initialState.hoveredColumn ?? null);
+  const [hoveredRow, setHoveredRow] = useState<
+    MRT_Row<TData> | { id: string } | null
+  >(initialState.hoveredRow ?? null);
   const [isFullScreen, setIsFullScreen] = useState(
     initialState?.isFullScreen ?? false,
   );
@@ -85,30 +111,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
   );
-  const [columnFilterFns, setColumnFilterFns] = useState<{
-    [key: string]: MRT_FilterOption;
-  }>(() =>
-    Object.assign(
-      {},
-      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<TData>[]).map(
-        (col) => ({
-          [col.id?.toString() ?? col.accessorKey?.toString() ?? '']:
-            col.filterFn instanceof Function
-              ? col.filterFn.name ?? 'custom'
-              : col.filterFn ??
-                initialState?.columnFilterFns?.[
-                  col.id?.toString() ?? col.accessorKey?.toString() ?? ''
-                ] ??
-                getDefaultColumnFilterFn(col),
-        }),
-      ),
-    ),
-  );
-  const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
-    props.globalFilterFn instanceof String
-      ? (props.globalFilterFn as MRT_FilterOption)
-      : 'fuzzy',
-  );
 
   const displayColumns = useMemo(
     () =>
@@ -190,8 +192,6 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.enableRowSelection,
       props.enableSelectAll,
       props.localization,
-      props.muiTableBodyCellProps,
-      props.muiTableHeadCellProps,
       props.positionActionsColumn,
     ],
   );
@@ -248,20 +248,19 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       columns: columnDefs,
       data,
       globalFilterFn:
-        //@ts-ignore
-        props.filterFns[globalFilterFn] ?? props.filterFns.fuzzy,
+        props.filterFns?.[globalFilterFn] ?? props.filterFns?.fuzzy,
       initialState,
       state: {
-        columnOrder,
-        currentDraggingColumn,
-        currentDraggingRow,
-        currentEditingCell,
-        currentEditingRow,
         columnFilterFns,
-        globalFilterFn,
-        currentHoveredColumn,
-        currentHoveredRow,
+        columnOrder,
         density,
+        draggingColumn,
+        draggingRow,
+        editingCell,
+        editingRow,
+        globalFilterFn,
+        hoveredColumn,
+        hoveredRow,
         isFullScreen,
         showAlertBanner,
         showColumnFilters,
@@ -270,21 +269,15 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       } as TableState,
       tableId,
     }),
-    setCurrentDraggingColumn:
-      props.onCurrentDraggingColumnChange ?? setCurrentDraggingColumn,
-    setCurrentDraggingRow:
-      props.onCurrentDraggingRowChange ?? setCurrentDraggingRow,
-    setCurrentEditingCell:
-      props.onCurrentEditingCellChange ?? setCurrentEditingCell,
-    setCurrentEditingRow:
-      props.onCurrentEditingRowChange ?? setCurrentEditingRow,
-    setColumnFilterFns: props.onCurrentFilterFnsChange ?? setColumnFilterFns,
-    setGlobalFilterFn: props.onCurrentGlobalFilterFnChange ?? setGlobalFilterFn,
-    setCurrentHoveredColumn:
-      props.onCurrentHoveredColumnChange ?? setCurrentHoveredColumn,
-    setCurrentHoveredRow:
-      props.onCurrentHoveredRowChange ?? setCurrentHoveredRow,
+    setColumnFilterFns: props.onFilterFnsChange ?? setColumnFilterFns,
     setDensity: props.onDensityChange ?? setDensity,
+    setDraggingColumn: props.onDraggingColumnChange ?? setDraggingColumn,
+    setDraggingRow: props.onDraggingRowChange ?? setDraggingRow,
+    setEditingCell: props.onEditingCellChange ?? setEditingCell,
+    setEditingRow: props.onEditingRowChange ?? setEditingRow,
+    setGlobalFilterFn: props.onGlobalFilterFnChange ?? setGlobalFilterFn,
+    setHoveredColumn: props.onHoveredColumnChange ?? setHoveredColumn,
+    setHoveredRow: props.onHoveredRowChange ?? setHoveredRow,
     setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -10,27 +10,23 @@ export const MRT_ToolbarDropZone: FC<Props> = ({ table }) => {
   const {
     getState,
     options: { enableGrouping, localization },
-    setCurrentHoveredColumn,
+    setHoveredColumn,
   } = table;
 
-  const { currentDraggingColumn, currentHoveredColumn } = getState();
+  const { draggingColumn, hoveredColumn } = getState();
 
   const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
-    setCurrentHoveredColumn({ id: 'drop-zone' });
+    setHoveredColumn({ id: 'drop-zone' });
   };
 
   return (
-    <Fade
-      unmountOnExit
-      mountOnEnter
-      in={!!enableGrouping && !!currentDraggingColumn}
-    >
+    <Fade unmountOnExit mountOnEnter in={!!enableGrouping && !!draggingColumn}>
       <Box
         sx={(theme) => ({
           alignItems: 'center',
           backgroundColor: alpha(
             theme.palette.info.main,
-            currentHoveredColumn?.id === 'drop-zone' ? 0.2 : 0.1,
+            hoveredColumn?.id === 'drop-zone' ? 0.2 : 0.1,
           ),
           border: `dashed ${theme.palette.info.main} 2px`,
           display: 'flex',
@@ -45,7 +41,7 @@ export const MRT_ToolbarDropZone: FC<Props> = ({ table }) => {
         <Typography>
           {localization.dropToGroupBy.replace(
             '{column}',
-            currentDraggingColumn?.columnDef?.header ?? '',
+            draggingColumn?.columnDef?.header ?? '',
           )}
         </Typography>
       </Box>

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { Box } from '@mui/material';
 import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
+import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
-import { MRT_TableInstance } from '..';
-import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
@@ -37,11 +37,6 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
       }}
     >
       {renderToolbarInternalActions?.({
-        MRT_FullScreenToggleButton,
-        MRT_ShowHideColumnsButton,
-        MRT_ToggleDensePaddingButton,
-        MRT_ToggleFiltersButton,
-        MRT_ToggleGlobalFilterButton,
         table,
       }) ?? (
         <>