material-react-table 0.8.0 → 0.8.1

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
+import React, { useMemo, useState, useCallback, Fragment, forwardRef, useLayoutEffect, useEffect } from 'react';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
@@ -7,6 +7,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import DensityMediumIcon from '@mui/icons-material/DensityMedium';
 import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import EditIcon from '@mui/icons-material/Edit';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@@ -28,8 +29,10 @@ import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, functionalUpdate } 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, TableCell, TableSortLabel, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
+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';
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
+import { useDrop, useDrag, DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -48,6 +51,10 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure undefined");
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -92,6 +99,7 @@ var MRT_DefaultLocalization_EN = {
   filterNotEquals: 'Not Equals',
   filterStartsWith: 'Starts With',
   filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+  grab: 'Grab',
   groupByColumn: 'Group by {column}',
   groupedBy: 'Grouped by ',
   hideAll: 'Hide all',
@@ -138,6 +146,7 @@ var MRT_Default_Icons = {
   DensityMediumIcon: DensityMediumIcon,
   DensitySmallIcon: DensitySmallIcon,
   DoubleArrowDownIcon: DoubleArrowDownIcon,
+  DragHandleIcon: DragHandleIcon,
   DynamicFeedIcon: DynamicFeedIcon,
   EditIcon: EditIcon,
   ExpandLessIcon: ExpandLessIcon,
@@ -1989,6 +1998,190 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }));
 };
 
+var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var localization = tableInstance.options.localization;
+  return React.createElement(Box, {
+    sx: {
+      display: 'grid',
+      gridTemplateColumns: '6fr auto 5fr'
+    }
+  }, React.createElement(MRT_FilterTextField, {
+    header: header,
+    inputIndex: 0,
+    tableInstance: tableInstance
+  }), React.createElement(Box, {
+    sx: {
+      width: '100%',
+      minWidth: '5ch',
+      textAlign: 'center'
+    }
+  }, localization.to), React.createElement(MRT_FilterTextField, {
+    header: header,
+    inputIndex: 1,
+    tableInstance: tableInstance
+  }));
+};
+
+var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState;
+
+  var _getState = getState(),
+      currentFilterFns = _getState.currentFilterFns,
+      showFilters = _getState.showFilters;
+
+  var column = header.column;
+  return React.createElement(Collapse, {
+    "in": showFilters,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? React.createElement(MRT_FilterRangeFields, {
+    header: header,
+    tableInstance: tableInstance
+  }) : React.createElement(MRT_FilterTextField, {
+    header: header,
+    tableInstance: tableInstance
+  }));
+};
+
+var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
+  var _getState2, _getState2$currentFil;
+
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      FilterAltIcon = _tableInstance$option2.FilterAltIcon,
+      FilterAltOff = _tableInstance$option2.FilterAltOff,
+      localization = _tableInstance$option.localization,
+      setShowFilters = tableInstance.setShowFilters;
+
+  var _getState = getState(),
+      showFilters = _getState.showFilters;
+
+  var column = header.column;
+  var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
+  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
+  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '') : localization.showHideFilters;
+  return React.createElement(Tooltip, {
+    arrow: true,
+    placement: "top",
+    title: filterTooltip
+  }, React.createElement(IconButton, {
+    disableRipple: true,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      setShowFilters(!showFilters);
+    },
+    size: "small",
+    sx: {
+      m: 0,
+      opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
+      p: '2px',
+      transition: 'all 0.2s ease-in-out',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 0.8
+      }
+    }
+  }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOff, 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;
+  var getState = tableInstance.getState;
+
+  var _getState = getState(),
+      showFilters = _getState.showFilters;
+
+  var column = header.column;
+  return React.createElement(Divider, {
+    flexItem: true,
+    orientation: "vertical",
+    onDoubleClick: function onDoubleClick() {
+      return column.resetSize();
+    },
+    sx: function sx(theme) {
+      return {
+        borderRadius: '2px',
+        borderRightWidth: '2px',
+        cursor: 'col-resize',
+        height: showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        opacity: 0.8,
+        position: 'absolute',
+        right: '1px',
+        touchAction: 'none',
+        transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
+        userSelect: 'none',
+        zIndex: 2000,
+        '&:active': {
+          backgroundColor: theme.palette.info.main,
+          opacity: 1
+        }
+      };
+    },
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
+    style: {
+      transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : 'none'
+    }
+  });
+};
+
+var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var localization = tableInstance.options.localization;
+  var column = header.column;
+  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.columnDef.header) : localization.sortedByColumnAsc.replace('{column}', column.columnDef.header) : localization.unsorted;
+  return React.createElement(Tooltip, {
+    arrow: true,
+    placement: "top",
+    title: sortTooltip
+  }, React.createElement(TableSortLabel, {
+    "aria-label": sortTooltip,
+    active: !!column.getIsSorted(),
+    direction: column.getIsSorted() ? column.getIsSorted() : undefined
+  }));
+};
+
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
   var header = _ref.header,
       tableInstance = _ref.tableInstance;
