@bigbinary/neetoui 8.3.0-beta1 → 8.3.0

package/dist/Table.js

@@ -4,24 +4,25 @@ import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React__default, { useRef, useEffect, useMemo, useState, useCallback } from 'react';
+import React__default, { useRef, useEffect, useState, useMemo, useCallback } from 'react';
 import classnames from 'classnames';
-import { noop, isPresent, snakeToCamelCase, camelToSnakeCase, isNotEmpty, modifyBy, dynamicArray } from '@bigbinary/neeto-cist';
-import { UpArrow, DownArrow, Left, Right, MenuHorizontal } from '@bigbinary/neeto-icons';
-import { move, has, equals, props, mergeLeft, isEmpty, all, includes, __, pluck, assoc } from 'ramda';
+import { isPresent, noop, snakeToCamelCase, camelToSnakeCase, isNotEmpty, modifyBy, dynamicArray } from '@bigbinary/neeto-cist';
+import { UpArrow, DownArrow, InfoRound, Left, Right, MenuHorizontal } from '@bigbinary/neeto-icons';
+import { isNil, move, isEmpty, all, includes, __, pipe, filter, pluck, equals, has, without, append, union, props, mergeLeft, assoc } from 'ramda';
 import ReactDragListView from 'react-drag-listview';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { ANTD_LOCALE } from './constants.js';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
-import { b as buildUrl, n as noop$1, A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-abadd6e9.js';
-import { u as useQueryParams } from './useQueryParams-dcb34865.js';
+import { g as getLocale, a as getFromLocalStorage, r as removeFromLocalStorage, s as setToLocalStorage, h as hyphenize, b as buildUrl, n as noop$1, A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-BCP3m_SF.js';
+import { u as useQueryParams } from './useQueryParams-b60CHFUx.js';
 import Button from './Button.js';
 import Callout from './Callout.js';
 import Typography from './Typography.js';
-import { T as TABLE_SORT_ORDERS, U as URL_SORT_ORDERS, H as HeaderCellMenu, S as SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT, a as SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT, u as useRestoreScrollPosition } from './HeaderCellMenu-85af6d2a.js';
+import { T as TABLE_SORT_ORDERS, U as URL_SORT_ORDERS, H as HeaderCellMenu, C as COLUMN_FIXED_VALUES, S as SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT, a as SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT, u as useRestoreScrollPosition } from './useRestoreScrollPosition-B3J6xSHt.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import Popover from './Popover.js';
 import { Resizable } from 'react-resizable';
 import Spinner from './Spinner.js';
 import 'antd/locale/de_DE';
@@ -33,19 +34,18 @@ import 'antd/locale/pl_PL';
 import 'antd/locale/pt_PT';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
+import 'qs';
+import './en-_r5-MxJe.js';
 import 'dayjs';
 import 'dayjs/plugin/localeData';
 import 'dayjs/plugin/utc';
 import 'dayjs/plugin/weekday';
 import 'dayjs/plugin/weekOfYear';
-import 'qs';
-import './en-41f5c641.js';
 import './Tooltip.js';
 import '@tippyjs/react';
 import 'tippy.js';
-import 'zustand';
 import './Dropdown.js';
-import './Popover.js';
+import 'zustand';
 
 var useTimeout = function useTimeout(callback, delay) {
   var savedCallback = useRef(callback);
@@ -53,9 +53,6 @@ var useTimeout = function useTimeout(callback, delay) {
     savedCallback.current = callback;
   }, [callback]);
   useEffect(function () {
-    if (delay === null) {
-      return undefined;
-    }
     var id = setTimeout(function () {
       return savedCallback.current();
     }, delay);
@@ -65,6 +62,31 @@ 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 = useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  return /*#__PURE__*/React__default.createElement(Callout, _extends({
+    className: "my-2"
+  }, calloutProps, {
+    "data-testid": "clear-selections-callout"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-gap-3"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "body2"
+  }, allRowsSelectedMessage || getLocale(i18n, t, "neetoui.table.allRowsSelected")), /*#__PURE__*/React__default.createElement(Button, {
+    "data-testid": "clear-selections-button",
+    style: "link",
+    label: clearSelectionButtonLabel || getLocale(i18n, t, "neetoui.table.clearSelection"),
+    onClick: onClearSelection
+  })));
+};
+
 var SelectAllRowsCallout = function SelectAllRowsCallout(_ref) {
   var calloutProps = _ref.calloutProps,
     onBulkSelectAllRows = _ref.onBulkSelectAllRows,
@@ -75,7 +97,7 @@ var SelectAllRowsCallout = function SelectAllRowsCallout(_ref) {
   }, calloutProps, {
     "data-testid": "select-all-rows-callout"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex space-x-3"
+    className: "neeto-ui-flex neeto-ui-gap-3"
   }, /*#__PURE__*/React__default.createElement(Typography, {
     style: "body2"
   }, selectAllRowMessage), /*#__PURE__*/React__default.createElement(Button, {
@@ -86,6 +108,27 @@ var SelectAllRowsCallout = function SelectAllRowsCallout(_ref) {
   })));
 };
 
+var useLocalStorage = function useLocalStorage(key, defaultValue) {
+  var _useState = useState(function () {
+      return 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 (isNil(newValue)) {
+        removeFromLocalStorage(key);
+      } else {
+        setToLocalStorage(key, newValue);
+      }
+      return newValue;
+    });
+  };
+  return [storedValue, setValue];
+};
+
 var useReorderColumns = function useReorderColumns(_ref) {
   var isEnabled = _ref.isEnabled,
     columns = _ref.columns,
@@ -107,12 +150,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 = 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"
   };
