material-react-table 0.21.0 → 0.22.2

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,5 +1,10 @@
-import React, { FC, Ref } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
+import React, {
+  Dispatch,
+  DragEvent,
+  FC,
+  SetStateAction,
+  useState,
+} from 'react';
 import {
   Box,
   FormControlLabel,
@@ -16,12 +21,16 @@ import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
   allColumns: MRT_Column[];
   column: MRT_Column;
+  currentHoveredColumn: MRT_Column | null;
   isSubMenu?: boolean;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   allColumns,
+  currentHoveredColumn,
+  setCurrentHoveredColumn,
   column,
   isSubMenu,
   table,
@@ -40,22 +49,6 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const [, dropRef] = useDrop({
-    accept: 'column',
-    drop: (movingColumn: MRT_Column) => {
-      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    },
-  });
-
-  const [, dragRef, previewRef] = useDrag({
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-    item: () => column,
-    type: 'column',
-  });
-
   const switchChecked =
     (columnDefType !== 'group' && column.getIsVisible()) ||
     (columnDefType === 'group' &&
@@ -71,41 +64,73 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     }
   };
 
+  const menuItemRef = React.useRef<HTMLElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(menuItemRef.current as HTMLElement, 0, 0);
+  };
+
+  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(false);
+    setCurrentHoveredColumn(null);
+    if (currentHoveredColumn) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+  };
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (!isDragging) {
+      setCurrentHoveredColumn(column);
+    }
+  };
+
   return (
     <>
       <MenuItem
-        ref={columnDefType === 'data' ? dropRef : undefined}
-        sx={{
+        disableRipple={enableColumnOrdering}
+        ref={menuItemRef as any}
+        onDragEnter={handleDragEnter}
+        sx={(theme) => ({
           alignItems: 'center',
           justifyContent: 'flex-start',
           my: 0,
+          opacity: isDragging ? 0.5 : 1,
+          outline: isDragging
+            ? `1px dashed ${theme.palette.divider}`
+            : currentHoveredColumn?.id === column.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : 'none',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
-        }}
+        })}
       >
         <Box
-          ref={previewRef}
           sx={{
             display: 'flex',
             flexWrap: 'nowrap',
             gap: '8px',
           }}
         >
-          {columnDefType !== 'group' &&
+          {!isSubMenu &&
+            columnDefType !== 'group' &&
             enableColumnOrdering &&
             !allColumns.some(
               (col) => col.columnDef.columnDefType === 'group',
             ) &&
             (columnDef.enableColumnOrdering !== false ? (
               <MRT_GrabHandleButton
-                ref={dragRef as Ref<HTMLButtonElement>}
+                handleDragEnd={handleDragEnd}
+                handleDragStart={handleDragStart}
                 table={table}
               />
             ) : (
               <Box sx={{ width: '28px' }} />
             ))}
-          {enablePinning &&
-            !isSubMenu &&
+          {!isSubMenu &&
+            enablePinning &&
             (column.getCanPin() ? (
               <MRT_ColumnPinningButtons column={column} table={table} />
             ) : (
@@ -150,9 +175,11 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
       {column.columns?.map((c: MRT_Column, i) => (
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}
-          key={`${i}-${c.id}`}
           column={c}
+          currentHoveredColumn={currentHoveredColumn}
           isSubMenu={isSubMenu}
+          key={`${i}-${c.id}`}
+          setCurrentHoveredColumn={setCurrentHoveredColumn}
           table={table}
         />
       ))}

package/src/sortingFns.ts

@@ -2,9 +2,9 @@ import { compareItems, RankingInfo } from '@tanstack/match-sorter-utils';
 import { Row, sortingFns } from '@tanstack/react-table';
 import { MRT_Row } from '.';
 
-const fuzzy = <D extends Record<string, any> = {}>(
-  rowA: Row<D>,
-  rowB: Row<D>,
+const fuzzy = <TData extends Record<string, any> = {}>(
+  rowA: Row<TData>,
+  rowB: Row<TData>,
   columnId: string,
 ) => {
   let dir = 0;
@@ -25,9 +25,9 @@ export const MRT_SortingFns = {
   fuzzy,
 };
 
-export const rankGlobalFuzzy = <D extends Record<string, any> = {}>(
-  rowA: MRT_Row<D>,
-  rowB: MRT_Row<D>,
+export const rankGlobalFuzzy = <TData extends Record<string, any> = {}>(
+  rowA: MRT_Row<TData>,
+  rowB: MRT_Row<TData>,
 ) =>
   Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
   Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));

package/src/table/MRT_Table.tsx

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

package/src/table/MRT_TableContainer.tsx

@@ -49,8 +49,8 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
 
   return (
     <TableContainer
-      {...tableContainerProps}
       ref={tableContainerRef}
+      {...tableContainerProps}
       sx={{
         maxWidth: '100%',
         maxHeight:

package/src/table/MRT_TablePaper.tsx

@@ -1,7 +1,5 @@
 import React, { FC, useEffect } from 'react';
 import { Paper } from '@mui/material';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 import { MRT_TableContainer } from './MRT_TableContainer';
@@ -34,28 +32,26 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
       : muiTablePaperProps;
 
   return (
-    <DndProvider backend={HTML5Backend}>
-      <Paper
-        elevation={2}
-        {...tablePaperProps}
-        sx={{
-          transition: 'all 0.2s ease-in-out',
-          ...tablePaperProps?.sx,
-        }}
-        style={{
-          ...tablePaperProps?.style,
-          height: isFullScreen ? '100vh' : undefined,
-          margin: isFullScreen ? '0' : undefined,
-          maxHeight: isFullScreen ? '100vh' : undefined,
-          maxWidth: isFullScreen ? '100vw' : undefined,
-          padding: isFullScreen ? '0' : undefined,
-          width: isFullScreen ? '100vw' : undefined,
-        }}
-      >
-        {enableToolbarTop && <MRT_ToolbarTop table={table} />}
-        <MRT_TableContainer table={table} />
-        {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
-      </Paper>
-    </DndProvider>
+    <Paper
+      elevation={2}
+      {...tablePaperProps}
+      sx={{
+        transition: 'all 0.2s ease-in-out',
+        ...tablePaperProps?.sx,
+      }}
+      style={{
+        ...tablePaperProps?.style,
+        height: isFullScreen ? '100vh' : undefined,
+        margin: isFullScreen ? '0' : undefined,
+        maxHeight: isFullScreen ? '100vh' : undefined,
+        maxWidth: isFullScreen ? '100vw' : undefined,
+        padding: isFullScreen ? '0' : undefined,
+        width: isFullScreen ? '100vw' : undefined,
+      }}
+    >
+      {enableToolbarTop && <MRT_ToolbarTop table={table} />}
+      <MRT_TableContainer table={table} />
+      {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
+    </Paper>
   );
 };

package/src/table/MRT_TableRoot.tsx

@@ -32,8 +32,8 @@ import {
 } from '../utils';
 import { MRT_FilterFns } from '../filtersFns';
 
-export const MRT_TableRoot = <D extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<D>,
+export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<TData>,
 ) => {
   const [tableId, setIdPrefix] = useState(props.tableId);
   useEffect(
@@ -42,7 +42,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.tableId],
   );
 
-  const initialState: Partial<MRT_TableState<D>> = useMemo(() => {
+  const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
     const initState = props.initialState ?? {};
     initState.columnOrder =
       initState.columnOrder ?? getDefaultColumnOrderIds(props);
@@ -53,10 +53,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     initialState.columnOrder ?? [],
   );
   const [currentEditingCell, setCurrentEditingCell] =
-    useState<MRT_Cell<D> | null>(initialState?.currentEditingCell ?? null);
-  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
-    initialState?.currentEditingRow ?? null,
-  );
+    useState<MRT_Cell<TData> | null>(initialState?.currentEditingCell ?? null);
+  const [currentEditingRow, setCurrentEditingRow] =
+    useState<MRT_Row<TData> | null>(initialState?.currentEditingRow ?? null);
   const [density, setDensity] = useState(
     initialState?.density ?? 'comfortable',
   );
@@ -66,8 +65,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [showAlertBanner, setShowAlertBanner] = useState(
     props.initialState?.showAlertBanner ?? false,
   );
-  const [showFilters, setShowFilters] = useState(
-    initialState?.showFilters ?? false,
+  const [showColumnFilters, setShowFilters] = useState(
+    initialState?.showColumnFilters ?? false,
   );
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
@@ -78,7 +77,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   }>(() =>
     Object.assign(
       {},
-      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<D>[]).map(
+      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<TData>[]).map(
         (col) => ({
           [col.id?.toString() ?? col.accessorKey?.toString() ?? '']:
             col.filterFn instanceof Function
@@ -158,7 +157,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
           },
-        ] as MRT_ColumnDef<D>[]
+        ] as MRT_ColumnDef<TData>[]
       ).filter(Boolean),
     [
       columnOrder,
@@ -184,7 +183,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [currentFilterFns, displayColumns, props.columns],
   );
 
-  const data: D[] = useMemo(
+  const data: TData[] = useMemo(
     () =>
       (props.state?.isLoading || props.state?.showSkeletons) &&
       !props.data.length
@@ -231,7 +230,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         density,
         isFullScreen,
         showAlertBanner,
-        showFilters,
+        showColumnFilters,
         showGlobalFilter,
         ...props.state,
       } as TableState,

package/src/utils.ts

@@ -9,21 +9,21 @@ import {
 import { MRT_FilterFns } from './filtersFns';
 import { MRT_SortingFns } from './sortingFns';
 
-const getColumnId = <D extends Record<string, any> = {}>(
-  columnDef: MRT_ColumnDef<D>,
+const getColumnId = <TData extends Record<string, any> = {}>(
+  columnDef: MRT_ColumnDef<TData>,
 ): string =>
   columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
 
-export const getAllLeafColumnDefs = <D extends Record<string, any> = {}>(
-  columns: MRT_ColumnDef<D>[],
-): MRT_ColumnDef<D>[] => {
-  let lowestLevelColumns: MRT_ColumnDef<D>[] = columns;
-  let currentCols: MRT_ColumnDef<D>[] | undefined = columns;
+export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
+  columns: MRT_ColumnDef<TData>[],
+): MRT_ColumnDef<TData>[] => {
+  let lowestLevelColumns: MRT_ColumnDef<TData>[] = columns;
+  let currentCols: MRT_ColumnDef<TData>[] | undefined = columns;
   while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
-    const nextCols: MRT_ColumnDef<D>[] = currentCols
+    const nextCols: MRT_ColumnDef<TData>[] = currentCols
       .filter((col) => !!col.columns)
       .map((col) => col.columns)
-      .flat() as MRT_ColumnDef<D>[];
+      .flat() as MRT_ColumnDef<TData>[];
     if (nextCols.every((col) => !col?.columns)) {
       lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
     }
@@ -32,10 +32,10 @@ export const getAllLeafColumnDefs = <D extends Record<string, any> = {}>(
   return lowestLevelColumns.filter((col) => !col.columns);
 };
 
-export const prepareColumns = <D extends Record<string, any> = {}>(
-  columnDefs: MRT_ColumnDef<D>[],
+export const prepareColumns = <TData extends Record<string, any> = {}>(
+  columnDefs: MRT_ColumnDef<TData>[],
   currentFilterFns: { [key: string]: MRT_FilterOption },
-): MRT_DefinedColumnDef<D>[] =>
+): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
     if (!columnDef.id) columnDef.id = getColumnId(columnDef);
     if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
@@ -58,11 +58,11 @@ export const prepareColumns = <D extends Record<string, any> = {}>(
       }
     }
     return columnDef;
-  }) as MRT_DefinedColumnDef<D>[];
+  }) as MRT_DefinedColumnDef<TData>[];
 
-export const reorderColumn = <D extends Record<string, any> = {}>(
-  movingColumn: MRT_Column<D>,
-  receivingColumn: MRT_Column<D>,
+export const reorderColumn = <TData extends Record<string, any> = {}>(
+  movingColumn: MRT_Column<TData>,
+  receivingColumn: MRT_Column<TData>,
   columnOrder: ColumnOrderState,
 ): ColumnOrderState => {
   if (movingColumn.getCanPin()) {
@@ -76,8 +76,10 @@ export const reorderColumn = <D extends Record<string, any> = {}>(
   return [...columnOrder];
 };
 
-export const getLeadingDisplayColumnIds = <D extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<D>,
+export const getLeadingDisplayColumnIds = <
+  TData extends Record<string, any> = {},
+>(
+  props: MaterialReactTableProps<TData>,
 ) =>
   [
     ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
@@ -88,16 +90,20 @@ export const getLeadingDisplayColumnIds = <D extends Record<string, any> = {}>(
     props.enableRowNumbers && 'mrt-row-numbers',
   ].filter(Boolean) as string[];
 
-export const getTrailingDisplayColumnIds = <D extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<D>,
+export const getTrailingDisplayColumnIds = <
+  TData extends Record<string, any> = {},
+>(
+  props: MaterialReactTableProps<TData>,
 ) => [
   ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
     (props.enableEditing && props.editingMode === 'row')) &&
     'mrt-row-actions',
 ];
 
-export const getDefaultColumnOrderIds = <D extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<D>,
+export const getDefaultColumnOrderIds = <
+  TData extends Record<string, any> = {},
+>(
+  props: MaterialReactTableProps<TData>,
 ) =>
   [
     ...getLeadingDisplayColumnIds(props),

package/dist/head/MRT_DraggableTableHeadCell.d.ts

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-import type { MRT_Header, MRT_TableInstance } from '..';
-interface Props {
-    header: MRT_Header;
-    table: MRT_TableInstance;
-}
-export declare const MRT_DraggableTableHeadCell: FC<Props>;
-export {};

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -1,43 +0,0 @@
-import React, { FC } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
-import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
-import { reorderColumn } from '../utils';
-
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
-}
-
-export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, table }) => {
-  const { getState, setColumnOrder } = table;
-  const { columnOrder } = getState();
-  const { column } = header;
-
-  const [, dropRef] = useDrop({
-    accept: 'column',
-    drop: (movingColumn: MRT_Column) => {
-      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    },
-  });
-
-  const [{ isDragging }, dragRef, previewRef] = useDrag({
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-    item: () => column,
-    type: 'column',
-  });
-
-  return (
-    <MRT_TableHeadCell
-      dragRef={dragRef}
-      dropRef={dropRef}
-      header={header}
-      isDragging={isDragging}
-      previewRef={previewRef}
-      table={table}
-    />
-  );
-};