@@ -2049,53 +2242,26 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
-  var header = _ref.header,
-      tableInstance = _ref.tableInstance;
-  var localization = tableInstance.options.localization;
-  return React.createElement(Box, {
-    sx: {
-      display: 'grid',
-      gridTemplateColumns: '6fr auto 5fr'
-    }
-  }, React.createElement(MRT_FilterTextField, {
-    header: header,
-    inputIndex: 0,
-    tableInstance: tableInstance
-  }), React.createElement(Box, {
-    sx: {
-      width: '100%',
-      minWidth: '5ch',
-      textAlign: 'center'
-    }
-  }, localization.to), React.createElement(MRT_FilterTextField, {
-    header: header,
-    inputIndex: 1,
-    tableInstance: tableInstance
-  }));
-};
-
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _getState2, _getState2$currentFil, _column$columnDef$Hea, _column$columnDef, _column$minSize, _column$columnDef$hea, _column$columnDef$hea2;
+  var _column$columnDef$Hea, _column$columnDef, _column$minSize, _column$columnDef$hea, _column$columnDef$hea2;
 
-  var header = _ref.header,
+  var dragRef = _ref.dragRef,
+      dropRef = _ref.dropRef,
+      header = _ref.header,
+      isDragging = _ref.isDragging,
+      previewRef = _ref.previewRef,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableColumnActions = _tableInstance$option.enableColumnActions,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
       enableColumnResizing = _tableInstance$option.enableColumnResizing,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      FilterAltIcon = _tableInstance$option2.FilterAltIcon,
-      FilterAltOff = _tableInstance$option2.FilterAltOff,
-      localization = _tableInstance$option.localization,
-      muiTableHeadCellProps = _tableInstance$option.muiTableHeadCellProps,
-      setShowFilters = tableInstance.setShowFilters;
+      enableGrouping = _tableInstance$option.enableGrouping,
+      muiTableHeadCellProps = _tableInstance$option.muiTableHeadCellProps;
 
   var _getState = getState(),
