material-react-table 0.7.5 → 0.7.6

package/dist/buttons/MRT_ColumnPinningButtons.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import type { MRT_Column, MRT_TableInstance } from '..';
+interface Props {
+    column: MRT_Column;
+    tableInstance: MRT_TableInstance;
+}
+export declare const MRT_ColumnPinningButtons: FC<Props>;
+export {};

package/dist/localization.d.ts

@@ -56,6 +56,7 @@ export interface MRT_Localization {
     toggleSelectRow: string;
     ungroupByColumn: string;
     unpin: string;
+    unpinAll: string;
     unsorted: string;
 }
 export declare const MRT_DefaultLocalization_EN: MRT_Localization;

package/dist/material-react-table.cjs.development.js

@@ -129,6 +129,7 @@ var MRT_DefaultLocalization_EN = {
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unpinAll: 'Unpin all',
   unsorted: 'Unsorted'
 };
 
@@ -517,6 +518,57 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   }));
 };
 
+var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
+  var column = _ref.column,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      PushPinIcon = _tableInstance$option.icons.PushPinIcon,
+      localization = _tableInstance$option.localization;
+
+  var _getState = getState(),
+      columnOrder = _getState.columnOrder;
+
+  var handlePinColumn = function handlePinColumn(pinDirection) {
+    column.pin(pinDirection);
+
+    if (column.columnDefType === 'display') {
+      tableInstance.setColumnOrder([column.id].concat(columnOrder));
+    }
+  };
+
+  var pinned = column.getIsPinned();
+  return React__default.createElement(material.Box, {
+    sx: {
+      mr: '8px'
+    }
+  }, React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: pinned === 'left' ? localization.unpin : localization.pinToLeft
+  }, React__default.createElement(material.IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn(pinned === 'left' ? false : 'left');
+    },
+    size: "small"
+  }, React__default.createElement(PushPinIcon, {
+    style: {
+      transform: pinned === 'left' ? 'rotate(0)' : 'rotate(90deg)'
+    }
+  }))), React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: pinned === 'right' ? localization.unpin : localization.pinToRight
+  }, React__default.createElement(material.IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn(pinned === 'right' ? false : 'right');
+    },
+    size: "small"
+  }, React__default.createElement(PushPinIcon, {
+    style: {
+      transform: pinned === 'right' ? 'rotate(0)' : 'rotate(-90deg)'
+    }
+  }))));
+};
+
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
@@ -524,7 +576,9 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       isSubMenu = _ref.isSubMenu,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
-      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
+      _tableInstance$option = tableInstance.options,
+      onToggleColumnVisibility = _tableInstance$option.onToggleColumnVisibility,
+      enablePinning = _tableInstance$option.enablePinning;
 
   var _getState = getState(),
       columnVisibility = _getState.columnVisibility;
@@ -552,10 +606,17 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   };
 
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
-    sx: _extends({}, commonMenuItemStyles$1, {
-      pl: (column.depth + 0.5) * 2 + "rem"
-    })
-  }, React__default.createElement(material.FormControlLabel, {
+    sx: {
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      my: 0,
+      pl: (column.depth + 0.5) * 2 + "rem",
+      py: '6px'
+    }
+  }, !isSubMenu && enablePinning && React__default.createElement(MRT_ColumnPinningButtons, {
+    column: column,
+    tableInstance: tableInstance
+  }), React__default.createElement(material.FormControlLabel, {
     componentsProps: {
       typography: {
         sx: {
@@ -592,7 +653,9 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       getState = tableInstance.getState,
       toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
       getAllLeafColumns = tableInstance.getAllLeafColumns,
-      localization = tableInstance.options.localization;
+      _tableInstance$option = tableInstance.options,
+      localization = _tableInstance$option.localization,
+      enablePinning = _tableInstance$option.enablePinning;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -616,9 +679,9 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     });
     return getIsSomeColumnsPinned() ? [].concat(dataColumns.filter(function (c) {
       return c.getIsPinned() === 'left';
-    }), dataColumns.filter(function (c) {
+    }), [null], dataColumns.filter(function (c) {
       return c.getIsPinned() === false;
-    }), dataColumns.filter(function (c) {
+    }), [null], dataColumns.filter(function (c) {
       return c.getIsPinned() === 'right';
     })) : dataColumns;
   }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
@@ -641,7 +704,12 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }, !isSubMenu && React__default.createElement(material.Button, {
     disabled: !getIsSomeColumnsVisible(),
     onClick: hideAllColumns
-  }, localization.hideAll), React__default.createElement(material.Button, {
+  }, localization.hideAll), !isSubMenu && enablePinning && React__default.createElement(material.Button, {
+    disabled: !getIsSomeColumnsPinned(),
+    onClick: function onClick() {
+      return tableInstance.setColumnPinning({});
+    }
+  }, localization.unpinAll), React__default.createElement(material.Button, {
     disabled: getIsAllColumnsVisible(),
     onClick: function onClick() {
       return toggleAllColumnsVisible(true);
@@ -654,11 +722,13 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       tableInstance: tableInstance
     });
   }), React__default.createElement(material.Divider, null), allDataColumns.map(function (column, index) {
-    return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
+    return column ? React__default.createElement(MRT_ShowHideColumnsMenuItems, {
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
       tableInstance: tableInstance
+    }) : React__default.createElement(material.Divider, {
+      key: index + "-divider"
     });
   }));
 };
