@bigbinary/neetoui 8.2.14 → 8.2.15

package/dist/cjs/Table.js

@@ -17,12 +17,12 @@ var reactRouterDom = require('react-router-dom');
 var constants = require('./constants.js');
 require('@bigbinary/neeto-hotkeys');
 require('./overlayManager.js');
-var index = require('./index-0f5141e0.js');
+var index = require('./index-13162f47.js');
 var useQueryParams = require('./useQueryParams-a8ee2f76.js');
 var Button = require('./Button.js');
 var Callout = require('./Callout.js');
 var Typography = require('./Typography.js');
-var HeaderCellMenu = require('./HeaderCellMenu-3deb613f.js');
+var useRestoreScrollPosition = require('./useRestoreScrollPosition-dd1bbd92.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var reactResizable = require('react-resizable');
 var Spinner = require('./Spinner.js');
@@ -41,13 +41,13 @@ require('dayjs/plugin/utc');
 require('dayjs/plugin/weekday');
 require('dayjs/plugin/weekOfYear');
 require('qs');
-require('./en-80d0fbff.js');
+require('./en-2db2c836.js');
 require('./Tooltip.js');
 require('@tippyjs/react');
 require('tippy.js');
-require('zustand');
 require('./Dropdown.js');
 require('./Popover.js');
+require('zustand');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -101,6 +101,37 @@ var SelectAllRowsCallout = function SelectAllRowsCallout(_ref) {
   })));
 };
 