-      currentFilterFns = _getState.currentFilterFns,
-      isDensePadding = _getState.isDensePadding,
-      showFilters = _getState.showFilters;
+      isDensePadding = _getState.isDensePadding;
 
   var column = header.column;
   var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps({
@@ -2109,10 +2275,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.columnDef.header) : localization.sortedByColumnAsc.replace('{column}', column.columnDef.header) : localization.unsorted;
-  var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
-  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
-  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '') : localization.showHideFilters;
   var headerElement = (_column$columnDef$Hea = (_column$columnDef = column.columnDef) == null ? void 0 : _column$columnDef.Header == null ? void 0 : _column$columnDef.Header({
     header: header,
     tableInstance: tableInstance
@@ -2130,10 +2292,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     return (tableInstance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
+  console.log(column.getCanGroup());
   return React.createElement(TableCell, Object.assign({
     align: column.columnDefType === 'group' ? 'center' : 'left',
     colSpan: header.colSpan
   }, tableCellProps, {
+    ref: column.columnDefType === 'data' ? dropRef : undefined,
     sx: function sx(theme) {
       return _extends({
         backgroundColor: column.getIsPinned() && column.columnDefType !== 'group' ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
@@ -2159,10 +2323,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       width: header.getSize()
     }
   }), header.isPlaceholder ? null : column.columnDefType === 'display' ? headerElement : React.createElement(Box, {
+    ref: previewRef,
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
       justifyContent: column.columnDefType === 'group' ? 'center' : 'space-between',
+      opacity: isDragging ? 0.5 : 1,
       width: '100%'
     }
   }, React.createElement(Box, {
@@ -2176,85 +2342,90 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       flexWrap: 'nowrap',
       whiteSpace: ((_column$columnDef$hea = (_column$columnDef$hea2 = column.columnDef.header) == null ? void 0 : _column$columnDef$hea2.length) != null ? _column$columnDef$hea : 0) < 24 ? 'nowrap' : 'normal'
     }
-  }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React.createElement(Tooltip, {
-    arrow: true,
-    placement: "top",
-    title: sortTooltip
-  }, React.createElement(TableSortLabel, {
-    "aria-label": sortTooltip,
-    active: !!column.getIsSorted(),
-    direction: column.getIsSorted() ? column.getIsSorted() : undefined
-  })), column.columnDefType === 'data' && enableColumnFilters && !!column.getCanFilter() && React.createElement(Tooltip, {
-    arrow: true,
-    placement: "top",
-    title: filterTooltip
-  }, React.createElement(IconButton, {
-    disableRipple: true,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      setShowFilters(!showFilters);
-    },
-    size: "small",
+  }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React.createElement(MRT_TableHeadCellSortLabel, {
+    header: header,
+    tableInstance: tableInstance
+  }), column.columnDefType === 'data' && enableColumnFilters && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterLabel, {
+    header: header,
+    tableInstance: tableInstance
+  })), React.createElement(Box, {
     sx: {
-      m: 0,
-      opacity: !!column.getFilterValue() ? 0.8 : 0,
-      p: '2px',
-      transition: 'all 0.2s ease-in-out',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 0.8
-      }
+      whiteSpace: 'nowrap'
     }
-  }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOff, null) : React.createElement(FilterAltIcon, null)))), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  }, column.columnDefType === 'data' && (enableColumnOrdering && column.enableColumnOrdering !== false || enableGrouping && column.enableGrouping !== false) && React.createElement(MRT_TableHeadCellGrabHandle, {
     header: header,
+    ref: dragRef,
     tableInstance: tableInstance
-  }), column.getCanResize() && React.createElement(Divider, {
-    flexItem: true,
-    orientation: "vertical",
-    onDoubleClick: function onDoubleClick() {
-      return column.resetSize();
-    },
-    sx: function sx(theme) {
+  }), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
+    header: header,
+    tableInstance: tableInstance
+  })), column.getCanResize() && React.createElement(MRT_TableHeadCellResizeHandle, {
+    header: header,
+    tableInstance: tableInstance
+  })), column.columnDefType === 'data' && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterContainer, {
+    header: header,
+    tableInstance: tableInstance
+  }));
+};
+
+var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState;
+
+  _objectDestructuringEmpty(tableInstance.options);
+
+  var setColumnOrder = tableInstance.setColumnOrder;
+
+  var _getState = getState(),
+      columnOrder = _getState.columnOrder;
+
+  var reorder = function reorder(item, newIndex) {
+    var currentIndex = item.index;
+    columnOrder.splice(newIndex, 0, columnOrder.splice(currentIndex, 1)[0]);
+    setColumnOrder([].concat(columnOrder));
+  };
+
+  var _useDrop = useDrop({
+    accept: 'header',
+    drop: function drop(item) {
+      return reorder(item, header.index);
+    }
+  }),
+      drop = _useDrop[1];
+
+  var _useDrag = useDrag({
+    collect: function collect(monitor) {
       return {
-        borderRadius: '2px',
-        borderRightWidth: '2px',
-        cursor: 'col-resize',
-        height: showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
-        opacity: 0.8,
-        position: 'absolute',
-        right: '1px',
-        touchAction: 'none',
-        transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
-        userSelect: 'none',
-        zIndex: 2000,
-        '&:active': {
-          backgroundColor: theme.palette.info.main,
-          opacity: 1
-        }
+        isDragging: monitor.isDragging()
       };
     },
-    onMouseDown: header.getResizeHandler(),
-    onTouchStart: header.getResizeHandler(),
-    style: {
-      transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : 'none'
-    }
-  })), column.columnDefType === 'data' && column.getCanFilter() && React.createElement(Collapse, {
-    "in": showFilters,
-    mountOnEnter: true,
-    unmountOnExit: true
-  }, currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? React.createElement(MRT_FilterRangeFields, {
-    header: header,
-    tableInstance: tableInstance
-  }) : React.createElement(MRT_FilterTextField, {
+    item: function item() {
+      return header;
+    },
+    type: 'header'
+  }),
+      isDragging = _useDrag[0].isDragging,
+      drag = _useDrag[1],
+      preview = _useDrag[2];
+
+  return React.createElement(MRT_TableHeadCell, {
+    dragRef: drag,
+    dropRef: drop,
     header: header,
+    isDragging: isDragging,
+    previewRef: preview,
     tableInstance: tableInstance
-  })));
+  });
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var headerGroup = _ref.headerGroup,
       tableInstance = _ref.tableInstance;
