material-react-table 0.8.12 → 0.8.13

package/dist/material-react-table.esm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback, Fragment, forwardRef, useLayoutEffect, useEffect } from 'react';
+import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityMedium, DensitySmall, KeyboardDoubleArrowDown, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
@@ -503,7 +503,7 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
 
   return React.createElement(Box, {
     sx: {
-      mr: '8px'
+      mr: '4px'
     }
   }, column.getIsPinned() ? React.createElement(Tooltip, {
     arrow: true,
@@ -540,20 +540,89 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
   })))));
 };
 
+var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      DragHandleIcon = _tableInstance$option.icons.DragHandleIcon,
+      localization = _tableInstance$option.localization;
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: localization.grab
+  }, React.createElement(IconButton, {
+    disableRipple: true,
+    ref: ref,
+    size: "small",
+    sx: {
+      cursor: 'grab',
+      m: 0,
+      opacity: 0.5,
+      p: '2px',
+      transition: 'all 0.2s ease-in-out',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 1
+      },
+      '&:active': {
+        cursor: 'grabbing'
+      }
+    }
+  }, React.createElement(DragHandleIcon, null)));
+});
+
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
-  var column = _ref.column,
+  var allColumns = _ref.allColumns,
+      column = _ref.column,
       isSubMenu = _ref.isSubMenu,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
-      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
+      _tableInstance$option = tableInstance.options,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
+      onToggleColumnVisibility = _tableInstance$option.onToggleColumnVisibility,
+      setColumnOrder = tableInstance.setColumnOrder;
 
   var _getState = getState(),
+      columnOrder = _getState.columnOrder,
       columnVisibility = _getState.columnVisibility;
 
   var columnDef = column.columnDef,
       columnDefType = column.columnDefType;
+
+  var reorder = function reorder(movingColumn, receivingColumn) {
+    if (movingColumn.getCanPin()) {
+      movingColumn.pin(receivingColumn.getIsPinned());
+    }
+
+    columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
+    setColumnOrder([].concat(columnOrder));
+  };
+
+  var _useDrop = useDrop({
+    accept: 'column',
+    drop: function drop(movingColumn) {
+      return reorder(movingColumn, column);
+    }
+  }),
+      dropRef = _useDrop[1];
+
+  var _useDrag = useDrag({
+    collect: function collect(monitor) {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    },
+    item: function item() {
+      return column;
+    },
+    type: 'column'
+  }),
+      dragRef = _useDrag[1],
+      previewRef = _useDrag[2];
+
   var switchChecked = columnDefType !== 'group' && column.getIsVisible() || columnDefType === 'group' && column.getLeafColumns().some(function (col) {
     return col.getIsVisible();
   });
@@ -577,6 +646,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
+    ref: columnDefType === 'data' ? dropRef : undefined,
     sx: {
       alignItems: 'center',
       justifyContent: 'flex-start',
@@ -584,14 +654,25 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       pl: (column.depth + 0.5) * 2 + "rem",
       py: '6px'
     }
-  }, !isSubMenu && column.getCanPin() && React.createElement(MRT_ColumnPinningButtons, {
+  }, React.createElement(Box, {
+    ref: previewRef,
+    sx: {
+      display: 'flex',
+      flexWrap: 'nowrap'
+    }
+  }, columnDefType !== 'group' && enableColumnOrdering && columnDef.enableColumnOrdering !== false && !allColumns.some(function (col) {
+    return col.columnDefType === 'group';
+  }) && React.createElement(MRT_GrabHandleButton, {
+    ref: dragRef,
+    tableInstance: tableInstance
+  }), !isSubMenu && column.getCanPin() && React.createElement(MRT_ColumnPinningButtons, {
     column: column,
     tableInstance: tableInstance
   }), React.createElement(FormControlLabel, {
     componentsProps: {
       typography: {
         sx: {
-          marginBottom: 0,
+          mb: 0,
           opacity: columnDefType !== 'display' ? 1 : 0.5
         }
       }
@@ -602,9 +683,13 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     label: columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
+    },
+    sx: {
+      ml: '4px'
     }
-  })), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
+  }))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
+      allColumns: allColumns,
       key: i + "-" + c.id,
       column: c,
       isSubMenu: isSubMenu,
@@ -695,6 +780,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     }
   }, localization.showAll)), React.createElement(Divider, null), allColumns.map(function (column, index) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
+      allColumns: allColumns,
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
@@ -2074,38 +2160,6 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
   }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOffIcon, null) : React.createElement(FilterAltIcon, null)));
 };
 
-var MRT_TableHeadCellGrabHandle = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      DragHandleIcon = _tableInstance$option.icons.DragHandleIcon,
-      localization = _tableInstance$option.localization;
-  return React.createElement(Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    placement: "top",
-    title: localization.grab
-  }, React.createElement(IconButton, {
-    disableRipple: true,
-    ref: ref,
-    size: "small",
-    sx: {
-      cursor: 'grab',
-      m: 0,
-      opacity: 0.5,
-      p: '2px',
-      transition: 'all 0.2s ease-in-out',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 1
-      },
-      '&:active': {
-        cursor: 'grabbing'
-      }
-    }
-  }, React.createElement(DragHandleIcon, null)));
-});
-
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
   var header = _ref.header,
       tableInstance = _ref.tableInstance;
@@ -2339,8 +2393,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     sx: {
       whiteSpace: 'nowrap'
     }
-  }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_TableHeadCellGrabHandle, {
-    header: header,
+  }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
     tableInstance: tableInstance
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
@@ -2372,8 +2425,7 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
       movingHeader.column.pin(receivingHeader.column.getIsPinned());
     }
 
-    var currentIndex = movingHeader.index;
-    columnOrder.splice(receivingHeader.index, 0, columnOrder.splice(currentIndex, 1)[0]);
+    columnOrder.splice(receivingHeader.index, 0, columnOrder.splice(movingHeader.index, 1)[0]);
     setColumnOrder([].concat(columnOrder));
   };