material-react-table 0.8.14 → 0.8.15

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

@@ -503,7 +503,8 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
 
   return React.createElement(Box, {
     sx: {
-      mr: '4px'
+      minWidth: '70px',
+      textAlign: 'center'
     }
   }, column.getIsPinned() ? React.createElement(Tooltip, {
     arrow: true,
@@ -572,6 +573,62 @@ var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, React.createElement(DragHandleIcon, null)));
 });
 
+var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
+  var lowestLevelColumns = columns;
+  var currentCols = columns;
+
+  while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
+    return col.columns;
+  })) {
+    var _currentCols;
+
+    var nextCols = currentCols.filter(function (col) {
+      return !!col.columns;
+    }).map(function (col) {
+      return col.columns;
+    }).flat();
+
+    if (nextCols.every(function (col) {
+      return !(col != null && col.columns);
+    })) {
+      lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
+    }
+
+    currentCols = nextCols;
+  }
+
+  return lowestLevelColumns.filter(function (col) {
+    return !col.columns;
+  });
+};
+var createGroup = function createGroup(table, column, currentFilterFns) {
+  var _column$columns;
+
+  return table.createGroup(_extends({}, column, {
+    columns: column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.map == null ? void 0 : _column$columns.map(function (col) {
+      return col.columns ? createGroup(table, col, currentFilterFns) : createDataColumn(table, col, currentFilterFns);
+    })
+  }));
+};
+var createDataColumn = function createDataColumn(table, column, currentFilterFns) {
+  return (// @ts-ignore
+    table.createDataColumn(column.id, _extends({
+      filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : defaultFilterFNs[currentFilterFns[column.id]]
+    }, column))
+  );
+};
+var createDisplayColumn = function createDisplayColumn(table, column) {
+  return table.createDisplayColumn(column);
+};
+var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder, setColumnOrder) {
+  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 MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
@@ -592,19 +649,10 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   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);
+      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -658,7 +706,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     ref: previewRef,
     sx: {
       display: 'flex',
-      flexWrap: 'nowrap'
+      flexWrap: 'nowrap',
+      gap: '8px'
     }
   }, columnDefType !== 'group' && enableColumnOrdering && columnDef.enableColumnOrdering !== false && !allColumns.some(function (col) {
     return col.columnDefType === 'group';
@@ -679,13 +728,10 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     },
     checked: switchChecked,
     control: React.createElement(Switch, null),
-    disabled: isSubMenu && switchChecked || !column.getCanHide(),
+    disabled: isSubMenu && switchChecked || !column.getCanHide() || column.getIsGrouped(),
     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) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
@@ -705,9 +751,12 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       tableInstance = _ref.tableInstance;
   var getAllColumns = tableInstance.getAllColumns,
       getAllLeafColumns = tableInstance.getAllLeafColumns,
+      getCenterLeafColumns = tableInstance.getCenterLeafColumns,
       getIsAllColumnsVisible = tableInstance.getIsAllColumnsVisible,
       getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
       getIsSomeColumnsVisible = tableInstance.getIsSomeColumnsVisible,
+      getLeftLeafColumns = tableInstance.getLeftLeafColumns,
+      getRightLeafColumns = tableInstance.getRightLeafColumns,
       getState = tableInstance.getState,
       toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
       _tableInstance$option = tableInstance.options,