-  var muiTableHeadRowProps = tableInstance.options.muiTableHeadRowProps;
+  var _tableInstance$option = tableInstance.options,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
+      enableGrouping = _tableInstance$option.enableGrouping,
+      muiTableHeadRowProps = _tableInstance$option.muiTableHeadRowProps;
   var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
     headerGroup: headerGroup,
     tableInstance: tableInstance
@@ -2267,7 +2438,11 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       }, tableRowProps == null ? void 0 : tableRowProps.sx);
     }
   }), headerGroup.headers.map(function (header, index) {
-    return React.createElement(MRT_TableHeadCell, {
+    return enableColumnOrdering || enableGrouping ? React.createElement(MRT_DraggableTableHeadCell, {
+      header: header,
+      key: header.id || index,
+      tableInstance: tableInstance
+    }) : React.createElement(MRT_TableHeadCell, {
       header: header,
       key: header.id || index,
       tableInstance: tableInstance
@@ -2841,7 +3016,9 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
     tableInstance: tableInstance
   }) : muiTablePaperProps;
-  return React.createElement(Paper, Object.assign({
+  return React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, React.createElement(Paper, Object.assign({
     elevation: 2
   }, tablePaperProps, {
     sx: _extends({
@@ -2861,7 +3038,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     tableInstance: tableInstance
   }), enableToolbarBottom && React.createElement(MRT_ToolbarBottom, {
     tableInstance: tableInstance
-  }));
+  })));
 };
 
 var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
@@ -3076,7 +3253,18 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         return _ref7 = {}, _ref7[c.id] = null, _ref7;
       })));
     }) : props.data;
-  }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]); //@ts-ignore
+  }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]);
+
+  var _useState11 = useState(function () {
+    var _initialState$columnO;
+
+    return ((_initialState$columnO = initialState == null ? void 0 : initialState.columnOrder) != null ? _initialState$columnO : props.enableColumnOrdering) ? getAllLeafColumnDefs(columns).map(function (c) {
+      return c.id;
+    }) : [];
+  }),
+      columnOrder = _useState11[0],
+      setColumnOrder = _useState11[1]; //@ts-ignore
+
 
   var tableInstance = _extends({}, useTableInstance(table, _extends({
     filterFns: defaultFilterFNs,
@@ -3092,6 +3280,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     },
     //@ts-ignore
     globalFilterFn: currentGlobalFilterFn,
+    onColumnOrderChange: setColumnOrder,
     onPaginationChange: function onPaginationChange(updater) {
       return setPagination(function (old) {
         return functionalUpdate(updater, old);
@@ -3104,6 +3293,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     idPrefix: idPrefix,
     initialState: initialState,
     state: _extends({
+      columnOrder: columnOrder,
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
@@ -3166,7 +3356,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3184,6 +3374,8 @@ var MaterialReactTable = (function (_ref) {
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
       _ref$enableColumnFilt = _ref.enableColumnFilters,
       enableColumnFilters = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnOrde = _ref.enableColumnOrdering,
+      enableColumnOrdering = _ref$enableColumnOrde === void 0 ? false : _ref$enableColumnOrde,
       _ref$enableColumnResi = _ref.enableColumnResizing,
       enableColumnResizing = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
       _ref$enableDensePaddi = _ref.enableDensePaddingToggle,
@@ -3196,6 +3388,8 @@ var MaterialReactTable = (function (_ref) {
       enableFullScreenToggle = _ref$enableFullScreen === void 0 ? true : _ref$enableFullScreen,
       _ref$enableGlobalFilt = _ref.enableGlobalFilter,
       enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
+      _ref$enableGrouping = _ref.enableGrouping,
+      enableGrouping = _ref$enableGrouping === void 0 ? false : _ref$enableGrouping,
       _ref$enableHiding = _ref.enableHiding,
       enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
       _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
@@ -3241,12 +3435,14 @@ var MaterialReactTable = (function (_ref) {
     editingMode: editingMode,
     enableColumnActions: enableColumnActions,
     enableColumnFilters: enableColumnFilters,
+    enableColumnOrdering: enableColumnOrdering,
     enableColumnResizing: enableColumnResizing,
     enableDensePaddingToggle: enableDensePaddingToggle,
     enableExpandAll: enableExpandAll,
     enableFilters: enableFilters,
     enableFullScreenToggle: enableFullScreenToggle,
     enableGlobalFilter: enableGlobalFilter,
+    enableGrouping: enableGrouping,
     enableHiding: enableHiding,
     enableMultiRowSelection: enableMultiRowSelection,
     enablePagination: enablePagination,