material-react-table 0.23.3 → 0.24.0

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -0,0 +1,77 @@
+import React, { DragEvent, FC, RefObject } from 'react';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { reorderColumn } from '../utils';
+import type { MRT_Column, MRT_TableInstance } from '..';
+
+interface Props {
+  column: MRT_Column;
+  table: MRT_TableInstance;
+  tableHeadCellRef: RefObject<HTMLTableCellElement>;
+}
+
+export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
+  column,
+  table,
+  tableHeadCellRef,
+}) => {
+  const {
+    getState,
+    options: {
+      enableColumnOrdering,
+      muiTableHeadCellDragHandleProps,
+      onColumnDrop,
+    },
+    setColumnOrder,
+    setCurrentDraggingColumn,
+    setCurrentHoveredColumn,
+  } = table;
+  const { columnDef } = column;
+  const { currentHoveredColumn, currentDraggingColumn, columnOrder } =
+    getState();
+
+  const mIconButtonProps =
+    muiTableHeadCellDragHandleProps instanceof Function
+      ? muiTableHeadCellDragHandleProps({ column, table })
+      : muiTableHeadCellDragHandleProps;
+
+  const mcIconButtonProps =
+    columnDef.muiTableHeadCellDragHandleProps instanceof Function
+      ? columnDef.muiTableHeadCellDragHandleProps({ column, table })
+      : columnDef.muiTableHeadCellDragHandleProps;
+
+  const iconButtonProps = {
+    ...mIconButtonProps,
+    ...mcIconButtonProps,
+  };
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setCurrentDraggingColumn(column);
+    e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    onColumnDrop?.({
+      event,
+      draggedColumn: column,
+      targetColumn: currentHoveredColumn,
+    });
+    if (
+      enableColumnOrdering &&
+      currentHoveredColumn &&
+      currentHoveredColumn?.id !== currentDraggingColumn?.id
+    ) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+    setCurrentDraggingColumn(null);
+    setCurrentHoveredColumn(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      iconButtonProps={iconButtonProps}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      table={table}
+    />
+  );
+};

package/src/localization.ts