@@ -2660,10 +2730,10 @@ var MRT_Table = function MRT_Table(_ref) {
       tableInstance = _ref.tableInstance;
   var getTableProps = tableInstance.getTableProps,
       _tableInstance$option = tableInstance.options,
-      muiTableProps = _tableInstance$option.muiTableProps,
-      enableTableHead = _tableInstance$option.enableTableHead,
+      enableStickyHeader = _tableInstance$option.enableStickyHeader,
       enableTableFooter = _tableInstance$option.enableTableFooter,
-      enableStickyHeader = _tableInstance$option.enableStickyHeader;
+      enableTableHead = _tableInstance$option.enableTableHead,
+      muiTableProps = _tableInstance$option.muiTableProps;
   var mTableProps = muiTableProps instanceof Function ? muiTableProps({
     tableInstance: tableInstance
   }) : muiTableProps;
@@ -2699,7 +2769,6 @@ var commonBoxStyles = function commonBoxStyles(_ref) {
 var MRT_TableContainer = function MRT_TableContainer(_ref2) {
   var tableInstance = _ref2.tableInstance;
   var getCenterTableWidth = tableInstance.getCenterTableWidth,
-      getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
       getLeftTableWidth = tableInstance.getLeftTableWidth,
       getRightTableWidth = tableInstance.getRightTableWidth,
       getState = tableInstance.getState,
@@ -2710,8 +2779,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
       muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
 
   var _getState = getState(),
-      isFullScreen = _getState.isFullScreen,
-      columnPinning = _getState.columnPinning;
+      isFullScreen = _getState.isFullScreen;
 
   var _useState = React.useState(0),
       totalToolbarHeight = _useState[0],
@@ -2727,6 +2795,8 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + idPrefix + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
+  var isSomeColumnsPinnedLeft = !!tableInstance.getLeftFlatHeaders().length;
+  var isSomeColumnsPinnedRight = !!tableInstance.getRightFlatHeaders().length;
   return React__default.createElement(material.TableContainer, Object.assign({}, tableContainerProps, {
     sx: _extends({
       maxWidth: '100%',
@@ -2736,19 +2806,17 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     style: {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
-  }), enablePinning && getIsSomeColumnsPinned() ? React__default.createElement(material.Box, {
+  }), enablePinning && isSomeColumnsPinnedLeft || isSomeColumnsPinnedRight ? React__default.createElement(material.Box, {
     sx: {
       display: 'grid',
       gridTemplateColumns: getLeftTableWidth() + "fr " + getCenterTableWidth() + "fr " + getRightTableWidth() + "fr"
     }
   }, React__default.createElement(material.Box, {
     sx: function sx(theme) {
-      var _columnPinning$left;
-
       return commonBoxStyles({
         pinned: 'left',
         theme: theme,
-        visible: !!((_columnPinning$left = columnPinning.left) != null && _columnPinning$left.length)
+        visible: isSomeColumnsPinnedLeft
       });
     }
   }, React__default.createElement(MRT_Table, {
@@ -2757,7 +2825,8 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
   })), React__default.createElement(material.Box, {
     sx: function sx(theme) {
       return commonBoxStyles({
-        theme: theme
+        theme: theme,
+        visible: !!tableInstance.getCenterFlatHeaders().length
       });
     }
   }, React__default.createElement(MRT_Table, {
@@ -2765,12 +2834,10 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     tableInstance: tableInstance
   })), React__default.createElement(material.Box, {
     sx: function sx(theme) {
-      var _columnPinning$right;
-
       return commonBoxStyles({
         pinned: 'right',
         theme: theme,
-        visible: !!((_columnPinning$right = columnPinning.right) != null && _columnPinning$right.length)
+        visible: isSomeColumnsPinnedRight
       });
     }
   }, React__default.createElement(MRT_Table, {