@bigbinary/neetoui 8.2.15 → 8.3.0-beta1

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-13162f47.js');
+var index = require('./index-0f5141e0.js');
 var useQueryParams = require('./useQueryParams-a8ee2f76.js');
 var Button = require('./Button.js');
 var Callout = require('./Callout.js');
 var Typography = require('./Typography.js');
-var useRestoreScrollPosition = require('./useRestoreScrollPosition-dd1bbd92.js');
+var HeaderCellMenu = require('./HeaderCellMenu-ed9de3d6.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-2db2c836.js');
+require('./en-80d0fbff.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,37 +101,6 @@ 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,
@@ -170,12 +139,12 @@ var useReorderColumns = function useReorderColumns(_ref) {
 
 var SortIcon = function SortIcon(_ref) {
   var sortOrder = _ref.sortOrder;
-  if (sortOrder === useRestoreScrollPosition.TABLE_SORT_ORDERS.asc || sortOrder === useRestoreScrollPosition.URL_SORT_ORDERS.ascend) {
+  if (sortOrder === HeaderCellMenu.TABLE_SORT_ORDERS.asc || sortOrder === HeaderCellMenu.URL_SORT_ORDERS.ascend) {
     return /*#__PURE__*/React__default["default"].createElement(neetoIcons.UpArrow, {
       size: 14
     });
   }
-  if (sortOrder === useRestoreScrollPosition.TABLE_SORT_ORDERS.desc || sortOrder === useRestoreScrollPosition.URL_SORT_ORDERS.descend) {
+  if (sortOrder === HeaderCellMenu.TABLE_SORT_ORDERS.desc || sortOrder === HeaderCellMenu.URL_SORT_ORDERS.descend) {
     return /*#__PURE__*/React__default["default"].createElement(neetoIcons.DownArrow, {
       size: 14
     });
@@ -183,199 +152,10 @@ 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,
@@ -385,7 +165,6 @@ 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) {
@@ -400,7 +179,6 @@ 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 {
@@ -413,13 +191,11 @@ var useResizableColumns = function useResizableColumns(_ref) {
             onSort: handleSort,
             sortedInfo: sortedInfo,
             onColumnHide: onColumnHide,
-            onColumnFreeze: onColumnFreeze,
             onMoreActionClick: onMoreActionClick,
-            isAddEnabled: isAddEnabled && !fixed,
+            isAddEnabled: isAddEnabled && !col.fixed,
             onAddColumn: function onAddColumn(positionOffset) {
               return onColumnAdd(index + positionOffset);
             },
-            isFixedColumn: !!fixed,
             onColumnDelete: onColumnDelete,
             isHidable: col.isHidable,
             isDeletable: col.isDeletable,
@@ -428,13 +204,14 @@ var useResizableColumns = function useResizableColumns(_ref) {
           };
         },
         sortIcon: SortIcon,
-        sortOrder: getColumnSortOrder(col, sortedInfo),
-        fixed: fixed
+        sortOrder: sortedInfo.field === col.dataIndex || sortedInfo.field === col.key ? sortedInfo.order : null
       });
-      if (!ramda.has("ellipsis", col)) modifiedColumn.ellipsis = true;
+      if (!ramda.has("ellipsis", col)) {
+        modifiedColumn.ellipsis = true;
+      }
       return modifiedColumn;
-    }).sort(sortFrozenColumns(columnData));
-  }, [columns, sortedInfo, tableOnChangeProps, onColumnFreeze, frozenColumns, columnData]);
+    });
+  }, [columns, sortedInfo, tableOnChangeProps]);
   return {
     columns: computedColumnsData
   };
