material-react-table 0.23.1 → 0.23.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.23.1",
+  "version": "0.23.4",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -8,7 +8,8 @@
     "react-table",
     "material-ui",
     "material-table",
-    "tanstack table"
+    "tanstack table",
+    "data table"
   ],
   "repository": {
     "type": "git",
@@ -61,7 +62,7 @@
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.7",
+    "@mui/material": "^5.9.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -99,7 +100,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.2.2",
+    "@tanstack/react-table": "8.2.6",
     "react-virtual": "^2.10.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -106,6 +106,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
     tableId: string;
     localization: MRT_Localization;
   };
+  setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
   setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
   setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
   setCurrentFilterFns: Dispatch<
@@ -114,6 +115,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
     }>
   >;
   setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
   setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
@@ -123,13 +125,15 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
 
 export type MRT_TableState<TData extends Record<string, any> = {}> =
   TableState & {
+    currentDraggingColumn: MRT_Column<TData> | null;
     currentEditingCell: MRT_Cell<TData> | null;
     currentEditingRow: MRT_Row<TData> | null;
     currentFilterFns: Record<string, MRT_FilterOption>;
     currentGlobalFilterFn: Record<string, MRT_FilterOption>;
+    currentHoveredColumn: MRT_Column<TData> | null;
     density: 'comfortable' | 'compact' | 'spacious';
-    isLoading: boolean;
     isFullScreen: boolean;
+    isLoading: boolean;
     showAlertBanner: boolean;
     showColumnFilters: boolean;
     showGlobalFilter: boolean;
@@ -618,10 +622,12 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       cell: MRT_Cell<TData>;
       table: MRT_TableInstance<TData>;
     }) => void;
