material-react-table 0.7.5 → 0.7.6

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

@@ -28,7 +28,7 @@ import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { createTable, useTableInstance, getColumnFilteredRowModelSync, getCoreRowModelSync, getExpandedRowModel, getGlobalFilteredRowModelSync, getGroupedRowModelSync, getPaginationRowModel, getSortedRowModelSync, functionalUpdate } from '@tanstack/react-table';
-import { IconButton, Menu, MenuItem, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, Tooltip, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
+import { IconButton, Menu, MenuItem, Box, Tooltip, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { matchSorter } from 'match-sorter';
 
 function _extends() {
@@ -122,6 +122,7 @@ var MRT_DefaultLocalization_EN = {
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unpinAll: 'Unpin all',
   unsorted: 'Unsorted'
 };
 
@@ -510,6 +511,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.createElement(Box, {
+    sx: {
+      mr: '8px'
+    }
+  }, React.createElement(Tooltip, {
+    arrow: true,
+    title: pinned === 'left' ? localization.unpin : localization.pinToLeft
+  }, React.createElement(IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn(pinned === 'left' ? false : 'left');
+    },
+    size: "small"
+  }, React.createElement(PushPinIcon, {
+    style: {
+      transform: pinned === 'left' ? 'rotate(0)' : 'rotate(90deg)'
+    }
+  }))), React.createElement(Tooltip, {
+    arrow: true,
+    title: pinned === 'right' ? localization.unpin : localization.pinToRight
+  }, React.createElement(IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn(pinned === 'right' ? false : 'right');
+    },
+    size: "small"
+  }, React.createElement(PushPinIcon, {
+    style: {
+      transform: pinned === 'right' ? 'rotate(0)' : 'rotate(-90deg)'
+    }
+  }))));
+};
+
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
@@ -517,7 +569,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;
@@ -545,10 +599,17 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
-    sx: _extends({}, commonMenuItemStyles$1, {
-      pl: (column.depth + 0.5) * 2 + "rem"
-    })
-  }, React.createElement(FormControlLabel, {
+    sx: {
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      my: 0,
+      pl: (column.depth + 0.5) * 2 + "rem",
+      py: '6px'
+    }
+  }, !isSubMenu && enablePinning && React.createElement(MRT_ColumnPinningButtons, {
+    column: column,
+    tableInstance: tableInstance
+  }), React.createElement(FormControlLabel, {
     componentsProps: {
       typography: {
         sx: {
@@ -585,7 +646,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;
@@ -609,9 +672,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()]);
@@ -634,7 +697,12 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }, !isSubMenu && React.createElement(Button, {
     disabled: !getIsSomeColumnsVisible(),
     onClick: hideAllColumns
-  }, localization.hideAll), React.createElement(Button, {
+  }, localization.hideAll), !isSubMenu && enablePinning && React.createElement(Button, {
+    disabled: !getIsSomeColumnsPinned(),
+    onClick: function onClick() {
+      return tableInstance.setColumnPinning({});
+    }
+  }, localization.unpinAll), React.createElement(Button, {
     disabled: getIsAllColumnsVisible(),
     onClick: function onClick() {
       return toggleAllColumnsVisible(true);
@@ -647,11 +715,13 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       tableInstance: tableInstance
     });
   }), React.createElement(Divider, null), allDataColumns.map(function (column, index) {
-    return React.createElement(MRT_ShowHideColumnsMenuItems, {
+    return column ? React.createElement(MRT_ShowHideColumnsMenuItems, {
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
       tableInstance: tableInstance
+    }) : React.createElement(Divider, {
+      key: index + "-divider"
     });
   }));
 };
@@ -2653,10 +2723,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;
@@ -2692,7 +2762,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,
@@ -2703,8 +2772,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 = useState(0),
       totalToolbarHeight = _useState[0],
@@ -2720,6 +2788,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.createElement(TableContainer, Object.assign({}, tableContainerProps, {
     sx: _extends({
       maxWidth: '100%',
@@ -2729,19 +2799,17 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     style: {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
-  }), enablePinning && getIsSomeColumnsPinned() ? React.createElement(Box, {
+  }), enablePinning && isSomeColumnsPinnedLeft || isSomeColumnsPinnedRight ? React.createElement(Box, {
     sx: {
       display: 'grid',
       gridTemplateColumns: getLeftTableWidth() + "fr " + getCenterTableWidth() + "fr " + getRightTableWidth() + "fr"
     }
   }, React.createElement(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.createElement(MRT_Table, {
@@ -2750,7 +2818,8 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
   })), React.createElement(Box, {
     sx: function sx(theme) {
       return commonBoxStyles({
-        theme: theme
+        theme: theme,
+        visible: !!tableInstance.getCenterFlatHeaders().length
       });
     }
   }, React.createElement(MRT_Table, {
@@ -2758,12 +2827,10 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     tableInstance: tableInstance
   })), React.createElement(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.createElement(MRT_Table, {