@@ -444,7 +221,6 @@ 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,
@@ -460,17 +236,7 @@ var useColumns = function useColumns(_ref) {
     onTableChange = _ref.onTableChange,
     tableOnChangeProps = _ref.tableOnChangeProps,
     handleTableSortChange = _ref.handleTableSortChange,
-    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]);
+    isDefaultPageChangeHandler = _ref.isDefaultPageChangeHandler;
   var _useReorderColumns = useReorderColumns({
       isEnabled: isReorderEnabled,
       columns: columns,
@@ -496,8 +262,6 @@ var useColumns = function useColumns(_ref) {
   };
   var _useResizableColumns = useResizableColumns({
       columns: columns,
-      columnData: columnData,
-      frozenColumns: frozenColumns,
       setColumns: setColumns,
       isEnabled: isResizeEnabled,
       isAddEnabled: isAddEnabled,
@@ -508,8 +272,7 @@ var useColumns = function useColumns(_ref) {
       sortedInfo: sortedInfo,
       onColumnHide: onColumnHide,
       onMoreActionClick: onMoreActionClick,
-      tableOnChangeProps: tableOnChangeProps,
-      onColumnFreeze: onColumnFreeze
+      tableOnChangeProps: tableOnChangeProps
     }),
     computedColumnsData = _useResizableColumns.columns;
   return {
@@ -520,9 +283,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(useRestoreScrollPosition.TABLE_SORT_ORDERS[queryParams.order_by])) {
+  if (neetoCist.isPresent(queryParams.sort_by) && neetoCist.isPresent(queryParams.order_by) && neetoCist.isPresent(HeaderCellMenu.TABLE_SORT_ORDERS[queryParams.order_by])) {
     sortedInfo.field = neetoCist.snakeToCamelCase(queryParams.sort_by);
-    sortedInfo.order = useRestoreScrollPosition.TABLE_SORT_ORDERS[queryParams.order_by];
+    sortedInfo.order = HeaderCellMenu.TABLE_SORT_ORDERS[queryParams.order_by];
   }
   return sortedInfo;
 };
@@ -541,7 +304,7 @@ var useTableSort = function useTableSort() {
   var handleTableChange = function handleTableChange(pagination, sorter) {
     var params = {
       sort_by: sorter.order ? neetoCist.camelToSnakeCase(sorter.field) : undefined,
-      order_by: useRestoreScrollPosition.URL_SORT_ORDERS[sorter.order],
+      order_by: HeaderCellMenu.URL_SORT_ORDERS[sorter.order],
       page: pagination.current
     };
     var pathname = window.location.pathname;
@@ -554,7 +317,150 @@ var useTableSort = function useTableSort() {
   };
 };
 
-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"];
+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"];
 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;
@@ -612,7 +518,6 @@ 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;
@@ -658,7 +563,7 @@ var Table = function Table(_ref) {
       observer.disconnect();
     }
   }, [resizeObserver.current, fixedHeight]);
-  var _useRestoreScrollPosi = useRestoreScrollPosition.useRestoreScrollPosition({
+  var _useRestoreScrollPosi = HeaderCellMenu.useRestoreScrollPosition({
       tableRef: tableRef,
       scrollRef: scrollRef,
       loading: loading
@@ -674,7 +579,6 @@ var Table = function Table(_ref) {
       isAddEnabled: enableAddColumn,
       onTableChange: onChange,
       columns: columns,
-      columnData: columnData,
       setColumns: setColumns,
       onColumnUpdate: onColumnUpdate,
       rowSelection: rowSelection,
@@ -686,8 +590,7 @@ var Table = function Table(_ref) {
       onColumnDelete: onColumnDelete,
       tableOnChangeProps: tableOnChangeProps,
       handleTableSortChange: handleTableSortChange,
-      isDefaultPageChangeHandler: isDefaultPageChangeHandler,
-      localStorageKeyPrefix: localStorageKeyPrefix
+      isDefaultPageChangeHandler: isDefaultPageChangeHandler
     }),
     dragProps = _useColumns.dragProps,
     curatedColumnsData = _useColumns.columns;
@@ -696,7 +599,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", useRestoreScrollPosition.TABLE_SORT_ORDERS[queryParams.order_by]), columnData);
+    }, ramda.assoc("sortOrder", HeaderCellMenu.TABLE_SORT_ORDERS[queryParams.order_by]), columnData);
   };
   var sortedColumns = isDefaultPageChangeHandler ? setSortFromURL(curatedColumnsData) : curatedColumnsData;
   var locale = {