@@ -734,17 +783,15 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     if (columnOrder.length > 0 && !columns.some(function (col) {
       return col.columnDefType === 'group';
     })) {
-      var _columnOrder$map;
-
-      return (_columnOrder$map = columnOrder.map(function (colId) {
-        return columns.find(function (col) {
-          return col.id === colId;
+      return [].concat(getLeftLeafColumns(), [].concat(new Set(columnOrder)).map(function (colId) {
+        return getCenterLeafColumns().find(function (col) {
+          return (col == null ? void 0 : col.id) === colId;
         });
-      })) != null ? _columnOrder$map : columns;
+      }), getRightLeafColumns()).filter(Boolean);
     }
 
     return columns;
-  }, [getAllColumns(), columnOrder, columnPinning]);
+  }, [columnOrder, columnPinning, getAllColumns(), getCenterLeafColumns(), getLeftLeafColumns(), getRightLeafColumns()]);
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -2289,7 +2336,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _columnDef$Header, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
+  var _ref2, _ref3, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
 
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
@@ -2323,10 +2370,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var headerElement = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
+  var headerElement = (_ref2 = (_ref3 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
     header: header,
     tableInstance: tableInstance
-  }) : (_columnDef$Header = columnDef == null ? void 0 : columnDef.Header) != null ? _columnDef$Header : header.renderHeader();
+  }) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref3 : header.renderHeader()) != null ? _ref2 : columnDef.header;
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
     return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
@@ -2344,7 +2391,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     align: columnDefType === 'group' ? 'center' : 'left',
     colSpan: header.colSpan
   }, tableCellProps, {
-    ref: columnDefType === 'data' ? dropRef : undefined,
+    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
       return _extends({
         backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
@@ -2357,7 +2404,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
-        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.75rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
@@ -2426,19 +2473,12 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
 
-  var reorder = function reorder(movingHeader, receivingHeader) {
-    if (movingHeader.column.getCanPin()) {
-      movingHeader.column.pin(receivingHeader.column.getIsPinned());
-    }
-
-    columnOrder.splice(receivingHeader.index, 0, columnOrder.splice(movingHeader.index, 1)[0]);
-    setColumnOrder([].concat(columnOrder));
-  };
+  var column = header.column;
 
   var _useDrop = useDrop({
-    accept: 'header',
-    drop: function drop(movingHeader) {
-      return reorder(movingHeader, header);
+    accept: 'column',
+    drop: function drop(movingColumn) {
+      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
     }
   }),
       dropRef = _useDrop[1];
@@ -2450,9 +2490,9 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
       };
     },
     item: function item() {
-      return header;
+      return column;
     },
-    type: 'header'
+    type: 'column'
   }),
       isDragging = _useDrag[0].isDragging,
       dragRef = _useDrag[1],
@@ -2676,14 +2716,17 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       _tableInstance$option = tableInstance.options,
       editingMode = _tableInstance$option.editingMode,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
       enableEditing = _tableInstance$option.enableEditing,
       idPrefix = _tableInstance$option.idPrefix,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
       onCellClick = _tableInstance$option.onCellClick,
+      setColumnOrder = tableInstance.setColumnOrder,
       setCurrentEditingCell = tableInstance.setCurrentEditingCell;
 
   var _getState = getState(),
+      columnOrder = _getState.columnOrder,
       currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
       isDensePadding = _getState.isDensePadding,
@@ -2694,6 +2737,15 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       row = cell.row;
   var columnDef = column.columnDef,
       columnDefType = column.columnDefType;
+
+  var _useDrop = useDrop({
+    accept: 'column',
+    drop: function drop(movingColumn) {
+      return reorderColumn(movingColumn, column, columnOrder, setColumnOrder);
+    }
+  }),
+      dropRef = _useDrop[1];
+
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
     cell: cell,
     tableInstance: tableInstance
@@ -2747,6 +2799,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     },
     onDoubleClick: handleDoubleClick
   }, tableCellProps, {
+    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
       return _extends({
         backgroundColor: column.getIsPinned() ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
@@ -2898,7 +2951,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _ref2, _ref3, _columnDef$Footer;
+  var _ref2, _ref3, _ref4;
 
   var footer = _ref.footer,
       tableInstance = _ref.tableInstance;
@@ -2942,10 +2995,10 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
+  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = (_ref4 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
     footer: footer,
     tableInstance: tableInstance
-  }) : (_ref2 = (_ref3 = (_columnDef$Footer = columnDef.Footer) != null ? _columnDef$Footer : columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
+  }) : columnDef.Footer) != null ? _ref4 : columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
@@ -3098,54 +3151,6 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   })));
 };
 