@@ -34,6 +34,7 @@ export interface MRT_Localization {
   hideColumn: string;
   max: string;
   min: string;
+  move: string;
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
@@ -102,6 +103,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   hideColumn: 'Hide {column} column',
   max: 'Max',
   min: 'Min',
+  move: 'Move',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -100,7 +100,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const handleGroupByColumn = () => {
     column.toggleGrouping();
-    setColumnOrder((old) => ['mrt-expand', ...old]);
+    setColumnOrder((old) => ['mrt-row-expand', ...old]);
     setAnchorEl(null);
   };
 

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -90,7 +90,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   return (
     <>
       <MenuItem
-        disableRipple={enableColumnOrdering}
+        disableRipple
         ref={menuItemRef as any}
         onDragEnter={handleDragEnter}
         sx={(theme) => ({
@@ -122,8 +122,8 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
             ) &&
             (columnDef.enableColumnOrdering !== false ? (
               <MRT_GrabHandleButton
-                handleDragEnd={handleDragEnd}
-                handleDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+                onDragStart={handleDragStart}
                 table={table}
               />
             ) : (

package/src/table/MRT_TableRoot.tsx

@@ -53,14 +53,18 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [columnOrder, setColumnOrder] = useState(
     initialState.columnOrder ?? [],
   );
+  const [currentDraggingColumn, setCurrentDraggingColumn] =
+    useState<MRT_Column<TData> | null>(null);
+  const [currentDraggingRow, setCurrentDraggingRow] =
+    useState<MRT_Row<TData> | null>(null);
   const [currentEditingCell, setCurrentEditingCell] =
     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 [currentHoveredRow, setCurrentHoveredRow] =
+    useState<MRT_Row<TData> | null>(null);
   const [density, setDensity] = useState(
     initialState?.density ?? 'comfortable',
   );
@@ -108,6 +112,14 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     () =>
       (
         [
+          columnOrder.includes('mrt-row-drag') && {
+            columnDefType: 'display',
+            header: props.localization?.move,
+            id: 'mrt-row-drag',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
+            size: 60,
+          },
           columnOrder.includes('mrt-row-actions') && {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
@@ -122,7 +134,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 70,
           },
-          columnOrder.includes('mrt-expand') && {
+          columnOrder.includes('mrt-row-expand') && {
             Cell: ({ cell }) => (
               <MRT_ExpandButton row={cell.row as any} table={table} />
             ),
@@ -132,12 +144,12 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               ) : null,
             columnDefType: 'display',
             header: props.localization?.expand,
-            id: 'mrt-expand',
+            id: 'mrt-row-expand',
             muiTableBodyCellProps: props.muiTableBodyCellProps,
             muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
           },
-          columnOrder.includes('mrt-select') && {
+          columnOrder.includes('mrt-row-select') && {
             Cell: ({ cell }) => (
               <MRT_SelectCheckbox row={cell.row as any} table={table} />
             ),
@@ -147,7 +159,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               ) : null,
             columnDefType: 'display',
             header: props.localization?.select,
-            id: 'mrt-select',
+            id: 'mrt-row-select',
             muiTableBodyCellProps: props.muiTableBodyCellProps,
             muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
@@ -173,6 +185,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.enableGrouping,
       props.enableRowActions,
       props.enableRowNumbers,
+      props.enableRowOrdering,
       props.enableRowSelection,
       props.enableSelectAll,
       props.localization,
@@ -229,11 +242,13 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       state: {
         columnOrder,
         currentDraggingColumn,
+        currentDraggingRow,
         currentEditingCell,
         currentEditingRow,
         currentFilterFns,
         currentGlobalFilterFn,
         currentHoveredColumn,
+        currentHoveredRow,
         density,
         isFullScreen,
         showAlertBanner,
@@ -245,6 +260,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     }),
     setCurrentDraggingColumn:
       props.onCurrentDraggingColumnChange ?? setCurrentDraggingColumn,
+    setCurrentDraggingRow:
+      props.onCurrentDraggingRowChange ?? setCurrentDraggingRow,
     setCurrentEditingCell:
       props.onCurrentEditingCellChange ?? setCurrentEditingCell,
     setCurrentEditingRow:
@@ -254,6 +271,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
     setCurrentHoveredColumn:
       props.onCurrentHoveredColumnChange ?? setCurrentHoveredColumn,
+    setCurrentHoveredRow:
+      props.onCurrentHoveredRowChange ?? setCurrentHoveredRow,
     setDensity: props.onDensityChange ?? setDensity,
     setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -3,11 +3,11 @@ import { Collapse, LinearProgress } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  alignTo: 'bottom' | 'top';
+  isTopToolbar: boolean;
   table: MRT_TableInstance;
 }
 
-export const MRT_LinearProgressBar: FC<Props> = ({ alignTo, table }) => {
+export const MRT_LinearProgressBar: FC<Props> = ({ isTopToolbar, table }) => {
   const {
     options: { muiLinearProgressProps },
     getState,
@@ -16,7 +16,7 @@ export const MRT_LinearProgressBar: FC<Props> = ({ alignTo, table }) => {
 
   const linearProgressProps =
     muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps({ table })
+      ? muiLinearProgressProps({ isTopToolbar, table })
       : muiLinearProgressProps;
 
   return (
@@ -25,9 +25,9 @@ export const MRT_LinearProgressBar: FC<Props> = ({ alignTo, table }) => {
       mountOnEnter
       unmountOnExit
       sx={{
-        bottom: alignTo === 'bottom' ? 0 : undefined,
+        bottom: isTopToolbar ? 0 : undefined,
         position: 'absolute',
-        top: alignTo === 'top' ? 0 : undefined,
+        top: !isTopToolbar ? 0 : undefined,
         width: '100%',
       }}
     >

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -53,7 +53,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
         } as any)
       }
     >
-      <MRT_LinearProgressBar alignTo="top" table={table} />
+      <MRT_LinearProgressBar isTopToolbar={false} table={table} />
       {positionToolbarAlertBanner === 'bottom' && (
         <MRT_ToolbarAlertBanner table={table} />
       )}

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -103,7 +103,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
         ['top', 'both'].includes(positionPagination ?? '') && (
           <MRT_TablePagination table={table} position="top" />
         )}
-      <MRT_LinearProgressBar alignTo="bottom" table={table} />
+      <MRT_LinearProgressBar isTopToolbar table={table} />
     </Toolbar>
   );
 };

package/src/utils.ts

@@ -61,17 +61,17 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
   }) as MRT_DefinedColumnDef<TData>[];
 
 export const reorderColumn = <TData extends Record<string, any> = {}>(
-  movingColumn: MRT_Column<TData>,
-  receivingColumn: MRT_Column<TData>,
+  draggedColumn: MRT_Column<TData>,
+  targetColumn: MRT_Column<TData>,
   columnOrder: ColumnOrderState,
 ): ColumnOrderState => {
-  if (movingColumn.getCanPin()) {
-    movingColumn.pin(receivingColumn.getIsPinned());
+  if (draggedColumn.getCanPin()) {
+    draggedColumn.pin(targetColumn.getIsPinned());
   }
   columnOrder.splice(
-    columnOrder.indexOf(receivingColumn.id),
+    columnOrder.indexOf(targetColumn.id),
     0,
-    columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
+    columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0],
   );
   return [...columnOrder];
 };
@@ -82,14 +82,15 @@ export const getLeadingDisplayColumnIds = <
   props: MaterialReactTableProps<TData>,
 ) =>
   [
+    (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
     ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
       (props.enableEditing && props.editingMode === 'row')) &&
       'mrt-row-actions',
     (props.enableExpanding ||
       props.enableGrouping ||
       props.renderDetailPanel) &&
-      'mrt-expand',
-    props.enableRowSelection && 'mrt-select',
+      'mrt-row-expand',
+    props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
   ].filter(Boolean) as string[];