-    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
-    onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
+    onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
+    onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
+    onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onEditRowSubmit?: ({
       row,
       table,
@@ -703,6 +709,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
   };
 
+/**
+ * `columns` and `data` props are the only required props, but there are over 150 other optional props.
+ *
+ * See more info on creating columns and data on the official docs site:
+ * @link https://www.material-react-table.com/docs/usage
+ *
+ * See the full props list on the official docs site:
+ * @link https://www.material-react-table.com/docs/api/props
+ */
 export default <TData extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',

package/src/body/MRT_TableBody.tsx

@@ -1,21 +1,16 @@
-import React, { Dispatch, FC, RefObject, SetStateAction, useMemo } from 'react';
+import React, { FC, RefObject, useMemo } from 'react';
 import { useVirtual } from 'react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
-import type { MRT_Column, MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({
-  setCurrentHoveredColumn,
-  table,
-  tableContainerRef,
-}) => {
+export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -108,7 +103,6 @@ export const MRT_TableBody: FC<Props> = ({
               rowIndex={
                 enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
               }
-              setCurrentHoveredColumn={setCurrentHoveredColumn}
               table={table}
             />
           );

package/src/body/MRT_TableBodyCell.tsx

@@ -1,21 +1,20 @@
-import React, {
-  Dispatch,
-  DragEvent,
-  FC,
-  MouseEvent,
-  SetStateAction,
-  useMemo,
-} from 'react';
-import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
+import React, { DragEvent, FC, MouseEvent, useMemo } from 'react';
+import {
+  alpha,
+  darken,
+  lighten,
+  Skeleton,
+  TableCell,
+  useTheme,
+} from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
-import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
   rowIndex: number;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
@@ -23,9 +22,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
   rowIndex,
-  setCurrentHoveredColumn,
   table,
 }) => {
+  const theme = useTheme();
   const {
     getState,
     options: {
@@ -39,10 +38,13 @@ export const MRT_TableBodyCell: FC<Props> = ({
       tableId,
     },
     setCurrentEditingCell,
+    setCurrentHoveredColumn,
   } = table;
   const {
+    currentDraggingColumn,
     currentEditingCell,
     currentEditingRow,
+    currentHoveredColumn,
     density,
     isLoading,
     showSkeletons,
@@ -122,9 +124,25 @@ export const MRT_TableBodyCell: FC<Props> = ({
   };
 
   const handleDragEnter = (_e: DragEvent) => {
-    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+    if (currentDraggingColumn) {
+      setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+    }
   };
 
+  const draggingBorder =
+    currentDraggingColumn?.id === column.id
+      ? `1px dashed ${theme.palette.divider}`
+      : currentHoveredColumn?.id === column.id
+      ? `2px dashed ${theme.palette.primary.main}`
+      : undefined;
+
+  const draggingBorders = draggingBorder
+    ? {
+        borderLeft: draggingBorder,
+        borderRight: draggingBorder,
+      }
+    : undefined;
+
   return (
     <TableCell
       onDoubleClick={handleDoubleClick}
@@ -144,6 +162,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
+        opacity:
+          currentDraggingColumn?.id === column.id ||
+          currentHoveredColumn?.id === column.id
+            ? 0.5
+            : 1,
         overflow: 'hidden',
         p:
           density === 'compact'
@@ -174,7 +197,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
-        zIndex: column.getIsPinned() ? 1 : undefined,
+        zIndex:
+          currentDraggingColumn?.id === column.id
+            ? 2
+            : column.getIsPinned()
+            ? 1
+            : undefined,
         '&:hover': {
           backgroundColor:
             enableHover && enableEditing && editingMode !== 'row'
@@ -187,6 +215,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
               : undefined,
         },
         ...(tableCellProps?.sx as any),
+        ...draggingBorders,
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: column.getSize(),

package/src/body/MRT_TableBodyRow.tsx

@@ -1,22 +1,16 @@
-import React, { Dispatch, FC, SetStateAction } from 'react';
+import React, { FC } from 'react';
 import { darken, lighten, TableRow } from '@mui/material';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import type { MRT_Column, MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
   rowIndex: number;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({
-  row,
-  rowIndex,
-  setCurrentHoveredColumn,
-  table,
-}) => {
+export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
   const {
     getIsSomeColumnsPinned,
     options: { muiTableBodyRowProps, renderDetailPanel },
@@ -53,7 +47,6 @@ export const MRT_TableBodyRow: FC<Props> = ({
             key={cell.id}
             enableHover={tableRowProps?.hover !== false}
             rowIndex={rowIndex}
-            setCurrentHoveredColumn={setCurrentHoveredColumn}
             table={table}
           />
         ))}

package/src/head/MRT_TableHead.tsx

@@ -1,19 +1,13 @@
-import React, { Dispatch, FC, SetStateAction } from 'react';
+import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import type { MRT_Column, MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
-  currentHoveredColumn: MRT_Column | null;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
-export const MRT_TableHead: FC<Props> = ({
-  currentHoveredColumn,
-  setCurrentHoveredColumn,
-  table,
-}) => {
+export const MRT_TableHead: FC<Props> = ({ table }) => {
   const {
     getHeaderGroups,
     options: { muiTableHeadProps },
@@ -28,8 +22,6 @@ export const MRT_TableHead: FC<Props> = ({
     <TableHead {...tableHeadProps}>
       {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow
-          currentHoveredColumn={currentHoveredColumn}
-          setCurrentHoveredColumn={setCurrentHoveredColumn}
           headerGroup={headerGroup as any}
           key={headerGroup.id}
           table={table}

package/src/head/MRT_TableHeadCell.tsx

@@ -1,34 +1,21 @@
-import React, {
-  Dispatch,
-  DragEvent,
-  FC,
-  ReactNode,
-  SetStateAction,
-  useState,
-} from 'react';
-import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
+import React, { DragEvent, FC, ReactNode } from 'react';
+import { Box, TableCell, Theme, alpha, lighten, useTheme } from '@mui/material';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
-import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
 import { reorderColumn } from '../utils';
+import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
-  currentHoveredColumn: MRT_Column | null;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   header: MRT_Header;
   table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCell: FC<Props> = ({
-  currentHoveredColumn,
-  setCurrentHoveredColumn,
-  header,
-  table,
-}) => {
+export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
+  const theme = useTheme();
   const {
     getState,
     options: {
@@ -40,8 +27,11 @@ export const MRT_TableHeadCell: FC<Props> = ({
       muiTableHeadCellProps,
     },
     setColumnOrder,
+    setCurrentDraggingColumn,
+    setCurrentHoveredColumn,
   } = table;
-  const { columnOrder, density } = getState();
+  const { columnOrder, density, currentDraggingColumn, currentHoveredColumn } =
+    getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -87,25 +77,43 @@ export const MRT_TableHeadCell: FC<Props> = ({
 
   const tableHeadCellRef = React.useRef<HTMLElement>(null);
 
-  const [isDragging, setIsDragging] = useState(false);
-
   const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
-    setIsDragging(true);
+    setCurrentDraggingColumn(column);
     e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
   };
 
   const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
-    setIsDragging(false);
+    setCurrentDraggingColumn(null);
     setCurrentHoveredColumn(null);
-    if (currentHoveredColumn) {
+    if (
+      currentHoveredColumn &&
+      currentHoveredColumn?.id !== currentDraggingColumn?.id
+    ) {
       setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
     }
   };
 
   const handleDragEnter = (_e: DragEvent) => {
-    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+    if (currentDraggingColumn) {
+      setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+    }
   };
 
+  const draggingBorder =
+    currentDraggingColumn?.id === column.id
+      ? `1px dashed ${theme.palette.divider}`
+      : currentHoveredColumn?.id === column.id
+      ? `2px dashed ${theme.palette.primary.main}`
+      : undefined;
+
+  const draggingBorders = draggingBorder
+    ? {
+        borderLeft: draggingBorder,
+        borderRight: draggingBorder,
+        borderTop: draggingBorder,
+      }
+    : undefined;
+
   return (
     <TableCell
       align={columnDefType === 'group' ? 'center' : 'left'}
@@ -119,11 +127,6 @@ export const MRT_TableHeadCell: FC<Props> = ({
             ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
             : 'inherit',
         backgroundImage: 'inherit',
-        border: isDragging
-          ? `2px dashed ${theme.palette.divider}`
-          : currentHoveredColumn?.id === column.id
-          ? `2px dashed ${theme.palette.primary.main}`
-          : undefined,
         boxShadow: getIsLastLeftPinnedColumn()
           ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
           : getIsFirstRightPinnedColumn()
@@ -135,7 +138,11 @@ export const MRT_TableHeadCell: FC<Props> = ({
             ? `${column.getStart('left')}px`
             : undefined,
         overflow: 'visible',
-        opacity: isDragging ? 0.5 : 1,
+        opacity:
+          currentDraggingColumn?.id === column.id ||
+          currentHoveredColumn?.id === column.id
+            ? 0.5
+            : 1,
         p:
           density === 'compact'
             ? columnDefType === 'display'
@@ -166,12 +173,14 @@ export const MRT_TableHeadCell: FC<Props> = ({
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'text-top',
-        zIndex: column.getIsResizing()
-          ? 3
-          : column.getIsPinned() && columnDefType !== 'group'
-          ? 2
-          : 1,
+        zIndex:
+          column.getIsResizing() || currentDraggingColumn?.id === column.id
+            ? 3
+            : column.getIsPinned() && columnDefType !== 'group'
+            ? 2
+            : 1,
         ...(tableCellProps?.sx as any),
+        ...draggingBorders,
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: header.getSize(),
@@ -186,7 +195,6 @@ export const MRT_TableHeadCell: FC<Props> = ({
             display: 'flex',
             justifyContent:
               columnDefType === 'group' ? 'center' : 'space-between',
-            opacity: isDragging ? 0.5 : 1,
             position: 'relative',
             width: '100%',
           }}

package/src/head/MRT_TableHeadRow.tsx

@@ -1,26 +1,14 @@
-import React, { Dispatch, FC, SetStateAction } from 'react';
+import React, { FC } from 'react';
 import { alpha, lighten, TableRow } from '@mui/material';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import type {
-  MRT_Column,
-  MRT_Header,
-  MRT_HeaderGroup,
-  MRT_TableInstance,
-} from '..';
+import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
-  currentHoveredColumn: MRT_Column | null;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   headerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadRow: FC<Props> = ({
-  currentHoveredColumn,
-  setCurrentHoveredColumn,
-  headerGroup,
-  table,
-}) => {
+export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
   const {
     options: { muiTableHeadRowProps },
   } = table;
@@ -41,8 +29,6 @@ export const MRT_TableHeadRow: FC<Props> = ({
     >
       {headerGroup.headers.map((header: MRT_Header, index) => (
         <MRT_TableHeadCell
-          currentHoveredColumn={currentHoveredColumn}
-          setCurrentHoveredColumn={setCurrentHoveredColumn}
           header={header}
           key={header.id || index}
           table={table}

package/src/table/MRT_Table.tsx

@@ -1,9 +1,9 @@
-import React, { FC, RefObject, useState } from 'react';
+import React, { FC, RefObject } from 'react';
 import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { MRT_Column, MRT_TableInstance } from '..';
+import { MRT_TableInstance } from '..';
 
 interface Props {
   tableContainerRef: RefObject<HTMLDivElement>;
@@ -29,9 +29,6 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
       ? muiTableProps({ table })
       : muiTableProps;
 
-  const [currentHoveredColumn, setCurrentHoveredColumn] =
-    useState<MRT_Column | null>(null);
-
   return (
     <Table
       stickyHeader={
@@ -44,18 +41,8 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
         ...tableProps?.sx,
       }}
     >
-      {enableTableHead && (
-        <MRT_TableHead
-          currentHoveredColumn={currentHoveredColumn}
-          setCurrentHoveredColumn={setCurrentHoveredColumn}
-          table={table}
-        />
-      )}
-      <MRT_TableBody
-        setCurrentHoveredColumn={setCurrentHoveredColumn}
-        tableContainerRef={tableContainerRef}
-        table={table}
-      />
+      {enableTableHead && <MRT_TableHead table={table} />}
+      <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />
       {enableTableFooter && <MRT_TableFooter table={table} />}
     </Table>
   );

package/src/table/MRT_TableRoot.tsx

@@ -12,6 +12,7 @@ import {
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
+  MRT_Column,
   MRT_ColumnDef,
   MRT_FilterOption,
   MRT_Row,
@@ -56,6 +57,10 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     useState<MRT_Cell<TData> | null>(initialState?.currentEditingCell ?? null);
   const [currentEditingRow, setCurrentEditingRow] =
     useState<MRT_Row<TData> | null>(initialState?.currentEditingRow ?? null);
+  const [currentDraggingColumn, setCurrentDraggingColumn] =
+    useState<MRT_Column<TData> | null>(null);
+  const [currentHoveredColumn, setCurrentHoveredColumn] =
+    useState<MRT_Column<TData> | null>(null);
   const [density, setDensity] = useState(
     initialState?.density ?? 'comfortable',
   );
@@ -223,10 +228,12 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       initialState,
       state: {
         columnOrder,
+        currentDraggingColumn,
         currentEditingCell,
         currentEditingRow,
         currentFilterFns,
         currentGlobalFilterFn,
+        currentHoveredColumn,
         density,
         isFullScreen,
         showAlertBanner,
@@ -236,6 +243,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       } as TableState,
       tableId,
     }),
+    setCurrentDraggingColumn:
+      props.onCurrentDraggingColumnChange ?? setCurrentDraggingColumn,
     setCurrentEditingCell:
       props.onCurrentEditingCellChange ?? setCurrentEditingCell,
     setCurrentEditingRow:
@@ -243,6 +252,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setCurrentFilterFns: props.onCurrentFilterFnsChange ?? setCurrentFilterFns,
     setCurrentGlobalFilterFn:
       props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
+    setCurrentHoveredColumn:
+      props.onCurrentHoveredColumnChange ?? setCurrentHoveredColumn,
     setDensity: props.onDensityChange ?? setDensity,
     setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,