+var getStorageValue = function getStorageValue(key, defaultValue) {
+  try {
+    var storedValue = localStorage.getItem(key);
+    return storedValue ? JSON.parse(storedValue) : defaultValue;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    return defaultValue;
+  }
+};
+var useLocalStorage = function useLocalStorage(key, defaultValue) {
+  var _useState = React.useState(function () {
+      return getStorageValue(key, defaultValue);
+    }),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    storedValue = _useState2[0],
+    setStoredValue = _useState2[1];
+  var setValue = function setValue(value) {
+    return setStoredValue(function (prevStoredValue) {
+      var newValue = typeof value === "function" ? value(prevStoredValue) : value;
+      if (ramda.isNil(newValue)) {
+        index.removeFromLocalStorage(key);
+      } else {
+        index.setToLocalStorage(key, newValue);
+      }
+      return newValue;
+    });
+  };
+  return [storedValue, setValue];
+};
+
 var useReorderColumns = function useReorderColumns(_ref) {
   var isEnabled = _ref.isEnabled,
     columns = _ref.columns,
@@ -139,12 +170,12 @@ var useReorderColumns = function useReorderColumns(_ref) {
 
 var SortIcon = function SortIcon(_ref) {
   var sortOrder = _ref.sortOrder;
-  if (sortOrder === HeaderCellMenu.TABLE_SORT_ORDERS.asc || sortOrder === HeaderCellMenu.URL_SORT_ORDERS.ascend) {
+  if (sortOrder === useRestoreScrollPosition.TABLE_SORT_ORDERS.asc || sortOrder === useRestoreScrollPosition.URL_SORT_ORDERS.ascend) {
     return /*#__PURE__*/React__default["default"].createElement(neetoIcons.UpArrow, {
       size: 14
     });
   }
-  if (sortOrder === HeaderCellMenu.TABLE_SORT_ORDERS.desc || sortOrder === HeaderCellMenu.URL_SORT_ORDERS.descend) {
+  if (sortOrder === useRestoreScrollPosition.TABLE_SORT_ORDERS.desc || sortOrder === useRestoreScrollPosition.URL_SORT_ORDERS.descend) {
     return /*#__PURE__*/React__default["default"].createElement(neetoIcons.DownArrow, {
       size: 14
     });
@@ -152,10 +183,199 @@ var SortIcon = function SortIcon(_ref) {
   return null;
 };
 
+var _excluded$4 = ["children", "isSortable", "isAddEnabled", "sortedInfo", "onSort", "isHidable", "isDeletable", "isFixedColumn", "onColumnHide", "onAddColumn", "onColumnDelete", "onColumnFreeze", "onMoreActionClick", "column", "moreActions"];
+var CellContent = function CellContent(_ref) {
+  var children = _ref.children,
+    isSortable = _ref.isSortable,
+    isAddEnabled = _ref.isAddEnabled,
+    sortedInfo = _ref.sortedInfo,
+    onSort = _ref.onSort,
+    _ref$isHidable = _ref.isHidable,
+    isHidable = _ref$isHidable === void 0 ? true : _ref$isHidable,
+    _ref$isDeletable = _ref.isDeletable,
+    isDeletable = _ref$isDeletable === void 0 ? false : _ref$isDeletable,
+    isFixedColumn = _ref.isFixedColumn,
+    onColumnHide = _ref.onColumnHide,
+    onAddColumn = _ref.onAddColumn,
+    onColumnDelete = _ref.onColumnDelete,
+    onColumnFreeze = _ref.onColumnFreeze,
+    onMoreActionClick = _ref.onMoreActionClick,
+    column = _ref.column,
+    _ref$moreActions = _ref.moreActions,
+    moreActions = _ref$moreActions === void 0 ? [] : _ref$moreActions,
+    headerProps = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+  var isColumnHidable = isHidable && neetoCist.isPresent(onColumnHide);
+  var isColumnDeletable = isDeletable && neetoCist.isPresent(onColumnDelete);
+  var hasMoreActions = !ramda.isEmpty(moreActions) && neetoCist.isPresent(onMoreActionClick);
+  var hasMoreMenu = neetoCist.isPresent(column);
+  return /*#__PURE__*/React__default["default"].createElement("th", _extends__default["default"]({}, headerProps, {
+    title: "",
+    onClick: isSortable ? neetoCist.noop : headerProps.onClick
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center justify-between"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "min-w-0 flex-grow"
+  }, children), hasMoreMenu && /*#__PURE__*/React__default["default"].createElement(useRestoreScrollPosition.HeaderCellMenu, {
+    column: column,
+    hasMoreActions: hasMoreActions,
+    isAddEnabled: isAddEnabled,
+    isColumnDeletable: isColumnDeletable,
+    isFixedColumn: isFixedColumn,
+    isSortable: isSortable,
+    moreActions: moreActions,
+    onAddColumn: onAddColumn,
+    onColumnDelete: onColumnDelete,
+    onColumnFreeze: onColumnFreeze,
+    onColumnHide: onColumnHide,
+    onMoreActionClick: onMoreActionClick,
+    onSort: onSort,
+    sortedInfo: sortedInfo,
+    columnTitle: headerProps.title,
+    isHidable: isColumnHidable
+  })));
+};
+
+var _excluded$3 = ["onResize", "width", "onResizeStop", "className"];
+var HeaderCell = function HeaderCell(props) {
+  var onResize = props.onResize,
+    width = props.width,
+    onResizeStop = props.onResizeStop,
+    className = props.className,
+    restProps = _objectWithoutProperties__default["default"](props, _excluded$3);
+  if (!width) {
+    return /*#__PURE__*/React__default["default"].createElement(CellContent, _extends__default["default"]({}, restProps, {
+      className: classnames__default["default"](className, "drag-handler")
+    }));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(reactResizable.Resizable, {
+    onResize: onResize,
+    onResizeStop: onResizeStop,
+    width: width,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
+    height: 0,
+    handle: /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "react-resizable-handle",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }),
+    onResizeStart: function onResizeStart(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(CellContent, _extends__default["default"]({}, restProps, {
+    className: classnames__default["default"](className, "drag-handler")
+  })));
+};
+
+var _excluded$2 = ["onResize", "width", "onResizeStop"];
+var ResizableHeaderCell = function ResizableHeaderCell(props) {
+  var onResize = props.onResize,
+    width = props.width,
+    onResizeStop = props.onResizeStop,
+    restProps = _objectWithoutProperties__default["default"](props, _excluded$2);
+  if (!width) {
+    return /*#__PURE__*/React__default["default"].createElement(CellContent, restProps);
+  }
+  return /*#__PURE__*/React__default["default"].createElement(reactResizable.Resizable, {
+    onResize: onResize,
+    onResizeStop: onResizeStop,
+    width: width,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
+    height: 0,
+    handle: /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "react-resizable-handle",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }),
+    onResizeStart: function onResizeStart(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(CellContent, restProps));
+};
+
+var _excluded$1 = ["className"];
+var ReorderableHeaderCell = function ReorderableHeaderCell(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+  return /*#__PURE__*/React__default["default"].createElement(CellContent, _extends__default["default"]({}, props, {
+    className: classnames__default["default"](className, "drag-handler")
+  }));
+};
+
+var convertLocationPathnameToId = function convertLocationPathnameToId() {
+  var pathname = decodeURIComponent(window.location.pathname).replace(/^\//, "");
+  var hash = 0;
+  for (var i = 0; i < pathname.length; i++) {
+    var _char = pathname.charCodeAt(i);
+    hash = (hash << 5) - hash + _char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  return Math.abs(hash).toString(16).toUpperCase();
+};
+var getHeaderCell = function getHeaderCell(_ref) {
+  var enableColumnResize = _ref.enableColumnResize,
+    enableColumnReorder = _ref.enableColumnReorder;
+  if (enableColumnReorder && enableColumnResize) return {
+    cell: HeaderCell
+  };
+  if (enableColumnResize) return {
+    cell: ResizableHeaderCell
+  };
+  if (enableColumnReorder) return {
+    cell: ReorderableHeaderCell
+  };
+  return {
+    cell: CellContent
+  };
+};
+var isIncludedIn = function isIncludedIn(array1, array2) {
+  return ramda.all(ramda.includes(ramda.__, array1), array2);
+};
+var getSelectAllRowsCalloutHeight = function getSelectAllRowsCalloutHeight() {
+  return window.innerWidth < 768 ? useRestoreScrollPosition.SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT : useRestoreScrollPosition.SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT;
+};
+var sortFrozenColumns = function sortFrozenColumns(columnData) {
+  var originalIndices = new Map(columnData.map(function (col, index) {
+    return [col.dataIndex, index];
+  }));
+  return function (a, b) {
+    var aFixed = neetoCist.isPresent(a.fixed);
+    var bFixed = neetoCist.isPresent(b.fixed);
+    var aIndex = originalIndices.get(a.dataIndex);
+    var bIndex = originalIndices.get(b.dataIndex);
+    if (aFixed !== bFixed) return aFixed ? -1 : 1;
+    return aIndex - bIndex;
+  };
+};
+var getFixedColumns = function getFixedColumns(columnData) {
+  return ramda.pipe(ramda.filter(function (_ref2) {
+    var fixed = _ref2.fixed;
+    return neetoCist.isPresent(fixed);
+  }), ramda.pluck("dataIndex"))(columnData);
+};
+var getColumnSortOrder = function getColumnSortOrder(col, sortedInfo) {
+  return sortedInfo.field === col.dataIndex || sortedInfo.field === col.key ? sortedInfo.order : null;
+};
+var getColumFixedValue = function getColumFixedValue(col, frozenColumns) {
+  return frozenColumns.indexOf(col.dataIndex) !== -1 ? useRestoreScrollPosition.COLUMN_FIXED_VALUES.LEFT : null;
+};
+var getFrozenColumnsLocalStorageKey = function getFrozenColumnsLocalStorageKey(localStorageKeyPrefix) {
+  var prefix = neetoCist.isPresent(localStorageKeyPrefix) ? localStorageKeyPrefix : convertLocationPathnameToId();
+  return "NEETOUI-".concat(prefix, "-FIXED_COLUMNS");
+};
+
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useResizableColumns = function useResizableColumns(_ref) {
   var columns = _ref.columns,
+    columnData = _ref.columnData,
+    frozenColumns = _ref.frozenColumns,
     setColumns = _ref.setColumns,
     isEnabled = _ref.isEnabled,
     isAddEnabled = _ref.isAddEnabled,
@@ -165,6 +385,7 @@ var useResizableColumns = function useResizableColumns(_ref) {
     handleSort = _ref.handleSort,
     sortedInfo = _ref.sortedInfo,
     onColumnHide = _ref.onColumnHide,
+    onColumnFreeze = _ref.onColumnFreeze,
     onMoreActionClick = _ref.onMoreActionClick,
     tableOnChangeProps = _ref.tableOnChangeProps;
   var handleResize = function handleResize(index) {
@@ -179,6 +400,7 @@ var useResizableColumns = function useResizableColumns(_ref) {
   };
   var computedColumnsData = React.useMemo(function () {
     return columns.map(function (col, index) {
+      var fixed = getColumFixedValue(col, frozenColumns);
       var modifiedColumn = _objectSpread$2(_objectSpread$2({}, col), {}, {
         onHeaderCell: function onHeaderCell(column) {
           return {
@@ -191,11 +413,13 @@ var useResizableColumns = function useResizableColumns(_ref) {
             onSort: handleSort,
             sortedInfo: sortedInfo,
             onColumnHide: onColumnHide,
+            onColumnFreeze: onColumnFreeze,
             onMoreActionClick: onMoreActionClick,
-            isAddEnabled: isAddEnabled && !col.fixed,
+            isAddEnabled: isAddEnabled && !fixed,
             onAddColumn: function onAddColumn(positionOffset) {
               return onColumnAdd(index + positionOffset);
             },
+            isFixedColumn: !!fixed,
             onColumnDelete: onColumnDelete,
             isHidable: col.isHidable,
             isDeletable: col.isDeletable,
@@ -204,14 +428,13 @@ var useResizableColumns = function useResizableColumns(_ref) {
           };
         },
         sortIcon: SortIcon,
-        sortOrder: sortedInfo.field === col.dataIndex || sortedInfo.field === col.key ? sortedInfo.order : null
+        sortOrder: getColumnSortOrder(col, sortedInfo),
+        fixed: fixed
       });
-      if (!ramda.has("ellipsis", col)) {
-        modifiedColumn.ellipsis = true;
-      }
+      if (!ramda.has("ellipsis", col)) modifiedColumn.ellipsis = true;
       return modifiedColumn;
-    });
-  }, [columns, sortedInfo, tableOnChangeProps]);
+    }).sort(sortFrozenColumns(columnData));
+  }, [columns, sortedInfo, tableOnChangeProps, onColumnFreeze, frozenColumns, columnData]);
   return {
     columns: computedColumnsData
   };
@@ -221,6 +444,7 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useColumns = function useColumns(_ref) {
   var columns = _ref.columns,
+    columnData = _ref.columnData,
     setColumns = _ref.setColumns,
     isResizeEnabled = _ref.isResizeEnabled,
     isReorderEnabled = _ref.isReorderEnabled,
@@ -236,7 +460,17 @@ var useColumns = function useColumns(_ref) {
     onTableChange = _ref.onTableChange,
     tableOnChangeProps = _ref.tableOnChangeProps,
     handleTableSortChange = _ref.handleTableSortChange,
-    isDefaultPageChangeHandler = _ref.isDefaultPageChangeHandler;
+    isDefaultPageChangeHandler = _ref.isDefaultPageChangeHandler,
+    localStorageKeyPrefix = _ref.localStorageKeyPrefix;
+  var _useLocalStorage = useLocalStorage(getFrozenColumnsLocalStorageKey(localStorageKeyPrefix), getFixedColumns(columnData)),
+    _useLocalStorage2 = _slicedToArray__default["default"](_useLocalStorage, 2),
+    frozenColumns = _useLocalStorage2[0],
+    setFrozenColumns = _useLocalStorage2[1];
+  var onColumnFreeze = React.useCallback(function (isFixedColumn, _ref2) {
+    var dataIndex = _ref2.dataIndex;
+    var updatedColumns = isFixedColumn ? ramda.without([dataIndex], frozenColumns) : ramda.append(dataIndex, frozenColumns);
+    setFrozenColumns(updatedColumns);
+  }, [frozenColumns, setFrozenColumns]);
   var _useReorderColumns = useReorderColumns({
       isEnabled: isReorderEnabled,
       columns: columns,
@@ -262,6 +496,8 @@ var useColumns = function useColumns(_ref) {
   };
   var _useResizableColumns = useResizableColumns({
       columns: columns,
+      columnData: columnData,
+      frozenColumns: frozenColumns,
       setColumns: setColumns,
       isEnabled: isResizeEnabled,
       isAddEnabled: isAddEnabled,
@@ -272,7 +508,8 @@ var useColumns = function useColumns(_ref) {
       sortedInfo: sortedInfo,
       onColumnHide: onColumnHide,
       onMoreActionClick: onMoreActionClick,
-      tableOnChangeProps: tableOnChangeProps
+      tableOnChangeProps: tableOnChangeProps,
+      onColumnFreeze: onColumnFreeze
     }),
     computedColumnsData = _useResizableColumns.columns;
   return {
@@ -283,9 +520,9 @@ var useColumns = function useColumns(_ref) {
 
 var getSortInfoFromQueryParams = function getSortInfoFromQueryParams(queryParams) {
   var sortedInfo = {};
-  if (neetoCist.isPresent(queryParams.sort_by) && neetoCist.isPresent(queryParams.order_by) && neetoCist.isPresent(HeaderCellMenu.TABLE_SORT_ORDERS[queryParams.order_by])) {
+  if (neetoCist.isPresent(queryParams.sort_by) && neetoCist.isPresent(queryParams.order_by) && neetoCist.isPresent(useRestoreScrollPosition.TABLE_SORT_ORDERS[queryParams.order_by])) {
     sortedInfo.field = neetoCist.snakeToCamelCase(queryParams.sort_by);
-    sortedInfo.order = HeaderCellMenu.TABLE_SORT_ORDERS[queryParams.order_by];
+    sortedInfo.order = useRestoreScrollPosition.TABLE_SORT_ORDERS[queryParams.order_by];
   }
   return sortedInfo;
 };
@@ -304,7 +541,7 @@ var useTableSort = function useTableSort() {
   var handleTableChange = function handleTableChange(pagination, sorter) {
     var params = {
       sort_by: sorter.order ? neetoCist.camelToSnakeCase(sorter.field) : undefined,
-      order_by: HeaderCellMenu.URL_SORT_ORDERS[sorter.order],
+      order_by: useRestoreScrollPosition.URL_SORT_ORDERS[sorter.order],
       page: pagination.current
     };
     var pathname = window.location.pathname;
@@ -317,150 +554,7 @@ var useTableSort = function useTableSort() {
   };
 };
 
-var _excluded$4 = ["children", "isSortable", "isAddEnabled", "sortedInfo", "onSort", "isHidable", "isDeletable", "onColumnHide", "onAddColumn", "onColumnDelete", "onMoreActionClick", "column", "moreActions"];
-var CellContent = function CellContent(_ref) {
-  var children = _ref.children,
-    isSortable = _ref.isSortable,
-    isAddEnabled = _ref.isAddEnabled,
-    sortedInfo = _ref.sortedInfo,
-    onSort = _ref.onSort,
-    _ref$isHidable = _ref.isHidable,
-    isHidable = _ref$isHidable === void 0 ? true : _ref$isHidable,
-    _ref$isDeletable = _ref.isDeletable,
-    isDeletable = _ref$isDeletable === void 0 ? false : _ref$isDeletable,
-    onColumnHide = _ref.onColumnHide,
-    onAddColumn = _ref.onAddColumn,
-    onColumnDelete = _ref.onColumnDelete,
-    onMoreActionClick = _ref.onMoreActionClick,
-    column = _ref.column,
-    _ref$moreActions = _ref.moreActions,
-    moreActions = _ref$moreActions === void 0 ? [] : _ref$moreActions,
-    headerProps = _objectWithoutProperties__default["default"](_ref, _excluded$4);
-  var isColumnHidable = isHidable && neetoCist.isPresent(onColumnHide);
-  var isColumnDeletable = isDeletable && neetoCist.isPresent(onColumnDelete);
-  var hasMoreActions = !ramda.isEmpty(moreActions) && neetoCist.isPresent(onMoreActionClick);
-  var hasMoreMenu = isSortable || neetoCist.isPresent(column === null || column === void 0 ? void 0 : column.description) || isColumnHidable || isAddEnabled || hasMoreActions;
-  return /*#__PURE__*/React__default["default"].createElement("th", _extends__default["default"]({}, headerProps, {
-    title: "",
-    onClick: isSortable ? neetoCist.noop : headerProps.onClick
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "min-w-0 flex-grow"
-  }, children), hasMoreMenu && /*#__PURE__*/React__default["default"].createElement(HeaderCellMenu.HeaderCellMenu, {
-    column: column,
-    hasMoreActions: hasMoreActions,
-    isAddEnabled: isAddEnabled,
-    isColumnDeletable: isColumnDeletable,
-    isSortable: isSortable,
-    moreActions: moreActions,
-    onAddColumn: onAddColumn,
-    onColumnDelete: onColumnDelete,
-    onColumnHide: onColumnHide,
-    onMoreActionClick: onMoreActionClick,
-    onSort: onSort,
-    sortedInfo: sortedInfo,
-    columnTitle: headerProps.title,
-    isHidable: isColumnHidable
-  })));
-};
-
-var _excluded$3 = ["onResize", "width", "onResizeStop", "className"];
-var HeaderCell = function HeaderCell(props) {
-  var onResize = props.onResize,
-    width = props.width,
-    onResizeStop = props.onResizeStop,
-    className = props.className,
-    restProps = _objectWithoutProperties__default["default"](props, _excluded$3);
-  if (!width) {
-    return /*#__PURE__*/React__default["default"].createElement(CellContent, _extends__default["default"]({}, restProps, {
-      className: classnames__default["default"](className, "drag-handler")
-    }));
-  }
-  return /*#__PURE__*/React__default["default"].createElement(reactResizable.Resizable, {
-    onResize: onResize,
-    onResizeStop: onResizeStop,
-    width: width,
-    draggableOpts: {
-      enableUserSelectHack: false
-    },
-    height: 0,
-    handle: /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "react-resizable-handle",
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }),
-    onResizeStart: function onResizeStart(e) {
-      e.preventDefault();
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(CellContent, _extends__default["default"]({}, restProps, {
-    className: classnames__default["default"](className, "drag-handler")
-  })));
-};
-
-var _excluded$2 = ["onResize", "width", "onResizeStop"];
-var ResizableHeaderCell = function ResizableHeaderCell(props) {
-  var onResize = props.onResize,
-    width = props.width,
-    onResizeStop = props.onResizeStop,
-    restProps = _objectWithoutProperties__default["default"](props, _excluded$2);
-  if (!width) {
-    return /*#__PURE__*/React__default["default"].createElement(CellContent, restProps);
-  }
-  return /*#__PURE__*/React__default["default"].createElement(reactResizable.Resizable, {
-    onResize: onResize,
-    onResizeStop: onResizeStop,
-    width: width,
-    draggableOpts: {
-      enableUserSelectHack: false
-    },
-    height: 0,
-    handle: /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "react-resizable-handle",
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }),
-    onResizeStart: function onResizeStart(e) {
-      e.preventDefault();
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(CellContent, restProps));
-};
-
-var _excluded$1 = ["className"];
-var ReorderableHeaderCell = function ReorderableHeaderCell(_ref) {
-  var className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
-  return /*#__PURE__*/React__default["default"].createElement(CellContent, _extends__default["default"]({}, props, {
-    className: classnames__default["default"](className, "drag-handler")
-  }));
-};
-
-var getHeaderCell = function getHeaderCell(_ref) {
-  var enableColumnResize = _ref.enableColumnResize,
-    enableColumnReorder = _ref.enableColumnReorder;
-  if (enableColumnReorder && enableColumnResize) return {
-    cell: HeaderCell
-  };
-  if (enableColumnResize) return {
-    cell: ResizableHeaderCell
-  };
-  if (enableColumnReorder) return {
-    cell: ReorderableHeaderCell
-  };
-  return {
-    cell: CellContent
-  };
-};
-var isIncludedIn = function isIncludedIn(array1, array2) {
-  return ramda.all(ramda.includes(ramda.__, array1), array2);
-};
-var getSelectAllRowsCalloutHeight = function getSelectAllRowsCalloutHeight() {
-  return window.innerWidth < 768 ? HeaderCellMenu.SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT : HeaderCellMenu.SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT;
-};
-
-var _excluded = ["allowRowClick", "enableColumnResize", "enableColumnReorder", "enableAddColumn", "className", "columnData", "currentPageNumber", "defaultPageSize", "handlePageChange", "loading", "onRowClick", "onRowSelect", "rowData", "totalCount", "selectedRowKeys", "fixedHeight", "paginationProps", "rowKey", "scroll", "rowSelection", "shouldDynamicallyRenderRowSize", "bordered", "onColumnUpdate", "components", "onColumnHide", "onColumnAdd", "onColumnDelete", "onChange", "onMoreActionClick", "bulkSelectAllRowsProps"];
+var _excluded = ["allowRowClick", "enableColumnResize", "enableColumnReorder", "enableAddColumn", "className", "columnData", "currentPageNumber", "defaultPageSize", "handlePageChange", "loading", "onRowClick", "onRowSelect", "rowData", "totalCount", "selectedRowKeys", "fixedHeight", "paginationProps", "rowKey", "scroll", "rowSelection", "shouldDynamicallyRenderRowSize", "bordered", "onColumnUpdate", "components", "onColumnHide", "onColumnAdd", "onColumnDelete", "onChange", "onMoreActionClick", "bulkSelectAllRowsProps", "localStorageKeyPrefix"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TABLE_PAGINATION_HEIGHT = 64;
@@ -518,6 +612,7 @@ var Table = function Table(_ref) {
     onChange = _ref.onChange,
     onMoreActionClick = _ref.onMoreActionClick,
     bulkSelectAllRowsProps = _ref.bulkSelectAllRowsProps,
+    localStorageKeyPrefix = _ref.localStorageKeyPrefix,
     otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation(),
     i18n = _useTranslation.i18n;
@@ -563,7 +658,7 @@ var Table = function Table(_ref) {
       observer.disconnect();
     }
   }, [resizeObserver.current, fixedHeight]);
-  var _useRestoreScrollPosi = HeaderCellMenu.useRestoreScrollPosition({
+  var _useRestoreScrollPosi = useRestoreScrollPosition.useRestoreScrollPosition({
       tableRef: tableRef,
       scrollRef: scrollRef,
       loading: loading
@@ -579,6 +674,7 @@ var Table = function Table(_ref) {
       isAddEnabled: enableAddColumn,
       onTableChange: onChange,
       columns: columns,
+      columnData: columnData,
       setColumns: setColumns,
       onColumnUpdate: onColumnUpdate,
       rowSelection: rowSelection,
@@ -590,7 +686,8 @@ var Table = function Table(_ref) {
       onColumnDelete: onColumnDelete,
       tableOnChangeProps: tableOnChangeProps,
       handleTableSortChange: handleTableSortChange,
-      isDefaultPageChangeHandler: isDefaultPageChangeHandler
+      isDefaultPageChangeHandler: isDefaultPageChangeHandler,
+      localStorageKeyPrefix: localStorageKeyPrefix
     }),
     dragProps = _useColumns.dragProps,
     curatedColumnsData = _useColumns.columns;
@@ -599,7 +696,7 @@ var Table = function Table(_ref) {
     var _queryParams$sort_by;
     return neetoCist.modifyBy({
       dataIndex: neetoCist.snakeToCamelCase((_queryParams$sort_by = queryParams.sort_by) !== null && _queryParams$sort_by !== void 0 ? _queryParams$sort_by : "")
-    }, ramda.assoc("sortOrder", HeaderCellMenu.TABLE_SORT_ORDERS[queryParams.order_by]), columnData);
+    }, ramda.assoc("sortOrder", useRestoreScrollPosition.TABLE_SORT_ORDERS[queryParams.order_by]), columnData);
   };
   var sortedColumns = isDefaultPageChangeHandler ? setSortFromURL(curatedColumnsData) : curatedColumnsData;
   var locale = {