-var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
-  var lowestLevelColumns = columns;
-  var currentCols = columns;
-
-  while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
-    return col.columns;
-  })) {
-    var _currentCols;
-
-    var nextCols = currentCols.filter(function (col) {
-      return !!col.columns;
-    }).map(function (col) {
-      return col.columns;
-    }).flat();
-
-    if (nextCols.every(function (col) {
-      return !(col != null && col.columns);
-    })) {
-      lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
-    }
-
-    currentCols = nextCols;
-  }
-
-  return lowestLevelColumns.filter(function (col) {
-    return !col.columns;
-  });
-};
-var createGroup = function createGroup(table, column, currentFilterFns) {
-  var _column$columns;
-
-  return table.createGroup(_extends({}, column, {
-    columns: column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.map == null ? void 0 : _column$columns.map(function (col) {
-      return col.columns ? createGroup(table, col, currentFilterFns) : createDataColumn(table, col, currentFilterFns);
-    })
-  }));
-};
-var createDataColumn = function createDataColumn(table, column, currentFilterFns) {
-  return (// @ts-ignore
-    table.createDataColumn(column.id, _extends({
-      filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : defaultFilterFNs[currentFilterFns[column.id]]
-    }, column))
-  );
-};
-var createDisplayColumn = function createDisplayColumn(table, column) {
-  return table.createDisplayColumn(column);
-};
-
 var MRT_TableRoot = function MRT_TableRoot(props) {
   var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4;
 
@@ -3164,7 +3169,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     var _props$initialState, _initState$columnOrde;
 
     var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
-    initState.columnOrder = ((_initState$columnOrde = initState == null ? void 0 : initState.columnOrder) != null ? _initState$columnOrde : props.enableColumnOrdering) ? [showActionColumn && 'mrt-row-actions', showExpandColumn && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
+    initState.columnOrder = ((_initState$columnOrde = initState == null ? void 0 : initState.columnOrder) != null ? _initState$columnOrde : props.enableColumnOrdering || props.enableGrouping) ? [showActionColumn && 'mrt-row-actions', showExpandColumn && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       return c.id;
     })).filter(Boolean) : [];
 
@@ -3232,22 +3237,24 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       setCurrentGlobalFilterFn = _useState9[1];
 
   var table = useMemo(function () {
-    return createTable().setOptions({
-      //@ts-ignore
-      filterFns: defaultFilterFNs,
-      getCoreRowModel: getCoreRowModel(),
-      getExpandedRowModel: getExpandedRowModel(),
-      getFacetedRowModel: getFacetedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getGroupedRowModel: getGroupedRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getSubRows: function getSubRows(row) {
-        return row == null ? void 0 : row.subRows;
-      },
-      idPrefix: idPrefix,
-      initialState: initialState
-    });
+    return (// @ts-ignore
+      createTable().setOptions({
+        //@ts-ignore
+        filterFns: defaultFilterFNs,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getSubRows: function getSubRows(row) {
+          return row == null ? void 0 : row.subRows;
+        },
+        idPrefix: idPrefix,
+        initialState: initialState
+      })
+    );
   }, []);
   var displayColumns = useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
@@ -3262,6 +3269,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
       id: 'mrt-row-actions',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
     }), showExpandColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref4) {
@@ -3278,6 +3287,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.expand,
       id: 'mrt-expand',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     }), props.enableRowSelection && createDisplayColumn(table, {
       Cell: function Cell(_ref5) {
@@ -3295,6 +3306,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.select,
       id: 'mrt-select',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     }), props.enableRowNumbers && createDisplayColumn(table, {
       Cell: function Cell(_ref6) {
@@ -3308,6 +3321,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumbers,
       id: 'mrt-row-numbers',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 50
     })].filter(Boolean);
   }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);