material-react-table 0.19.0 → 0.22.0

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,9 +1,11 @@
-import { FC } from 'react';
+import { Dispatch, FC, SetStateAction } from 'react';
 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 declare const MRT_ShowHideColumnsMenuItems: FC<Props>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.19.0",
+  "version": "0.22.0",
   "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.",
@@ -61,7 +61,7 @@
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.6",
+    "@mui/material": "^5.8.7",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -99,8 +99,6 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
     "@tanstack/react-table": "8.1.3",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-virtual": "^2.10.4"
   }
 }

package/src/body/MRT_TableBody.tsx

@@ -1,16 +1,21 @@
-import React, { FC, RefObject, useMemo } from 'react';
+import React, { Dispatch, FC, RefObject, SetStateAction, useMemo } from 'react';
 import { useVirtual } from 'react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import type { MRT_Row, MRT_TableInstance } from '..';
 import { rankGlobalFuzzy } from '../sortingFns';
+import type { MRT_Column, 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> = ({ table, tableContainerRef }) => {
+export const MRT_TableBody: FC<Props> = ({
+  setCurrentHoveredColumn,
+  table,
+  tableContainerRef,
+}) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -62,19 +67,27 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
 
   const rowVirtualizer = enableRowVirtualization
     ? useVirtual({
-        overscan: density === 'compact' ? 20 : 10,
-        size: rows.length,
+        // estimateSize: () => (density === 'compact' ? 25 : 50),
+        overscan: density === 'compact' ? 30 : 10,
         parentRef: tableContainerRef,
+        size: rows.length,
         ...virtualizerProps,
       })
     : ({} as any);
 
-  const { virtualItems: virtualRows } = rowVirtualizer;
-  const paddingTop = virtualRows?.length > 0 ? virtualRows[0].start : 0;
-  const paddingBottom =
-    virtualRows?.length > 0
-      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-      : 0;
+  const virtualRows = enableRowVirtualization
+    ? rowVirtualizer.virtualItems
+    : [];
+
+  let paddingTop = 0;
+  let paddingBottom = 0;
+  if (enableRowVirtualization) {
+    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+    paddingBottom =
+      virtualRows.length > 0
+        ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
+        : 0;
+  }
 
   return (
     <TableBody {...tableBodyProps}>
@@ -83,7 +96,6 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
           <td style={{ height: `${paddingTop}px` }} />
         </tr>
       )}
-      {/* @ts-ignore */}
       {(enableRowVirtualization ? virtualRows : rows).map(
         (rowOrVirtualRow: any, rowIndex: number) => {
           const row = enableRowVirtualization
@@ -96,6 +108,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
               rowIndex={
                 enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
               }
+              setCurrentHoveredColumn={setCurrentHoveredColumn}
               table={table}
             />
           );

package/src/body/MRT_TableBodyCell.tsx

@@ -1,15 +1,21 @@
-import React, { FC, MouseEvent, useMemo } from 'react';
-import { useDrop } from 'react-dnd';
+import React, {
+  Dispatch,
+  DragEvent,
+  FC,
+  MouseEvent,
+  SetStateAction,
+  useMemo,
+} from 'react';
 import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
-import { reorderColumn } from '../utils';
 import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
   rowIndex: number;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
@@ -17,6 +23,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
   rowIndex,
+  setCurrentHoveredColumn,
   table,
 }) => {
   const {
@@ -24,7 +31,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
     options: {
       editingMode,
       enableClickToCopy,
-      enableColumnOrdering,
       enableEditing,
       enableRowNumbers,
       muiTableBodyCellProps,
@@ -32,11 +38,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
       rowNumberMode,
       tableId,
     },
-    setColumnOrder,
     setCurrentEditingCell,
   } = table;
   const {
-    columnOrder,
     currentEditingCell,
     currentEditingRow,
     density,
@@ -47,14 +51,6 @@ export const MRT_TableBodyCell: 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 mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps({ cell, table })
@@ -125,13 +121,15 @@ export const MRT_TableBodyCell: FC<Props> = ({
     );
   };
 
+  const handleDragEnter = (_e: DragEvent) => {
+    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+  };
+
   return (
     <TableCell
       onDoubleClick={handleDoubleClick}
+      onDragEnter={handleDragEnter}
       {...tableCellProps}
-      ref={
-        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
-      }
       sx={(theme) => ({
         backgroundColor: column.getIsPinned()
           ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)

package/src/body/MRT_TableBodyRow.tsx

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

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,13 +1,18 @@
 import { IconButton, Tooltip } from '@mui/material';
-import React, { FC, forwardRef, Ref } from 'react';
+import React, { DragEventHandler, FC } from 'react';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  ref: Ref<HTMLButtonElement>;
+  handleDragStart: DragEventHandler<HTMLButtonElement>;
+  handleDragEnd: DragEventHandler<HTMLButtonElement>;
   table: MRT_TableInstance;
 }
 
-export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
+export const MRT_GrabHandleButton: FC<Props> = ({
+  handleDragStart,
+  handleDragEnd,
+  table,
+}) => {
   const {
     options: {
       icons: { DragHandleIcon },
@@ -25,7 +30,9 @@ export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
     >
       <IconButton
         disableRipple
-        ref={ref}
+        draggable="true"
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
         size="small"
         sx={{
           cursor: 'grab',
@@ -46,4 +53,4 @@ export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
       </IconButton>
     </Tooltip>
   );
-});
+};

package/src/head/MRT_TableHead.tsx

@@ -1,13 +1,19 @@
-import React, { FC } from 'react';
+import React, { Dispatch, FC, SetStateAction } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import type { MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
+  currentHoveredColumn: MRT_Column | null;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
-export const MRT_TableHead: FC<Props> = ({ table }) => {
+export const MRT_TableHead: FC<Props> = ({
+  currentHoveredColumn,
+  setCurrentHoveredColumn,
+  table,
+}) => {
   const {
     getHeaderGroups,
     options: { muiTableHeadProps },
@@ -22,6 +28,8 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
     <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,4 +1,11 @@
-import React, { FC, ReactNode, Ref } from 'react';
+import React, {
+  Dispatch,
+  DragEvent,
+  FC,
+  ReactNode,
+  SetStateAction,
+  useState,
+} from 'react';
 import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
@@ -6,24 +13,21 @@ 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_Header, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
+import { reorderColumn } from '../utils';
 
 interface Props {
-  dragRef?: Ref<HTMLButtonElement>;
-  dropRef?: Ref<HTMLDivElement>;
+  currentHoveredColumn: MRT_Column | null;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   header: MRT_Header;
   table: MRT_TableInstance;
-  isDragging?: boolean;
-  previewRef?: Ref<HTMLTableCellElement>;
 }
 
 export const MRT_TableHeadCell: FC<Props> = ({
-  dragRef,
-  dropRef,
+  currentHoveredColumn,
+  setCurrentHoveredColumn,
   header,
   table,
-  isDragging,
-  previewRef,
 }) => {
   const {
     getState,
@@ -35,8 +39,9 @@ export const MRT_TableHeadCell: FC<Props> = ({
       enableMultiSort,
       muiTableHeadCellProps,
     },
+    setColumnOrder,
   } = table;
-  const { density, showFilters } = getState();
+  const { columnOrder, density } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -80,32 +85,57 @@ export const MRT_TableHeadCell: FC<Props> = ({
     );
   };
 
+  const tableHeadCellRef = React.useRef<HTMLElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(tableHeadCellRef.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) => {
+    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+  };
+
   return (
     <TableCell
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
+      onDragEnter={handleDragEnter}
+      ref={tableHeadCellRef}
       {...tableCellProps}
-      ref={
-        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
-      }
       sx={(theme: Theme) => ({
         backgroundColor:
           column.getIsPinned() && columnDefType !== 'group'
             ? 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()
           ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
           : undefined,
         fontWeight: 'bold',
-        height: '100%',
         left:
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
         overflow: 'visible',
+        opacity: isDragging ? 0.5 : 1,
         p:
           density === 'compact'
             ? columnDefType === 'display'
@@ -124,7 +154,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
             ? 'sticky'
             : undefined,
         pt:
-          columnDefType !== 'data'
+          columnDefType === 'group'
             ? 0
             : density === 'compact'
             ? '0.25'
@@ -135,8 +165,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
-        verticalAlign:
-          columnDefType === 'display' && showFilters ? 'center' : 'text-top',
+        verticalAlign: 'text-top',
         zIndex: column.getIsResizing()
           ? 3
           : column.getIsPinned() && columnDefType !== 'group'
@@ -152,7 +181,6 @@ export const MRT_TableHeadCell: FC<Props> = ({
         headerElement
       ) : (
         <Box
-          ref={previewRef}
           sx={{
             alignItems: 'flex-start',
             display: 'flex',
@@ -191,7 +219,8 @@ export const MRT_TableHeadCell: FC<Props> = ({
                 columnDef.enableColumnOrdering !== false) ||
                 (enableGrouping && columnDef.enableGrouping !== false)) && (
                 <MRT_GrabHandleButton
-                  ref={dragRef as Ref<HTMLButtonElement>}
+                  handleDragStart={handleDragStart}
+                  handleDragEnd={handleDragEnd}
                   table={table}
                 />
               )}

package/src/head/MRT_TableHeadRow.tsx

@@ -1,17 +1,28 @@
-import React, { FC } from 'react';
+import React, { Dispatch, FC, SetStateAction } from 'react';
 import { alpha, lighten, TableRow } from '@mui/material';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import { MRT_DraggableTableHeadCell } from './MRT_DraggableTableHeadCell';
-import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
+import type {
+  MRT_Column,
+  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> = ({ headerGroup, table }) => {
+export const MRT_TableHeadRow: FC<Props> = ({
+  currentHoveredColumn,
+  setCurrentHoveredColumn,
+  headerGroup,
+  table,
+}) => {
   const {
-    options: { enableColumnOrdering, enableGrouping, muiTableHeadRowProps },
+    options: { muiTableHeadRowProps },
   } = table;
 
   const tableRowProps =
@@ -28,21 +39,15 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
         ...(tableRowProps?.sx as any),
       })}
     >
-      {headerGroup.headers.map((header: MRT_Header, index) =>
-        enableColumnOrdering || enableGrouping ? (
-          <MRT_DraggableTableHeadCell
-            header={header}
-            key={header.id || index}
-            table={table}
-          />
-        ) : (
-          <MRT_TableHeadCell
-            header={header}
-            key={header.id || index}
-            table={table}
-          />
-        ),
-      )}
+      {headerGroup.headers.map((header: MRT_Header, index) => (
+        <MRT_TableHeadCell
+          currentHoveredColumn={currentHoveredColumn}
+          setCurrentHoveredColumn={setCurrentHoveredColumn}
+          header={header}
+          key={header.id || index}
+          table={table}
+        />
+      ))}
     </TableRow>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, 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 '..';
@@ -62,6 +62,9 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getRightLeafColumns(),
   ]) as MRT_Column[];
 
+  const [currentHoveredColumn, setCurrentHoveredColumn] =
+    useState<MRT_Column | null>(null);
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -118,8 +121,10 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}
           column={column}
+          currentHoveredColumn={currentHoveredColumn}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
+          setCurrentHoveredColumn={setCurrentHoveredColumn}
           table={table}
         />
       ))}