material-react-table 0.8.12 → 0.8.13

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
+    allColumns: MRT_Column[];
     column: MRT_Column;
     isSubMenu?: boolean;
     tableInstance: MRT_TableInstance;

package/dist/table/MRT_TableRoot.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { MaterialReactTableProps } from '../MaterialReactTable';
 export declare const MRT_TableRoot: <D extends Record<string, any> = {}>(props: MaterialReactTableProps<D>) => JSX.Element;

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
     [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFN" | "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.12",
+  "version": "0.8.13",
   "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.",

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -23,7 +23,7 @@ export const MRT_ColumnPinningButtons: FC<Props> = ({
   };
 
   return (
-    <Box sx={{ mr: '8px' }}>
+    <Box sx={{ mr: '4px' }}>
       {column.getIsPinned() ? (
         <Tooltip arrow title={localization.unpin}>
           <IconButton onClick={() => handlePinColumn(false)} size="small">

package/src/{head/MRT_TableHeadCellGrabHandle.tsx → buttons/MRT_GrabHandleButton.tsx}

@@ -1,14 +1,13 @@
 import { IconButton, Tooltip } from '@mui/material';
 import React, { FC, forwardRef, Ref } from 'react';
-import { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_TableInstance } from '..';
 
 interface Props {
-  header: MRT_Header;
   ref: Ref<HTMLButtonElement>;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCellGrabHandle: FC<Props> = forwardRef(
+export const MRT_GrabHandleButton: FC<Props> = forwardRef(
   ({ tableInstance }, ref) => {
     const {
       options: {

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -24,11 +24,10 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
     if (movingHeader.column.getCanPin()) {
       movingHeader.column.pin(receivingHeader.column.getIsPinned());
     }
-    const { index: currentIndex } = movingHeader;
     columnOrder.splice(
       receivingHeader.index,
       0,
-      columnOrder.splice(currentIndex, 1)[0],
+      columnOrder.splice(movingHeader.index, 1)[0],
     );
     setColumnOrder([...columnOrder]);
   };

package/src/head/MRT_TableHeadCell.tsx

@@ -2,7 +2,7 @@ import React, { FC, ReactNode, Ref } from 'react';
 import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
-import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
@@ -190,8 +190,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
               ((enableColumnOrdering &&
                 columnDef.enableColumnOrdering !== false) ||
                 (enableGrouping && columnDef.enableGrouping !== false)) && (
-                <MRT_TableHeadCellGrabHandle
-                  header={header}
+                <MRT_GrabHandleButton
                   ref={dragRef as Ref<HTMLButtonElement>}
                   tableInstance={tableInstance}
                 />

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -97,6 +97,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       <Divider />
       {allColumns.map((column, index) => (
         <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
           column={column}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,28 +1,58 @@
-import React, { FC } from 'react';
-import { FormControlLabel, MenuItem, Switch } from '@mui/material';
+import React, { FC, Ref } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { Box, FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
+  allColumns: MRT_Column[];
   column: MRT_Column;
   isSubMenu?: boolean;
   tableInstance: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
+  allColumns,
   column,
   isSubMenu,
   tableInstance,
 }) => {
   const {
     getState,
-    options: { onToggleColumnVisibility },
+    options: { enableColumnOrdering, onToggleColumnVisibility },
+    setColumnOrder,
   } = tableInstance;
 
-  const { columnVisibility } = getState();
+  const { columnOrder, columnVisibility } = getState();
 
   const { columnDef, columnDefType } = column;
 
+  const reorder = (movingColumn: MRT_Column, receivingColumn: MRT_Column) => {
+    if (movingColumn.getCanPin()) {
+      movingColumn.pin(receivingColumn.getIsPinned());
+    }
+    columnOrder.splice(
+      columnOrder.indexOf(receivingColumn.id),
+      0,
+      columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
+    );
+    setColumnOrder([...columnOrder]);
+  };
+
+  const [, dropRef] = useDrop({
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) => reorder(movingColumn, column),
+  });
+
+  const [, dragRef, previewRef] = useDrag({
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    item: () => column,
+    type: 'column',
+  });
+
   const switchChecked =
     (columnDefType !== 'group' && column.getIsVisible()) ||
     (columnDefType === 'group' &&
@@ -46,6 +76,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   return (
     <>
       <MenuItem
+        ref={columnDefType === 'data' ? dropRef : undefined}
         sx={{
           alignItems: 'center',
           justifyContent: 'flex-start',
@@ -54,30 +85,43 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           py: '6px',
         }}
       >
-        {!isSubMenu && column.getCanPin() && (
-          <MRT_ColumnPinningButtons
-            column={column}
-            tableInstance={tableInstance}
-          />
-        )}
-        <FormControlLabel
-          componentsProps={{
-            typography: {
-              sx: {
-                marginBottom: 0,
-                opacity: columnDefType !== 'display' ? 1 : 0.5,
+        <Box ref={previewRef} sx={{ display: 'flex', flexWrap: 'nowrap' }}>
+          {columnDefType !== 'group' &&
+            enableColumnOrdering &&
+            columnDef.enableColumnOrdering !== false &&
+            !allColumns.some((col) => col.columnDefType === 'group') && (
+              <MRT_GrabHandleButton
+                ref={dragRef as Ref<HTMLButtonElement>}
+                tableInstance={tableInstance}
+              />
+            )}
+          {!isSubMenu && column.getCanPin() && (
+            <MRT_ColumnPinningButtons
+              column={column}
+              tableInstance={tableInstance}
+            />
+          )}
+          <FormControlLabel
+            componentsProps={{
+              typography: {
+                sx: {
+                  mb: 0,
+                  opacity: columnDefType !== 'display' ? 1 : 0.5,
+                },
               },
-            },
-          }}
-          checked={switchChecked}
-          control={<Switch />}
-          disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
-          label={columnDef.header}
-          onChange={() => handleToggleColumnHidden(column)}
-        />
+            }}
+            checked={switchChecked}
+            control={<Switch />}
+            disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
+            label={columnDef.header}
+            onChange={() => handleToggleColumnHidden(column)}
+            sx={{ ml: '4px' }}
+          />
+        </Box>
       </MenuItem>
       {column.columns?.map((c: MRT_Column, i) => (
         <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
           key={`${i}-${c.id}`}
           column={c}
           isSubMenu={isSubMenu}

package/dist/head/MRT_TableHeadCellGrabHandle.d.ts

@@ -1,9 +0,0 @@
-import { FC, Ref } from 'react';
-import { MRT_Header, MRT_TableInstance } from '..';
-interface Props {
-    header: MRT_Header;
-    ref: Ref<HTMLButtonElement>;
-    tableInstance: MRT_TableInstance;
-}
-export declare const MRT_TableHeadCellGrabHandle: FC<Props>;
-export {};