@bigbinary/neetoui 8.3.0-beta1 → 8.3.0

package/dist/cjs/Table.js

@@ -17,13 +17,14 @@ 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 useQueryParams = require('./useQueryParams-a8ee2f76.js');
+var index = require('./index-BG9I04iF.js');
+var useQueryParams = require('./useQueryParams-l5fJJYCR.js');
 var Button = require('./Button.js');
 var Callout = require('./Callout.js');
 var Typography = require('./Typography.js');
-var HeaderCellMenu = require('./HeaderCellMenu-ed9de3d6.js');
+var useRestoreScrollPosition = require('./useRestoreScrollPosition-Ck_b0Nh4.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var Popover = require('./Popover.js');
 var reactResizable = require('react-resizable');
 var Spinner = require('./Spinner.js');
 require('antd/locale/de_DE');
@@ -35,32 +36,18 @@ require('antd/locale/pl_PL');
 require('antd/locale/pt_PT');
 require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');
+require('qs');
+require('./en-DhnUUSB_.js');
 require('dayjs');
 require('dayjs/plugin/localeData');
 require('dayjs/plugin/utc');
 require('dayjs/plugin/weekday');
 require('dayjs/plugin/weekOfYear');
-require('qs');
-require('./en-80d0fbff.js');
 require('./Tooltip.js');
 require('@tippyjs/react');
 require('tippy.js');
-require('zustand');
 require('./Dropdown.js');
-require('./Popover.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _ConfigProvider__default = /*#__PURE__*/_interopDefaultLegacy(_ConfigProvider);
-var _Table__default = /*#__PURE__*/_interopDefaultLegacy(_Table);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var ReactDragListView__default = /*#__PURE__*/_interopDefaultLegacy(ReactDragListView);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+require('zustand');
 
 var useTimeout = function useTimeout(callback, delay) {
   var savedCallback = React.useRef(callback);
@@ -68,9 +55,6 @@ var useTimeout = function useTimeout(callback, delay) {
     savedCallback.current = callback;
   }, [callback]);
   React.useEffect(function () {
-    if (delay === null) {
-      return undefined;
-    }
     var id = setTimeout(function () {
       return savedCallback.current();
     }, delay);
@@ -80,20 +64,45 @@ var useTimeout = function useTimeout(callback, delay) {
   }, [delay]);
 };
 
+// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
+var AllRowsSelectedCallout = function AllRowsSelectedCallout(_ref) {
+  var calloutProps = _ref.calloutProps,
+    onClearSelection = _ref.onClearSelection,
+    allRowsSelectedMessage = _ref.allRowsSelectedMessage,
+    clearSelectionButtonLabel = _ref.clearSelectionButtonLabel;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  return /*#__PURE__*/React.createElement(Callout, _extends({
+    className: "my-2"
+  }, calloutProps, {
+    "data-testid": "clear-selections-callout"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-gap-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, allRowsSelectedMessage || index.getLocale(i18n, t, "neetoui.table.allRowsSelected")), /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "clear-selections-button",
+    style: "link",
+    label: clearSelectionButtonLabel || index.getLocale(i18n, t, "neetoui.table.clearSelection"),
+    onClick: onClearSelection
+  })));
+};
+
 var SelectAllRowsCallout = function SelectAllRowsCallout(_ref) {
   var calloutProps = _ref.calloutProps,
     onBulkSelectAllRows = _ref.onBulkSelectAllRows,
     selectAllRowButtonLabel = _ref.selectAllRowButtonLabel,
     selectAllRowMessage = _ref.selectAllRowMessage;
-  return /*#__PURE__*/React__default["default"].createElement(Callout, _extends__default["default"]({
+  return /*#__PURE__*/React.createElement(Callout, _extends({
     className: "my-2"
   }, calloutProps, {
     "data-testid": "select-all-rows-callout"
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex space-x-3"
-  }, /*#__PURE__*/React__default["default"].createElement(Typography, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-gap-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
-  }, selectAllRowMessage), /*#__PURE__*/React__default["default"].createElement(Button, {
+  }, selectAllRowMessage), /*#__PURE__*/React.createElement(Button, {
     "data-testid": "select-all-rows-button",
     label: selectAllRowButtonLabel,
     style: "link",
@@ -101,6 +110,27 @@ var SelectAllRowsCallout = function SelectAllRowsCallout(_ref) {
   })));
 };
 
+var useLocalStorage = function useLocalStorage(key, defaultValue) {
+  var _useState = React.useState(function () {
+      return index.getFromLocalStorage(key, defaultValue);
+    }),
+    _useState2 = _slicedToArray(_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,
@@ -122,12 +152,13 @@ var useReorderColumns = function useReorderColumns(_ref) {
         from = fromIndex - 1;
         to = toIndex - 1;
       }
+      if (!columns[from] || !columns[to]) return;
       if (isColumnFixed(columns[from]) || isColumnFixed(columns[to])) return;
       var newColumns = ramda.move(from, to, columns);
       setColumns(newColumns);
       onColumnUpdate(newColumns);
     },
-    nodeSelector: "th",
+    nodeSelector: "th:not(.ant-table-cell-fix-left):not(.ant-table-cell-scrollbar)",
     handleSelector: ".drag-handler",
     ignoreSelector: ".react-resizable-handle"
   };
@@ -139,38 +170,271 @@ 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) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoIcons.UpArrow, {
+  if (sortOrder === useRestoreScrollPosition.TABLE_SORT_ORDERS.asc || sortOrder === useRestoreScrollPosition.URL_SORT_ORDERS.ascend) {
+    return /*#__PURE__*/React.createElement(neetoIcons.UpArrow, {
       size: 14
     });
   }
-  if (sortOrder === HeaderCellMenu.TABLE_SORT_ORDERS.desc || sortOrder === HeaderCellMenu.URL_SORT_ORDERS.descend) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoIcons.DownArrow, {
+  if (sortOrder === useRestoreScrollPosition.TABLE_SORT_ORDERS.desc || sortOrder === useRestoreScrollPosition.URL_SORT_ORDERS.descend) {
+    return /*#__PURE__*/React.createElement(neetoIcons.DownArrow, {
       size: 14
     });
   }
   return null;
 };
 
+var _excluded$5 = ["title", "description"];
+var TitleWithInfoIcon = function TitleWithInfoIcon(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    rest = _objectWithoutProperties(_ref, _excluded$5);
+  var popoverRef = React.useRef();
+  return /*#__PURE__*/React.createElement("span", {
+    className: "relative pr-5"
+  }, typeof title === "function" ? title(rest) : title, description && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "neeto-ui-table__column-title-info-icon",
+    ref: popoverRef
+  }, /*#__PURE__*/React.createElement(neetoIcons.InfoRound, {
+    color: "currentColor",
+    size: 14
+  })), /*#__PURE__*/React.createElement(Popover, {
+    appendTo: function appendTo() {
+      return document.body;
+    },
+    position: "bottom",
+    reference: popoverRef
+  }, /*#__PURE__*/React.createElement(Typography, {
+    lineHeight: "normal",
+    style: "body2"
+  }, description))));
+};
+
+var _excluded$4 = ["children", "isSortable", "isAddEnabled", "sortedInfo", "onSort", "isHidable", "isDeletable", "isFixedColumn", "isColumnFreezeEnabled", "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,
+    isColumnFreezeEnabled = _ref.isColumnFreezeEnabled,
+    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(_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 || isColumnHidable || isAddEnabled || hasMoreActions || neetoCist.isPresent(column) && isColumnFreezeEnabled;
+  return /*#__PURE__*/React.createElement("th", _extends({}, headerProps, {
+    title: "",
+    onClick: isSortable ? neetoCist.noop : headerProps.onClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-between",
+    "data-cy": "".concat(index.hyphenize(headerProps.title), "-header-title")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-min-w-0 neeto-ui-flex-grow neeto-ui-truncate neeto-ui-table__column-title-content"
+  }, children), hasMoreMenu && /*#__PURE__*/React.createElement(useRestoreScrollPosition.HeaderCellMenu, {
+    column: column,
+    hasMoreActions: hasMoreActions,
+    isAddEnabled: isAddEnabled,
+    isColumnDeletable: isColumnDeletable,
+    isColumnFreezeEnabled: isColumnFreezeEnabled,
+    isFixedColumn: isFixedColumn,
+    isSortable: isSortable,
+    moreActions: moreActions,
+    onAddColumn: onAddColumn,
+    onColumnDelete: onColumnDelete,
+    onColumnFreeze: onColumnFreeze,
+    onColumnHide: onColumnHide,
+    onMoreActionClick: onMoreActionClick,
+    onSort: onSort,
+    sortedInfo: sortedInfo,
+    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(props, _excluded$3);
+  if (!width) {
+    return /*#__PURE__*/React.createElement(CellContent, _extends({}, restProps, {
+      className: classnames(className, "drag-handler")
+    }));
+  }
+  return /*#__PURE__*/React.createElement(reactResizable.Resizable, {
+    onResize: onResize,
+    onResizeStop: onResizeStop,
+    width: width,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
+    height: 0,
+    handle: /*#__PURE__*/React.createElement("span", {
+      className: "react-resizable-handle",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }),
+    onResizeStart: function onResizeStart(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(CellContent, _extends({}, restProps, {
+    className: classnames(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(props, _excluded$2);
+  if (!width) {
+    return /*#__PURE__*/React.createElement(CellContent, restProps);
+  }
+  return /*#__PURE__*/React.createElement(reactResizable.Resizable, {
+    onResize: onResize,
+    onResizeStop: onResizeStop,
+    width: width,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
+    height: 0,
+    handle: /*#__PURE__*/React.createElement("span", {
+      className: "react-resizable-handle",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }),
+    onResizeStart: function onResizeStart(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(CellContent, restProps));
+};
+
+var _excluded$1 = ["className"];
+var ReorderableHeaderCell = function ReorderableHeaderCell(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React.createElement(CellContent, _extends({}, props, {
+    className: classnames(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 ramda.equals(sortedInfo.field, col.dataIndex) || ramda.equals(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");
+};
+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])) {
+    sortedInfo.field = queryParams.sort_by.includes("+") ? queryParams.sort_by.split("+").map(neetoCist.snakeToCamelCase) : neetoCist.snakeToCamelCase(queryParams.sort_by);
+    sortedInfo.order = useRestoreScrollPosition.TABLE_SORT_ORDERS[queryParams.order_by];
+  }
+  return sortedInfo;
+};
+var getSortField = function getSortField(field) {
+  if (Array.isArray(field)) {
+    return field.map(neetoCist.camelToSnakeCase).join("+");
+  }
+  return neetoCist.camelToSnakeCase(field);
+};
+
 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; }
+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(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,
+    isColumnFreezeEnabled = _ref.isColumnFreezeEnabled,
     onColumnAdd = _ref.onColumnAdd,
     onColumnUpdate = _ref.onColumnUpdate,
     onColumnDelete = _ref.onColumnDelete,
     handleSort = _ref.handleSort,
     sortedInfo = _ref.sortedInfo,
     onColumnHide = _ref.onColumnHide,
+    onColumnFreeze = _ref.onColumnFreeze,
     onMoreActionClick = _ref.onMoreActionClick,
     tableOnChangeProps = _ref.tableOnChangeProps;
   var handleResize = function handleResize(index) {
     return function (_, _ref2) {
       var size = _ref2.size;
-      var nextColumns = _toConsumableArray__default["default"](columns);
+      var nextColumns = _toConsumableArray(columns);
       nextColumns[index] = _objectSpread$2(_objectSpread$2({}, nextColumns[index]), {}, {
         width: size.width
       });
@@ -179,6 +443,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,40 +456,51 @@ var useResizableColumns = function useResizableColumns(_ref) {
             onSort: handleSort,
             sortedInfo: sortedInfo,
             onColumnHide: onColumnHide,
+            onColumnFreeze: onColumnFreeze,
             onMoreActionClick: onMoreActionClick,
-            isAddEnabled: isAddEnabled && !col.fixed,
+            isColumnFreezeEnabled: isColumnFreezeEnabled,
+            isAddEnabled: isAddEnabled && !fixed,
             onAddColumn: function onAddColumn(positionOffset) {
               return onColumnAdd(index + positionOffset);
             },
+            isFixedColumn: !!fixed,
             onColumnDelete: onColumnDelete,
             isHidable: col.isHidable,
             isDeletable: col.isDeletable,
             moreActions: col.moreActions,
-            column: col
+            column: col,
+            "data-text-align": column.align
           };
         },
         sortIcon: SortIcon,
-        sortOrder: sortedInfo.field === col.dataIndex || sortedInfo.field === col.key ? sortedInfo.order : null
+        sortOrder: getColumnSortOrder(col, sortedInfo),
+        fixed: fixed,
+        title: col.description ? function (props) {
+          return /*#__PURE__*/React.createElement(TitleWithInfoIcon, _extends({}, props, {
+            description: col.description,
+            title: col.title
+          }));
+        } : col.title
       });
-      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
   };
 };
 
 function ownKeys$1(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$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; }
+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(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,
     isAddEnabled = _ref.isAddEnabled,
+    isColumnFreezeEnabled = _ref.isColumnFreezeEnabled,
     onColumnAdd = _ref.onColumnAdd,
     onColumnUpdate = _ref.onColumnUpdate,
     onColumnDelete = _ref.onColumnDelete,
@@ -236,7 +512,24 @@ var useColumns = function useColumns(_ref) {
     onTableChange = _ref.onTableChange,
     tableOnChangeProps = _ref.tableOnChangeProps,
     handleTableSortChange = _ref.handleTableSortChange,
-    isDefaultPageChangeHandler = _ref.isDefaultPageChangeHandler;
+    isDefaultPageChangeHandler = _ref.isDefaultPageChangeHandler,
+    localStorageKeyPrefix = _ref.localStorageKeyPrefix;
+  var didSetInitialFrozenColumnsRef = React.useRef(false);
+  var _useLocalStorage = useLocalStorage(getFrozenColumnsLocalStorageKey(localStorageKeyPrefix), getFixedColumns(columnData)),
+    _useLocalStorage2 = _slicedToArray(_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]);
+  React.useEffect(function () {
+    if (ramda.isEmpty(columnData) || didSetInitialFrozenColumnsRef.current) return;
+    var fixedCols = getFixedColumns(columnData);
+    setFrozenColumns(ramda.union(fixedCols));
+    didSetInitialFrozenColumnsRef.current = true;
+  }, [columnData, setFrozenColumns]);
   var _useReorderColumns = useReorderColumns({
       isEnabled: isReorderEnabled,
       columns: columns,
@@ -262,9 +555,12 @@ var useColumns = function useColumns(_ref) {
   };
   var _useResizableColumns = useResizableColumns({
       columns: columns,
+      columnData: columnData,
+      frozenColumns: frozenColumns,
       setColumns: setColumns,
       isEnabled: isResizeEnabled,
       isAddEnabled: isAddEnabled,
+      isColumnFreezeEnabled: isColumnFreezeEnabled,
       onColumnAdd: onColumnAdd,
       onColumnUpdate: onColumnUpdate,
       onColumnDelete: onColumnDelete,
@@ -272,7 +568,8 @@ var useColumns = function useColumns(_ref) {
       sortedInfo: sortedInfo,
       onColumnHide: onColumnHide,
       onMoreActionClick: onMoreActionClick,
-      tableOnChangeProps: tableOnChangeProps
+      tableOnChangeProps: tableOnChangeProps,
+      onColumnFreeze: onColumnFreeze
     }),
     computedColumnsData = _useResizableColumns.columns;
   return {
@@ -281,20 +578,12 @@ 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])) {
-    sortedInfo.field = neetoCist.snakeToCamelCase(queryParams.sort_by);
-    sortedInfo.order = HeaderCellMenu.TABLE_SORT_ORDERS[queryParams.order_by];
-  }
-  return sortedInfo;
-};
 var useTableSort = function useTableSort() {
   var queryParams = useQueryParams.useQueryParams();
   var _useState = React.useState(function () {
       return getSortInfoFromQueryParams(queryParams);
     }),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     sortedInfo = _useState2[0],
     setSortedInfo = _useState2[1];
   React.useEffect(function () {
@@ -303,8 +592,8 @@ var useTableSort = function useTableSort() {
   var history = reactRouterDom.useHistory();
   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],
+      sort_by: sorter.order ? getSortField(sorter.field) : undefined,
+      order_by: useRestoreScrollPosition.URL_SORT_ORDERS[sorter.order],
       page: pagination.current
     };
     var pathname = window.location.pathname;
@@ -317,152 +606,9 @@ 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", "enableColumnFreeze", "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; }
+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(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;
 var TABLE_DEFAULT_HEADER_HEIGHT = 40;
 var TABLE_ROW_HEIGHT = 52;
@@ -473,6 +619,8 @@ var Table = function Table(_ref) {
     enableColumnResize = _ref$enableColumnResi === void 0 ? true : _ref$enableColumnResi,
     _ref$enableColumnReor = _ref.enableColumnReorder,
     enableColumnReorder = _ref$enableColumnReor === void 0 ? false : _ref$enableColumnReor,
+    _ref$enableColumnFree = _ref.enableColumnFreeze,
+    enableColumnFreeze = _ref$enableColumnFree === void 0 ? true : _ref$enableColumnFree,
     _ref$enableAddColumn = _ref.enableAddColumn,
     enableAddColumn = _ref$enableAddColumn === void 0 ? false : _ref$enableAddColumn,
     _ref$className = _ref.className,
@@ -518,23 +666,24 @@ var Table = function Table(_ref) {
     onChange = _ref.onChange,
     onMoreActionClick = _ref.onMoreActionClick,
     bulkSelectAllRowsProps = _ref.bulkSelectAllRowsProps,
-    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+    localStorageKeyPrefix = _ref.localStorageKeyPrefix,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation(),
     i18n = _useTranslation.i18n;
   var _useState = React.useState(null),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     containerHeight = _useState2[0],
     setContainerHeight = _useState2[1];
   var _useState3 = React.useState(TABLE_DEFAULT_HEADER_HEIGHT),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     headerHeight = _useState4[0],
     setHeaderHeight = _useState4[1];
   var _useState5 = React.useState(columnData),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     columns = _useState6[0],
     setColumns = _useState6[1];
   var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    _useState8 = _slicedToArray(_useState7, 2),
     bulkSelectedAllRows = _useState8[0],
     setBulkSelectedAllRows = _useState8[1];
   var _useTableSort = useTableSort(),
@@ -548,7 +697,7 @@ var Table = function Table(_ref) {
   var headerRef = React.useRef();
   var tableOnChangeProps = React.useRef({});
   var resizeObserver = React.useRef(new ResizeObserver(function (_ref3) {
-    var _ref4 = _slicedToArray__default["default"](_ref3, 1),
+    var _ref4 = _slicedToArray(_ref3, 1),
       entry = _ref4[0];
     return setContainerHeight(entry.contentRect.height);
   }));
@@ -558,12 +707,14 @@ var Table = function Table(_ref) {
     if (!fixedHeight) return;
     var observer = resizeObserver.current;
     if (table !== null) {
-      observer.observe(table === null || table === void 0 ? void 0 : table.parentNode);
+      var _table$parentNode;
+      var targetNode = enableColumnReorder ? table === null || table === void 0 || (_table$parentNode = table.parentNode) === null || _table$parentNode === void 0 ? void 0 : _table$parentNode.parentNode : table === null || table === void 0 ? void 0 : table.parentNode;
+      observer.observe(targetNode);
     } else if (observer) {
       observer.disconnect();
     }
-  }, [resizeObserver.current, fixedHeight]);
-  var _useRestoreScrollPosi = HeaderCellMenu.useRestoreScrollPosition({
+  }, [resizeObserver.current, fixedHeight, enableColumnReorder]);
+  var _useRestoreScrollPosi = useRestoreScrollPosition.useRestoreScrollPosition({
       tableRef: tableRef,
       scrollRef: scrollRef,
       loading: loading
@@ -577,8 +728,10 @@ var Table = function Table(_ref) {
       isReorderEnabled: enableColumnReorder,
       isResizeEnabled: enableColumnResize,
       isAddEnabled: enableAddColumn,
+      isColumnFreezeEnabled: enableColumnFreeze,
       onTableChange: onChange,
       columns: columns,
+      columnData: columnData,
       setColumns: setColumns,
       onColumnUpdate: onColumnUpdate,
       rowSelection: rowSelection,
@@ -590,7 +743,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,29 +753,20 @@ 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 = {
-    emptyText: /*#__PURE__*/React__default["default"].createElement(Typography, {
+    emptyText: /*#__PURE__*/React.createElement(Typography, {
       style: "body2"
     }, "No Data")
   };
-  var sortedColumnsWithAlignment = sortedColumns.map(function (sortedColumn) {
-    return _objectSpread(_objectSpread({}, sortedColumn), {}, {
-      onHeaderCell: function onHeaderCell(column) {
-        var _sortedColumn$onHeade;
-        return _objectSpread(_objectSpread({}, (_sortedColumn$onHeade = sortedColumn.onHeaderCell) === null || _sortedColumn$onHeade === void 0 ? void 0 : _sortedColumn$onHeade.call(sortedColumn, column)), {}, {
-          "data-text-align": column.align
-        });
-      }
-    });
-  });
   var selectedRowKeys = bulkSelectedAllRows ? ramda.pluck(rowKey, rowData) : initialSelectedRowKeys;
   var showBulkSelectionCallout = React.useMemo(function () {
     return isIncludedIn(selectedRowKeys, ramda.pluck(rowKey, rowData)) && selectedRowKeys.length !== totalCount && !bulkSelectedAllRows;
   }, [selectedRowKeys, rowKey, rowData, totalCount, bulkSelectedAllRows]);
   var shouldShowSelectAllRowsCallout = bulkSelectAllRowsProps && showBulkSelectionCallout;
+  var shouldShowAllRowsSelectedCallout = bulkSelectAllRowsProps && bulkSelectedAllRows;
   var handleRowChange = function handleRowChange(selectedRowKeys, selectedRows) {
     var tableWrapper = document.querySelector('[data-testid="table-wrapper"]');
     if (selectedRowKeys.length !== defaultPageSize) {
@@ -666,7 +811,7 @@ var Table = function Table(_ref) {
   var calculateTableContainerHeight = function calculateTableContainerHeight() {
     var isPaginationVisible = otherProps.pagination !== false && rowData.length > pageSize;
     var selectAllRowsCalloutHeight = 0;
-    if (shouldShowSelectAllRowsCallout) {
+    if (shouldShowSelectAllRowsCallout || shouldShowAllRowsSelectedCallout) {
       selectAllRowsCalloutHeight = getSelectAllRowsCalloutHeight();
     }
     return containerHeight - headerHeight - (isPaginationVisible ? TABLE_PAGINATION_HEIGHT : 0) - selectAllRowsCalloutHeight;
@@ -681,14 +826,14 @@ var Table = function Table(_ref) {
       size: "small",
       style: "text"
     };
-    if (type === "prev") return /*#__PURE__*/React__default["default"].createElement(Button, _extends__default["default"]({
+    if (type === "prev") return /*#__PURE__*/React.createElement(Button, _extends({
       icon: neetoIcons.Left
     }, commonProps));
-    if (type === "next") return /*#__PURE__*/React__default["default"].createElement(Button, _extends__default["default"]({
+    if (type === "next") return /*#__PURE__*/React.createElement(Button, _extends({
       icon: neetoIcons.Right
     }, commonProps));
     if (type === "jump-prev" || type === "jump-next") {
-      return /*#__PURE__*/React__default["default"].createElement(Button, _extends__default["default"]({
+      return /*#__PURE__*/React.createElement(Button, _extends({
         icon: neetoIcons.MenuHorizontal
       }, commonProps));
     }
@@ -714,7 +859,7 @@ var Table = function Table(_ref) {
   }, [columnData]);
   var neetoUIFontBold = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--neeto-ui-font-bold"), 10);
   var renderTable = function renderTable() {
-    return /*#__PURE__*/React__default["default"].createElement(_ConfigProvider__default["default"], {
+    return /*#__PURE__*/React.createElement(_ConfigProvider, {
       locale: constants.ANTD_LOCALE[i18n.language || "en"],
       theme: {
         token: _objectSpread({}, index.ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
@@ -763,21 +908,27 @@ var Table = function Table(_ref) {
           }
         }
       }
-    }, shouldShowSelectAllRowsCallout && /*#__PURE__*/React__default["default"].createElement(SelectAllRowsCallout, _extends__default["default"]({}, bulkSelectAllRowsProps, {
+    }, shouldShowSelectAllRowsCallout && /*#__PURE__*/React.createElement(SelectAllRowsCallout, _extends({}, bulkSelectAllRowsProps, {
       onBulkSelectAllRows: function onBulkSelectAllRows() {
         setBulkSelectedAllRows(true);
         handleSetBulkSelectedAllRows === null || handleSetBulkSelectedAllRows === void 0 || handleSetBulkSelectedAllRows(true);
       }
-    })), /*#__PURE__*/React__default["default"].createElement(_Table__default["default"], _extends__default["default"]({
+    })), shouldShowAllRowsSelectedCallout && /*#__PURE__*/React.createElement(AllRowsSelectedCallout, _extends({}, bulkSelectAllRowsProps, {
+      onClearSelection: function onClearSelection() {
+        setBulkSelectedAllRows(false);
+        handleSetBulkSelectedAllRows === null || handleSetBulkSelectedAllRows === void 0 || handleSetBulkSelectedAllRows(false);
+        handleRowChange([], []);
+      }
+    })), /*#__PURE__*/React.createElement(_Table, _extends({
       bordered: bordered,
       locale: locale,
       rowKey: rowKey,
-      columns: sortedColumnsWithAlignment,
+      columns: sortedColumns,
       components: componentOverrides,
       dataSource: rowData,
       loading: {
         spinning: loading,
-        indicator: /*#__PURE__*/React__default["default"].createElement(Spinner, null)
+        indicator: /*#__PURE__*/React.createElement(Spinner, null)
       },
       ref: tableRef,
       rowSelection: rowSelectionProps,
@@ -793,7 +944,7 @@ var Table = function Table(_ref) {
         onChange: handlePageChange,
         itemRender: itemRender
       }),
-      rowClassName: classnames__default["default"]("neeto-ui-table--row", {
+      rowClassName: classnames("neeto-ui-table--row", {
         "neeto-ui-table--row_hover": allowRowClick
       }, [className]),
       scroll: _objectSpread({
@@ -805,7 +956,7 @@ var Table = function Table(_ref) {
       onHeaderRow: function onHeaderRow() {
         return {
           ref: headerRef,
-          className: classnames__default["default"]("neeto-ui-table__header", {
+          className: classnames("neeto-ui-table__header", {
             "neeto-ui-table-reorderable": enableColumnReorder
           }),
           id: "neeto-ui-table__header"
@@ -820,7 +971,7 @@ var Table = function Table(_ref) {
       }
     }, otherProps)));
   };
-  return enableColumnReorder ? /*#__PURE__*/React__default["default"].createElement(ReactDragListView__default["default"].DragColumn, dragProps, renderTable()) : renderTable();
+  return enableColumnReorder ? /*#__PURE__*/React.createElement(ReactDragListView.DragColumn, dragProps, renderTable()) : renderTable();
 };
 
 module.exports = Table;