material-react-table 0.34.1 → 0.35.0

package/src/inputs/MRT_EditCellTextField.tsx

@@ -18,34 +18,34 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
     getState,
     options: {
       tableId,
-      enableEditing,
       muiTableBodyCellEditTextFieldProps,
       onCellEditBlur,
       onCellEditChange,
     },
-    setCurrentEditingCell,
-    setCurrentEditingRow,
+    setEditingCell,
+    setEditingRow,
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
+  const { editingRow } = getState();
 
-  const [value, setValue] = useState(cell.getValue<string>());
+  const [value, setValue] = useState(() => cell.getValue<string>());
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onCellEditChange?.({ event, cell, table });
-    onCellEditChange?.({ event, cell, table });
+    columnDef.onCellEditChange?.({ event, cell, table, value });
+    onCellEditChange?.({ event, cell, table, value });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    if (getState().currentEditingRow) {
+    if (editingRow) {
       if (!row._valuesCache) row._valuesCache = {};
       (row._valuesCache as Record<string, any>)[column.id] = value;
-      setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
+      setEditingRow({ ...editingRow } as MRT_Row);
     }
-    setCurrentEditingCell(null);
-    columnDef.onCellEditBlur?.({ event, cell, table });
-    onCellEditBlur?.({ event, cell, table });
+    setEditingCell(null);
+    columnDef.onCellEditBlur?.({ event, cell, table, value });
+    onCellEditBlur?.({ event, cell, table, value });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -66,14 +66,14 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
+  if (columnDef.Edit) {
     return <>{columnDef.Edit?.({ cell, column, table })}</>;
   }
 
   return (
     <TextField
       id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
-      margin="dense"
+      margin="none"
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -1,9 +1,4 @@
-import React, {
-  ChangeEvent,
-  MouseEvent,
-  useCallback,
-  useState,
-} from 'react';
+import React, { ChangeEvent, MouseEvent, useCallback, useState } from 'react';
 import {
   Collapse,
   debounce,

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -64,8 +64,9 @@ export const MRT_ShowHideColumnsMenu = <
     getRightLeafColumns(),
   ]) as MRT_Column<TData>[];
 
-  const [currentHoveredColumn, setCurrentHoveredColumn] =
-    useState<MRT_Column<TData> | null>(null);
+  const [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(
+    null,
+  );
 
   return (
     <Menu
@@ -123,10 +124,10 @@ export const MRT_ShowHideColumnsMenu = <
         <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

@@ -21,9 +21,9 @@ import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
-  currentHoveredColumn: MRT_Column<TData> | null;
+  hoveredColumn: MRT_Column<TData> | null;
   isSubMenu?: boolean;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
   table: MRT_TableInstance<TData>;
 }
 
@@ -31,8 +31,8 @@ export const MRT_ShowHideColumnsMenuItems = <
   TData extends Record<string, any> = {},
 >({
   allColumns,
-  currentHoveredColumn,
-  setCurrentHoveredColumn,
+  hoveredColumn,
+  setHoveredColumn,
   column,
   isSubMenu,
   table,
@@ -77,15 +77,15 @@ export const MRT_ShowHideColumnsMenuItems = <
 
   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);
     }
   };
 
@@ -102,7 +102,7 @@ export const MRT_ShowHideColumnsMenuItems = <
           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`,
@@ -178,10 +178,10 @@ export const MRT_ShowHideColumnsMenuItems = <
         <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>