@@ -137,19 +181,252 @@ var SortIcon = function SortIcon(_ref) {
   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 = useRef();
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: "relative pr-5"
+  }, typeof title === "function" ? title(rest) : title, description && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+    className: "neeto-ui-table__column-title-info-icon",
+    ref: popoverRef
+  }, /*#__PURE__*/React__default.createElement(InfoRound, {
+    color: "currentColor",
+    size: 14
+  })), /*#__PURE__*/React__default.createElement(Popover, {
+    appendTo: function appendTo() {
+      return document.body;
+    },
+    position: "bottom",
+    reference: popoverRef
+  }, /*#__PURE__*/React__default.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 && isPresent(onColumnHide);
+  var isColumnDeletable = isDeletable && isPresent(onColumnDelete);
+  var hasMoreActions = !isEmpty(moreActions) && isPresent(onMoreActionClick);
+  var hasMoreMenu = isSortable || isColumnHidable || isAddEnabled || hasMoreActions || isPresent(column) && isColumnFreezeEnabled;
+  return /*#__PURE__*/React__default.createElement("th", _extends({}, headerProps, {
+    title: "",
+    onClick: isSortable ? noop : headerProps.onClick
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-between",
+    "data-cy": "".concat(hyphenize(headerProps.title), "-header-title")
+  }, /*#__PURE__*/React__default.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__default.createElement(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__default.createElement(CellContent, _extends({}, restProps, {
+      className: classnames(className, "drag-handler")
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Resizable, {
+    onResize: onResize,
+    onResizeStop: onResizeStop,
+    width: width,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
+    height: 0,
+    handle: /*#__PURE__*/React__default.createElement("span", {
+      className: "react-resizable-handle",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }),
+    onResizeStart: function onResizeStart(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React__default.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__default.createElement(CellContent, restProps);
+  }
+  return /*#__PURE__*/React__default.createElement(Resizable, {
+    onResize: onResize,
+    onResizeStop: onResizeStop,
+    width: width,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
+    height: 0,
+    handle: /*#__PURE__*/React__default.createElement("span", {
+      className: "react-resizable-handle",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }),
+    onResizeStart: function onResizeStart(e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React__default.createElement(CellContent, restProps));
+};
+
+var _excluded$1 = ["className"];
+var ReorderableHeaderCell = function ReorderableHeaderCell(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React__default.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 all(includes(__, array1), array2);
+};
+var getSelectAllRowsCalloutHeight = function getSelectAllRowsCalloutHeight() {
+  return window.innerWidth < 768 ? SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT : 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 = isPresent(a.fixed);
+    var bFixed = 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 pipe(filter(function (_ref2) {
+    var fixed = _ref2.fixed;
+    return isPresent(fixed);
+  }), pluck("dataIndex"))(columnData);
+};
+var getColumnSortOrder = function getColumnSortOrder(col, sortedInfo) {
+  return equals(sortedInfo.field, col.dataIndex) || equals(sortedInfo.field, col.key) ? sortedInfo.order : null;
+};
+var getColumFixedValue = function getColumFixedValue(col, frozenColumns) {
+  return frozenColumns.indexOf(col.dataIndex) !== -1 ? COLUMN_FIXED_VALUES.LEFT : null;
+};
+var getFrozenColumnsLocalStorageKey = function getFrozenColumnsLocalStorageKey(localStorageKeyPrefix) {
+  var prefix = isPresent(localStorageKeyPrefix) ? localStorageKeyPrefix : convertLocationPathnameToId();
+  return "NEETOUI-".concat(prefix, "-FIXED_COLUMNS");
+};
+var getSortInfoFromQueryParams = function getSortInfoFromQueryParams(queryParams) {
+  var sortedInfo = {};
+  if (isPresent(queryParams.sort_by) && isPresent(queryParams.order_by) && isPresent(TABLE_SORT_ORDERS[queryParams.order_by])) {
+    sortedInfo.field = queryParams.sort_by.includes("+") ? queryParams.sort_by.split("+").map(snakeToCamelCase) : snakeToCamelCase(queryParams.sort_by);
+    sortedInfo.order = TABLE_SORT_ORDERS[queryParams.order_by];
+  }
+  return sortedInfo;
+};
+var getSortField = function getSortField(field) {
+  if (Array.isArray(field)) {
+    return field.map(camelToSnakeCase).join("+");
+  }
+  return 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(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) {
@@ -164,6 +441,7 @@ var useResizableColumns = function useResizableColumns(_ref) {
   };
   var computedColumnsData = 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 {
@@ -176,27 +454,36 @@ 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__default.createElement(TitleWithInfoIcon, _extends({}, props, {
+            description: col.description,
+            title: col.title
+          }));
+        } : col.title
       });
-      if (!has("ellipsis", col)) {
-        modifiedColumn.ellipsis = true;
-      }
+      if (!has("ellipsis", col)) modifiedColumn.ellipsis = true;
       return modifiedColumn;
-    });
-  }, [columns, sortedInfo, tableOnChangeProps]);
+    }).sort(sortFrozenColumns(columnData));
+  }, [columns, sortedInfo, tableOnChangeProps, onColumnFreeze, frozenColumns, columnData]);
   return {
     columns: computedColumnsData
   };
@@ -206,10 +493,12 @@ 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(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,
@@ -221,7 +510,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 = useRef(false);
+  var _useLocalStorage = useLocalStorage(getFrozenColumnsLocalStorageKey(localStorageKeyPrefix), getFixedColumns(columnData)),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    frozenColumns = _useLocalStorage2[0],
+    setFrozenColumns = _useLocalStorage2[1];
+  var onColumnFreeze = useCallback(function (isFixedColumn, _ref2) {
+    var dataIndex = _ref2.dataIndex;
+    var updatedColumns = isFixedColumn ? without([dataIndex], frozenColumns) : append(dataIndex, frozenColumns);
+    setFrozenColumns(updatedColumns);
+  }, [frozenColumns, setFrozenColumns]);
+  useEffect(function () {
+    if (isEmpty(columnData) || didSetInitialFrozenColumnsRef.current) return;
+    var fixedCols = getFixedColumns(columnData);
+    setFrozenColumns(union(fixedCols));
+    didSetInitialFrozenColumnsRef.current = true;
+  }, [columnData, setFrozenColumns]);
   var _useReorderColumns = useReorderColumns({
       isEnabled: isReorderEnabled,
       columns: columns,
@@ -247,9 +553,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,
@@ -257,7 +566,8 @@ var useColumns = function useColumns(_ref) {
       sortedInfo: sortedInfo,
       onColumnHide: onColumnHide,
       onMoreActionClick: onMoreActionClick,
-      tableOnChangeProps: tableOnChangeProps
+      tableOnChangeProps: tableOnChangeProps,
+      onColumnFreeze: onColumnFreeze
     }),
     computedColumnsData = _useResizableColumns.columns;
   return {
@@ -266,14 +576,6 @@ var useColumns = function useColumns(_ref) {
   };
 };
 
-var getSortInfoFromQueryParams = function getSortInfoFromQueryParams(queryParams) {
-  var sortedInfo = {};
-  if (isPresent(queryParams.sort_by) && isPresent(queryParams.order_by) && isPresent(TABLE_SORT_ORDERS[queryParams.order_by])) {
-    sortedInfo.field = snakeToCamelCase(queryParams.sort_by);
-    sortedInfo.order = TABLE_SORT_ORDERS[queryParams.order_by];
-  }
-  return sortedInfo;
-};
 var useTableSort = function useTableSort() {
   var queryParams = useQueryParams();
   var _useState = useState(function () {
@@ -288,7 +590,7 @@ var useTableSort = function useTableSort() {
   var history = useHistory();
   var handleTableChange = function handleTableChange(pagination, sorter) {
     var params = {
-      sort_by: sorter.order ? camelToSnakeCase(sorter.field) : undefined,
+      sort_by: sorter.order ? getSortField(sorter.field) : undefined,
       order_by: URL_SORT_ORDERS[sorter.order],
       page: pagination.current
     };
@@ -302,150 +604,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(_ref, _excluded$4);
-  var isColumnHidable = isHidable && isPresent(onColumnHide);
-  var isColumnDeletable = isDeletable && isPresent(onColumnDelete);
-  var hasMoreActions = !isEmpty(moreActions) && isPresent(onMoreActionClick);
-  var hasMoreMenu = isSortable || isPresent(column === null || column === void 0 ? void 0 : column.description) || isColumnHidable || isAddEnabled || hasMoreActions;
-  return /*#__PURE__*/React__default.createElement("th", _extends({}, headerProps, {
-    title: "",
-    onClick: isSortable ? noop : headerProps.onClick
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "min-w-0 flex-grow"
-  }, children), hasMoreMenu && /*#__PURE__*/React__default.createElement(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(props, _excluded$3);
-  if (!width) {
-    return /*#__PURE__*/React__default.createElement(CellContent, _extends({}, restProps, {
-      className: classnames(className, "drag-handler")
-    }));
-  }
-  return /*#__PURE__*/React__default.createElement(Resizable, {
-    onResize: onResize,
-    onResizeStop: onResizeStop,
-    width: width,
-    draggableOpts: {
-      enableUserSelectHack: false
-    },
-    height: 0,
-    handle: /*#__PURE__*/React__default.createElement("span", {
-      className: "react-resizable-handle",
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }),
-    onResizeStart: function onResizeStart(e) {
-      e.preventDefault();
-    }
-  }, /*#__PURE__*/React__default.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__default.createElement(CellContent, restProps);
-  }
-  return /*#__PURE__*/React__default.createElement(Resizable, {
-    onResize: onResize,
-    onResizeStop: onResizeStop,
-    width: width,
-    draggableOpts: {
-      enableUserSelectHack: false
-    },
-    height: 0,
-    handle: /*#__PURE__*/React__default.createElement("span", {
-      className: "react-resizable-handle",
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }),
-    onResizeStart: function onResizeStart(e) {
-      e.preventDefault();
-    }
-  }, /*#__PURE__*/React__default.createElement(CellContent, restProps));
-};
-
-var _excluded$1 = ["className"];
-var ReorderableHeaderCell = function ReorderableHeaderCell(_ref) {
-  var className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React__default.createElement(CellContent, _extends({}, props, {
-    className: classnames(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 all(includes(__, array1), array2);
-};
-var getSelectAllRowsCalloutHeight = function getSelectAllRowsCalloutHeight() {
-  return window.innerWidth < 768 ? SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT : 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(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;
@@ -458,6 +617,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,
@@ -503,6 +664,7 @@ var Table = function Table(_ref) {
     onChange = _ref.onChange,
     onMoreActionClick = _ref.onMoreActionClick,
     bulkSelectAllRowsProps = _ref.bulkSelectAllRowsProps,
+    localStorageKeyPrefix = _ref.localStorageKeyPrefix,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation(),
     i18n = _useTranslation.i18n;
@@ -543,11 +705,13 @@ 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]);
+  }, [resizeObserver.current, fixedHeight, enableColumnReorder]);
   var _useRestoreScrollPosi = useRestoreScrollPosition({
       tableRef: tableRef,
       scrollRef: scrollRef,
@@ -562,8 +726,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,
@@ -575,7 +741,8 @@ var Table = function Table(_ref) {
       onColumnDelete: onColumnDelete,
       tableOnChangeProps: tableOnChangeProps,
       handleTableSortChange: handleTableSortChange,
-      isDefaultPageChangeHandler: isDefaultPageChangeHandler
+      isDefaultPageChangeHandler: isDefaultPageChangeHandler,
+      localStorageKeyPrefix: localStorageKeyPrefix
     }),
     dragProps = _useColumns.dragProps,
     curatedColumnsData = _useColumns.columns;
@@ -592,21 +759,12 @@ var Table = function Table(_ref) {
       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 ? pluck(rowKey, rowData) : initialSelectedRowKeys;
   var showBulkSelectionCallout = useMemo(function () {
     return isIncludedIn(selectedRowKeys, 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) {
@@ -651,7 +809,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;
@@ -753,11 +911,17 @@ var Table = function Table(_ref) {
         setBulkSelectedAllRows(true);
         handleSetBulkSelectedAllRows === null || handleSetBulkSelectedAllRows === void 0 || handleSetBulkSelectedAllRows(true);
       }
+    })), shouldShowAllRowsSelectedCallout && /*#__PURE__*/React__default.createElement(AllRowsSelectedCallout, _extends({}, bulkSelectAllRowsProps, {
+      onClearSelection: function onClearSelection() {
+        setBulkSelectedAllRows(false);
+        handleSetBulkSelectedAllRows === null || handleSetBulkSelectedAllRows === void 0 || handleSetBulkSelectedAllRows(false);
+        handleRowChange([], []);
+      }
     })), /*#__PURE__*/React__default.createElement(_Table, _extends({
       bordered: bordered,
       locale: locale,
       rowKey: rowKey,
-      columns: sortedColumnsWithAlignment,
+      columns: sortedColumns,
       components: componentOverrides,
       dataSource: rowData,
       loading: {