@economic/taco 1.28.1 → 1.30.0

package/dist/taco.cjs.development.js

@@ -750,6 +750,36 @@ function IconClose(props, svgRef) {
 }
 var Close = /*#__PURE__*/React.forwardRef(IconClose);
 
+function IconColumnFreeze(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 4.5h-4v15h4v-15zm1.5 0v15h3.75a.25.25 0 00.25-.25V4.75a.25.25 0 00-.25-.25H15.5zM4.75 3A1.75 1.75 0 003 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0021 19.25V4.75A1.75 1.75 0 0019.25 3H4.75z",
+    fill: "currentColor"
+  }));
+}
+var ColumnFreeze = /*#__PURE__*/React.forwardRef(IconColumnFreeze);
+
+function IconColumnUnfreeze(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.6 4.5H14v15h-2.378a2.26 2.26 0 010 1.5h7.628A1.75 1.75 0 0021 19.25V4.75A1.75 1.75 0 0019.25 3H4.75A1.75 1.75 0 003 4.75v6.75c.576 0 1.152.22 1.591.659l1.659 1.659 1.659-1.659a2.244 2.244 0 011.691-.657V4.5zm5.9 15v-15h3.75a.25.25 0 01.25.25v14.5a.25.25 0 01-.25.25H15.5zM2.47 20.78a.75.75 0 010-1.06L5.19 17l-2.72-2.72a.75.75 0 111.06-1.06l2.72 2.72 2.72-2.72a.75.75 0 111.06 1.06L7.31 17l2.72 2.72a.75.75 0 11-1.06 1.06l-2.72-2.72-2.72 2.72a.75.75 0 01-1.06 0z",
+    fill: "currentColor"
+  }));
+}
+var ColumnUnfreeze = /*#__PURE__*/React.forwardRef(IconColumnUnfreeze);
+
 function IconColumns(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3036,6 +3066,8 @@ const icons = {
   'clamp-open': ClampOpen,
   clamp: Clamp,
   close: Close,
+  'column-freeze': ColumnFreeze,
+  'column-unfreeze': ColumnUnfreeze,
   columns: Columns,
   'connection-enable': ConnectionEnable,
   'connection-revoke': ConnectionRevoke,
@@ -3825,15 +3857,22 @@ const defaultLocalisationTexts = {
         deselectAll: 'Deselect all rows',
         select: 'Select row',
         selectAll: 'Select all rows'
+      },
+      menu: {
+        freezeColumns: (count = 1) => count === 1 ? 'Freeze the first column' : `Freeze first ${count} columns`,
+        unfreezeColumns: 'Unfreeze all columns'
       }
     },
     columnSettings: {
-      columnsOther: 'Other columns',
-      columnsOtherDrop: 'Drop column here to unpin',
-      columnsPinned: 'Pinned columns',
-      columnsPinnedDrop: 'Drop column here to pin',
+      columnsHidden: 'Hidden columns',
+      columnsHiddenDrop: 'Drop column here to hide',
+      columnsVisible: 'Visible columns',
+      columnsVisibleDrop: 'Drop column here to show',
+      noHiddenColumns: 'No hidden columns',
+      noVisibleColumns: 'No visible columns',
       search: 'Search column...',
-      tooltip: 'Column settings'
+      tooltip: 'Column settings',
+      button: 'Columns'
     },
     editing: {
       button: 'Edit',
@@ -4380,6 +4419,8 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
+    "aria-invalid": invalid,
+    "data-highlighted": highlighted,
     ref: internalRef,
     style: {
       paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
@@ -4404,20 +4445,18 @@ const Affix = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Af
     disabled,
     type
   } = props;
-  if (children) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
-      // icon
-      '[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
-        'text-grey-300': disabled,
-        'text-grey-700': !disabled,
-        'left-0 [&>button]:!-ml-2': type === 'prefix',
-        'right-0 [&>button]:!-mr-2': type === 'postfix'
-      }),
-      ref: ref
-    }, children);
-  }
-  return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
+    // icon
+    '[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
+      'text-grey-300': disabled,
+      'text-grey-700': !disabled,
+      'left-0 [&>button]:!-ml-2': type === 'prefix',
+      'right-0 [&>button]:!-mr-2': type === 'postfix'
+    }),
+    "data-affix-type": type,
+    ref: ref
+  }, children);
 }));
 const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
   var _attributes$postfix;
@@ -8317,6 +8356,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
     onKeyDown: handleKeyDown,
     postfix: /*#__PURE__*/React.createElement(React.Fragment, null, props.disabled || props.readOnly || !props.value ? null : /*#__PURE__*/React.createElement(IconButton, {
       "aria-hidden": true,
+      "aria-label": texts.searchInput.clear,
       className: "group-peer-focus:visible group-peer-hover:visible !text-grey-700 invisible mr-0.5 !h-5 !min-h-[theme(spacing.4)] !w-5 !min-w-[theme(spacing.4)] text-xs hover:visible group-hover:visible",
       icon: "close",
       onClick: handleCancelClick,
@@ -8523,7 +8563,9 @@ const Root$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, r
     value,
     ...otherProps
   } = props;
-  const id = useId(nativeId);
+  // The id name cannot start with a number, otherwise unit tests will fail when trying to querry element with such id.
+  // That's why adding prefix.
+  const id = 'listbox2-' + useId(nativeId);
   const context = React__default.useMemo(() => ({
     disabled,
     readOnly,
@@ -8578,7 +8620,9 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Listbox2Option(pr
     setValue,
     value: currentValue
   } = useListbox2Context();
-  const id = useId(nativeId);
+  // The id name cannot start with a number, otherwise unit tests will fail when trying to querry element with such id.
+  // That's why adding prefix.
+  const id = 'option-' + useId(nativeId);
   const selected = Array.isArray(currentValue) ? currentValue.includes(value) : currentValue === value;
   const handleClick = event => {
     if (disabled || listboxDisabled || listboxReadOnly) {
@@ -9509,8 +9553,9 @@ const Collection$1 = props => {
   const {
     children
   } = props;
+  // max-h-[11.5rem] = is 5.5 options + spacing between them. Option height is 2rem, spacing 0.125. In total it's 11.5.
   return /*#__PURE__*/React__default.createElement(ScrollArea, {
-    className: "flex max-h-[10.3rem] w-full flex-col gap-y-0.5 px-1.5"
+    className: "flex max-h-[11.5rem] w-full flex-col gap-y-0.5 px-1.5"
   }, children);
 };
 
@@ -11328,6 +11373,7 @@ const COLUMN_ID_FOR_DRAGGABLE = '__draggable';
 const COLUMN_ID_FOR_SELECTION = '__select';
 const COLUMN_ID_FOR_EXPANSION = '__expansion';
 const COLUMN_ID_FOR_ACTIONS = '__actions';
+const isInternalFrozenColumn = id => isInternalColumn(id) && id !== COLUMN_ID_FOR_ACTIONS;
 const isInternalColumn = id => id === COLUMN_ID_FOR_SELECTION || id === COLUMN_ID_FOR_EXPANSION || id === COLUMN_ID_FOR_ACTIONS || id === COLUMN_ID_FOR_DRAGGABLE;
 const MIN_COLUMN_SIZE = 80; // accounts for padding and sort controls
 const toggleBetween$1 = (fromRowIndex, toRowIndex) => {
@@ -11504,6 +11550,7 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
 }
 const ExpandCell = /*#__PURE__*/React__default.memo(({
   expandedRowRenderer,
+  isExpanded,
   row,
   texts
 }) => {
@@ -11511,7 +11558,6 @@ const ExpandCell = /*#__PURE__*/React__default.memo(({
   if (!hasExpandedRow) {
     return null;
   }
-  const isExpanded = row.getIsExpanded();
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isExpanded ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand, /*#__PURE__*/React__default.createElement(Shortcut$1, {
       className: "ml-2",
@@ -11548,8 +11594,13 @@ function createRowExpansionColumn(expandedRowRenderer, texts) {
     })),
     cell: ({
       row
-    }) => /*#__PURE__*/React__default.createElement(ExpandCell, {
+    }) =>
+    /*#__PURE__*/
+    // ExpandCell is memoised and that's why calling row.getIsExpanded() inside it doesn't return the correct
+    // expand state. This is the reason why isExpanded is pulled out of the ExpandCell component.
+    React__default.createElement(ExpandCell, {
       expandedRowRenderer: expandedRowRenderer,
+      isExpanded: row.getIsExpanded(),
       row: row,
       texts: texts
     }),
@@ -11654,11 +11705,14 @@ function createRowActionsColumn(rowActions, texts) {
       align: 'right',
       className: (row, table) => {
         var _table$options$meta3;
-        return cn('items-center print:opacity-0 group-[[aria-current]]/row:sticky group-hover/row:sticky right-0 !px-1', {
-          'group-[[aria-current]]/row:!shadow-[-6px_0px_6px_theme(colors.grey.200)]': !row.getIsSelected(),
-          'group-hover/row:!shadow-[-6px_0px_6px_theme(colors.grey.100)]': !row.getIsSelected() && (!((_table$options$meta3 = table.options.meta) !== null && _table$options$meta3 !== void 0 && _table$options$meta3.shouldPauseHoverState) || table.options.meta.editMode.isEditing),
-          'shadow-[-6px_0px_6px_theme(colors.blue.100)]': row.getIsSelected()
-        });
+        return (
+          // Adding z-index so that it shows on top of frozen columns
+          cn('items-center print:opacity-0 group-[[aria-current]]/row:sticky group-hover/row:sticky right-0 !px-1 z-[1]', {
+            'group-[[aria-current]]/row:!shadow-[-6px_0px_6px_theme(colors.grey.200)]': !row.getIsSelected(),
+            'group-hover/row:!shadow-[-6px_0px_6px_theme(colors.grey.100)]': !row.getIsSelected() && (!((_table$options$meta3 = table.options.meta) !== null && _table$options$meta3 !== void 0 && _table$options$meta3.shouldPauseHoverState) || table.options.meta.editMode.isEditing),
+            'shadow-[-6px_0px_6px_theme(colors.blue.100)]': row.getIsSelected()
+          })
+        );
       },
       headerClassName: 'hover:!bg-white !px-1'
     },
@@ -11687,15 +11741,15 @@ const getCellAlignmentClasses = (alignment = 'left') => ({
   'justify-end text-right': alignment === 'right',
   'justify-center text-center': alignment === 'center'
 });
-const getPinnedShadowClasses = (column, columnPinning, isHorizontallyOffset) => {
-  const pinned = !!column.getIsPinned();
+const getFrozenShadowClasses = (column, frozenColumns, isHorizontallyOffset) => {
+  const frozen = !!column.getIsPinned();
   // react-table has column.getPinnedIndex() but it does not exclude hidden columns, so the number is wrong
-  const pinnedIndex = columnPinning.indexOf(column.id);
-  const isLastPinned = pinned && pinnedIndex === columnPinning.length - 1;
-  const hidePinnedShadow = !isHorizontallyOffset && (column.id === COLUMN_ID_FOR_EXPANSION || column.id === COLUMN_ID_FOR_SELECTION);
+  const frozenColumnIndex = frozenColumns.indexOf(column.id);
+  const isLastFrozen = frozen && frozenColumnIndex === frozenColumns.length - 1;
+  const hideFrozenShadow = !isHorizontallyOffset && (column.id === COLUMN_ID_FOR_EXPANSION || column.id === COLUMN_ID_FOR_SELECTION);
   return {
-    'shadow-[6px_0px_6px_rgb(0_0_0/8%),1px_0px_0px_theme(colors.grey.300)]': isLastPinned && isHorizontallyOffset,
-    'shadow-[1px_0px_0px_theme(colors.grey.300)]': isLastPinned && !isHorizontallyOffset && !hidePinnedShadow
+    'shadow-[6px_0px_6px_rgb(0_0_0/8%),1px_0px_0px_theme(colors.grey.300)]': isLastFrozen && isHorizontallyOffset,
+    'shadow-[1px_0px_0px_theme(colors.grey.300)]': isLastFrozen && !isHorizontallyOffset && !hideFrozenShadow
   };
 };
 const isKeyboardFocusableElement = element => {
@@ -11712,18 +11766,18 @@ const ColumnBase = /*#__PURE__*/React__default.forwardRef(function Table2ColumnB
     table,
     ...attributes
   } = props;
-  const pinned = !!column.getIsPinned();
+  const isFrozenColumn = !!column.getIsPinned();
   const meta = table.options.meta;
   const left = meta.columnOffsets[column.id];
-  const columnPinning = table.getLeftVisibleLeafColumns().map(c => c.id);
-  const className = cn('border-grey-300', getPinnedShadowClasses(column, columnPinning, scrolled), getCellAlignmentClasses((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.align), {
+  const columnFreezing = table.getLeftVisibleLeafColumns().map(c => c.id);
+  const className = cn('border-grey-300', getFrozenShadowClasses(column, columnFreezing, scrolled), getCellAlignmentClasses((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.align), {
     'cursor-pointer': !!attributes.onClick
   }, attributes.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: className,
     style: {
       ...style,
-      left: pinned && Number.isInteger(left) ? left : undefined
+      left: isFrozenColumn && Number.isInteger(left) ? left : undefined
     },
     ref: ref
   }));
@@ -12115,7 +12169,7 @@ const Cell = function Cell(props) {
   const controlRef = React__default.useRef(null);
   const cellClassName = (_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.className;
   const isActiveRow = meta.activeRowIndex === rowIndex;
-  const isPinned = !!cell.column.getIsPinned();
+  const isFrozen = !!cell.column.getIsPinned();
   const isDragging = meta.dragging[cell.row.id];
   const isSelected = cell.row.getIsSelected();
   const isDataColumn = !isInternalColumn(cell.column.id);
@@ -12141,7 +12195,7 @@ const Cell = function Cell(props) {
   }, [isIndicatorVisible, isLastRow]);
   const className = cn('[&>[data-taco="tag"]]:-my-0.5', {
     'border-b': !isLastRow,
-    'sticky z-[1]': isPinned,
+    'sticky z-[1]': isFrozen,
     // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
     'bg-white': !isActiveRow && !isSelected,
     'group-hover/row:bg-grey-100': !isActiveRow && !isSelected && !meta.shouldPauseHoverState,
@@ -12150,10 +12204,10 @@ const Cell = function Cell(props) {
     '!wcag-blue-500': isDragging,
     '[&>*]:!grayscale [&_.bg-white]:!bg-grey-100': !isEditingThisRow && isHoveringThisRowWhileEditing,
     '!bg-red-100': hasValidationErrorsInRow,
-    'z-[1]': isPinned && isActiveRow,
+    'z-[1]': isFrozen && isActiveRow,
     // First column should have higher z-index so that row indicator always show on top of the cell
-    // control components.
-    'z-[2]': isPinned && isActiveRow && index === 0,
+    // control components. A z-index of 3, will show the indicator when columns are pinned.
+    'z-[3]': isFrozen && isActiveRow && index === 0,
     'border-blue !border-y-2 border-x-0': isIndicatorVisible,
     'border-l-2 rounded-l': isIndicatorVisible && index === 0,
     'border-r-2 rounded-r': isIndicatorVisible && index === lastColumnIndex
@@ -12193,9 +12247,6 @@ const Cell = function Cell(props) {
     role: 'cell'
   };
   const [detailModeEditing, setDetailModeEditing] = React__default.useState(false);
-  const detailModeClassName = cn({
-    '!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing
-  });
   // reset the editing state when we move column
   React__default.useEffect(() => {
     if (meta.editMode.columnIndex !== index) {
@@ -12234,6 +12285,9 @@ const Cell = function Cell(props) {
         }
       }
     };
+    attributes.onBlur = () => {
+      setDetailModeEditing(false);
+    };
     if (canEditThisCell) {
       var _allFocussableColumnI, _allFocussableColumnI2;
       const firstDataColumnIndex = (_allFocussableColumnI = allFocussableColumnIndexes.at(0)) !== null && _allFocussableColumnI !== void 0 ? _allFocussableColumnI : 0;
@@ -12253,18 +12307,24 @@ const Cell = function Cell(props) {
             if (!detailModeEditing) {
               var _input$setSelectionRa, _input$value, _input$value2;
               (_input$setSelectionRa = input.setSelectionRange) === null || _input$setSelectionRa === void 0 ? void 0 : _input$setSelectionRa.call(input, (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.length, (_input$value2 = input.value) === null || _input$value2 === void 0 ? void 0 : _input$value2.length);
-              setDetailModeEditing(true);
+            } else {
+              var _input$select;
+              input === null || input === void 0 ? void 0 : (_input$select = input.select) === null || _input$select === void 0 ? void 0 : _input$select.call(input);
             }
+            setDetailModeEditing(!detailModeEditing);
             return;
           }
+          // Datepicker doesn't have keydown event handler its value doesn't change when user types inside
+          // datepicker input, so we need to explicitly enable detail editing mode on typing any alphanumeric
+          // character
+          if (control !== null && control !== void 0 && control.closest('[data-taco="datepicker"]') && /^[a-z0-9]$/i.test(event.key)) {
+            setDetailModeEditing(true);
+          }
         }
         // Don't exit edit mode if the target of the escape isn't a child of the cell (e.g. if its a popover).
         if (event.key === 'Escape' && event.currentTarget.contains(control)) {
           event.preventDefault();
-          const input = control;
           if (detailModeEditing) {
-            var _input$select;
-            input === null || input === void 0 ? void 0 : (_input$select = input.select) === null || _input$select === void 0 ? void 0 : _input$select.call(input);
             setDetailModeEditing(false);
           } else {
             var _tableRef$current3;
@@ -12347,7 +12407,7 @@ const Cell = function Cell(props) {
       };
     }
     return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), /*#__PURE__*/React__default.createElement(EditingCell, {
-      detailModeClassName: detailModeClassName,
+      detailModeEditing: detailModeEditing,
       cell: cell,
       cellRef: internalRef,
       columnIndex: index,
@@ -12358,7 +12418,12 @@ const Cell = function Cell(props) {
       tableRef: tableRef,
       ref: controlRef,
       rowValues: rows[rowIndex].original,
-      rowsLength: rows.length
+      rowsLength: rows.length,
+      enableDetailModeEditing: () => {
+        if (!detailModeEditing) {
+          setDetailModeEditing(true);
+        }
+      }
     }));
   } else {
     if (meta.onRowClick) {
@@ -12379,13 +12444,14 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     cell,
     cellRef,
     columnIndex,
-    detailModeClassName,
+    detailModeEditing,
     isEditingThisCell = false,
     onSave: handleSave,
     rowIndex,
     rowValues,
     table,
-    tableRef
+    tableRef,
+    enableDetailModeEditing
   } = props;
   const {
     editMode: {
@@ -12410,6 +12476,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   const hasValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;
   // On each save, the initialValue will be set to the new value of the cell
   const initialValue = React__default.useRef(value);
+  const stateReset = React__default.useRef(false);
   // It is important that we let consumers pass a newValue as an argument because when setState is called before
   // onBlur then saveIfChanged method gets the stale state value. This happens because the rerender hasn't happened
   // before the saveIfChanged method is called.
@@ -12470,15 +12537,39 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   const pinnedColumnsWidth = React__default.useMemo(() => {
     const pinnedColumns = table.getState().columnPinning.left;
     if (Array.isArray(pinnedColumns) && pinnedColumns.length > 0) {
-      const lastPinnedColumn = pinnedColumns[pinnedColumns.length - 1];
-      const lastPinnedColumnOffset = meta.columnOffsets[lastPinnedColumn];
-      if (lastPinnedColumnOffset !== undefined) {
+      const lastFrozenColumn = pinnedColumns[pinnedColumns.length - 1];
+      const lastFrozenColumnOffset = meta.columnOffsets[lastFrozenColumn];
+      if (lastFrozenColumnOffset !== undefined) {
         var _table$getState$colum;
-        return lastPinnedColumnOffset + ((_table$getState$colum = table.getState().columnSizing[lastPinnedColumn]) !== null && _table$getState$colum !== void 0 ? _table$getState$colum : 0);
+        return lastFrozenColumnOffset + ((_table$getState$colum = table.getState().columnSizing[lastFrozenColumn]) !== null && _table$getState$colum !== void 0 ? _table$getState$colum : 0);
       }
     }
     return 0;
   }, [meta.columnOffsets, table.getState().columnSizing]);
+  React__default.useEffect(() => {
+    if (hasChanged(initialValue.current, state)) {
+      var _controlRef$current2;
+      // For an input we want to make sure that if the value is changed then we go into detail mode, so that
+      // arrow keys doesn't trigger the quick mode shortcuts.
+      if (((_controlRef$current2 = controlRef.current) === null || _controlRef$current2 === void 0 ? void 0 : _controlRef$current2.nodeName) === 'INPUT') {
+        enableDetailModeEditing();
+      }
+      showIndicator();
+    } else {
+      hideIndicator();
+    }
+    return hideIndicator;
+  }, [state]);
+  // This effect makes sure we select the input control value when escape key is pressed
+  React__default.useEffect(() => {
+    var _controlRef$current3, _controlRef$current4;
+    const isControlInput = ((_controlRef$current3 = controlRef.current) === null || _controlRef$current3 === void 0 ? void 0 : _controlRef$current3.nodeName) === 'INPUT' && ((_controlRef$current4 = controlRef.current) === null || _controlRef$current4 === void 0 ? void 0 : _controlRef$current4.getAttribute('data-inline-editing-component')) === 'true';
+    if (stateReset.current && isControlInput) {
+      var _controlRef$current5;
+      (_controlRef$current5 = controlRef.current) === null || _controlRef$current5 === void 0 ? void 0 : _controlRef$current5.select();
+    }
+    stateReset.current = false;
+  }, [stateReset.current]);
   const handleFocus = event => {
     var _event$target, _cellRef$current;
     meta.editMode.setColumn(columnIndex);
@@ -12494,14 +12585,17 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
       (_tableRef$current4 = tableRef.current) === null || _tableRef$current4 === void 0 ? void 0 : _tableRef$current4.scrollTo(leftOffset - pinnedColumnsWidth, tableRef.current.scrollTop);
     }
   };
-  React__default.useEffect(() => {
-    if (hasChanged(initialValue.current, state)) {
-      showIndicator();
-    } else {
-      hideIndicator();
+  // In order to reset the value of an input when escape key is pressed this keydown handler is required.
+  // Instead of adding this event handler in parent component, this handler is added here because we have access
+  // to the state handler of the control component.
+  const handleKeyDown = event => {
+    const control = event.target;
+    const isControlInput = control.nodeName === 'INPUT' && (control === null || control === void 0 ? void 0 : control.getAttribute('data-inline-editing-component')) === 'true';
+    if (isControlInput && event.key === 'Escape') {
+      setState(initialValue.current);
+      stateReset.current = true;
     }
-    return hideIndicator;
-  }, [state]);
+  };
   const showIndicator = () => {
     var _table$getState$sorti;
     let willRowMoveReason = null;
@@ -12550,6 +12644,9 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   const className = cn(getCellAlignmentClasses((_cell$column$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.align));
   const indicatorMountNode = (_cellRef$current2 = cellRef.current) === null || _cellRef$current2 === void 0 ? void 0 : (_cellRef$current2$par = _cellRef$current2.parentElement) === null || _cellRef$current2$par === void 0 ? void 0 : _cellRef$current2$par.querySelector(':first-child');
   let controlComponent;
+  const detailModeClassName = cn({
+    '!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing
+  });
   if (cellControl) {
     if (typeof cellControl === 'function') {
       controlComponent = cellControl({
@@ -12559,14 +12656,15 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
         ref: controlRef,
         setValue: setState,
         value: state,
-        'data-inline-editing-component': 'true',
-        className: detailModeClassName
+        'data-inline-editing-component': 'true'
       }, cell.row.original);
     } else {
       switch (cellControl) {
         case 'datepicker':
           controlComponent = /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
-            className: detailModeClassName,
+            className: cn({
+              '[&_input]:!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing
+            }),
             invalid: hasValidationError,
             onBlur: event => {
               const newDate = event.detail;
@@ -12595,7 +12693,8 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
               setState(event.target.value);
             },
             ref: controlRef,
-            value: String(state !== null && state !== void 0 ? state : '')
+            value: String(state !== null && state !== void 0 ? state : ''),
+            onKeyDown: handleKeyDown
           }));
           break;
       }
@@ -12613,7 +12712,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
 }));
 
 const Header$1 = function Header(props) {
-  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8;
+  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8, _header$column$column9;
   const {
     header,
     index,
@@ -12623,11 +12722,14 @@ const Header$1 = function Header(props) {
     ...columnProps
   } = props;
   const textRef = React__default.useRef(null);
-  const pinned = !!header.column.getIsPinned();
+  const frozen = !!header.column.getIsPinned();
   const isOtherColumnBeingResized = table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;
+  const {
+    enableColumnFreezing
+  } = table.options.meta;
   const className = cn('group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]', {
     'z-[6]': header.column.getIsResizing(),
-    'z-[7]': pinned,
+    'z-[7]': frozen,
     'cursor-pointer select-none': header.column.getCanSort(),
     'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.menu),
     'pointer-events-none': isOtherColumnBeingResized
@@ -12639,7 +12741,7 @@ const Header$1 = function Header(props) {
       const size = Math.ceil(node.getBoundingClientRect().width);
       table.setColumnSizing(sizes => ({
         ...sizes,
-        [header.id]: !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size
+        [header.id]: !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size
       }));
     }
   };
@@ -12663,7 +12765,7 @@ const Header$1 = function Header(props) {
         ...sizes
       };
       if (size) {
-        nextSizes[header.id] = !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
+        nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
       } else {
         delete nextSizes[header.id];
       }
@@ -12696,7 +12798,7 @@ const Header$1 = function Header(props) {
     ref: refCallback,
     role: "columnheader",
     "data-column-index": index
-  }), isInternalColumn(header.id) ? reactTable$1.flexRender(header.column.columnDef.header, header.getContext()) : /*#__PURE__*/React__default.createElement("div", {
+  }), isInternalFrozenColumn(header.id) ? reactTable$1.flexRender(header.column.columnDef.header, header.getContext()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: cn('flex flex-grow overflow-hidden', {
       'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!((_header$column$column4 = header.column.columnDef.meta) !== null && _header$column$column4 !== void 0 && _header$column$column4.menu)
     }, getCellAlignmentClasses((_header$column$column5 = header.column.columnDef.meta) === null || _header$column$column5 === void 0 ? void 0 : _header$column$column5.align))
@@ -12712,9 +12814,12 @@ const Header$1 = function Header(props) {
       name: "chevron-down-solid",
       className: "pointer-events-none -my-0.5"
     })
-  }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), (_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
-    header: header
-  }) : null, header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
+  }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), (_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu || enableColumnFreezing ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
+    menu: (_header$column$column9 = header.column.columnDef.meta) === null || _header$column$column9 === void 0 ? void 0 : _header$column$column9.menu,
+    enableColumnFreezing: enableColumnFreezing,
+    table: table,
+    columnIndex: index
+  }) : null), header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
     placement: "top",
     title: "Resize column"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -12736,26 +12841,84 @@ const Header$1 = function Header(props) {
   }))) : null);
 };
 const HeaderMenu = ({
-  header
+  menu,
+  enableColumnFreezing,
+  table,
+  columnIndex
 }) => {
   const [open, setOpen] = React__default.useState(false);
+  const {
+    texts
+  } = useLocalization();
+  const {
+    frozenColumnsCount,
+    setFrozenColumnsCount
+  } = table.options.meta;
+  const columns = table.getAllLeafColumns();
+  const {
+    columnVisibility,
+    columnOrder
+  } = table.getState();
+  const visibleInternalColumnsCount = React__default.useMemo(() => columns.filter(column => isInternalFrozenColumn(column.id)).length, [columns]);
+  const columnPosition = columnIndex + 1;
+  const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;
+  const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;
+  const freeAllColumns = () => {
+    setFrozenColumnsCount(0);
+  };
+  const freezeColumns = () => {
+    setFrozenColumnsCount(externalFrozenColumnsCount);
+  };
   const className = cn('-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex', {
     '!flex': open
   });
-  return header.column.columnDef.meta ?
-  /*#__PURE__*/
-  // This div catches the mousedown events from menu item and menu trigger and prevents
-  // mousedown event from bubbling up to the Header component to prevent toggling sorting
-  React__default.createElement("div", {
-    onMouseDown: event => event.stopPropagation()
-  }, header.column.columnDef.meta.menu({
+  const freezeMenuItems = [/*#__PURE__*/React__default.createElement(Menu$1.Item, {
+    icon: "column-freeze",
+    onClick: freezeColumns,
+    key: "_freeze-columns_"
+  }, texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)), ...(isSomeExternalColumnFrozen ? [/*#__PURE__*/React__default.createElement(Menu$1.Item, {
+    icon: "column-unfreeze",
+    onClick: freeAllColumns,
+    key: "_unfreeze-columns_"
+  }, texts.table2.columns.menu.unfreezeColumns)] : [])];
+  React__default.useEffect(() => {
+    // Update column pinning/freezing whenever frozen columns count changes, or column order or visiblity changes
+    const totalFrozenColumnsCount = visibleInternalColumnsCount + frozenColumnsCount;
+    table.setColumnPinning({
+      left: columns.slice(0, totalFrozenColumnsCount).map(column => column.id),
+      right: []
+    });
+  }, [frozenColumnsCount, columnVisibility, columnOrder, visibleInternalColumnsCount]);
+  const menuProps = {
     trigger: /*#__PURE__*/React__default.createElement(IconButton, {
       className: className,
       icon: "more"
     }),
     open: open,
     onChange: setOpen
-  })) : null;
+  };
+  let menuComponent = null;
+  if (menu) {
+    menuComponent = menu(menuProps);
+    if (enableColumnFreezing) {
+      const menuContent = React__default.Children.only(menuComponent.props.children);
+      const menuContentChildren = React__default.Children.toArray(menuContent.props.children);
+      const menuItemsWithFreezingItems = [...menuContentChildren, /*#__PURE__*/React__default.createElement(Menu$1.Separator, null), ...freezeMenuItems];
+      const menuContentWithFreezingItems = /*#__PURE__*/React__default.createElement(Menu$1.Content, null, menuItemsWithFreezingItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
+        key
+      })));
+      menuComponent = /*#__PURE__*/React__default.cloneElement(menuComponent, {
+        children: menuContentWithFreezingItems
+      });
+    }
+  } else if (enableColumnFreezing) {
+    menuComponent = /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, freezeMenuItems));
+  }
+  // This div catches the mousedown events from menu item and menu trigger and prevents
+  // mousedown event from bubbling up to the Header component to prevent toggling sorting
+  return menuComponent ? /*#__PURE__*/React__default.createElement("div", {
+    onMouseDown: event => event.stopPropagation()
+  }, menuComponent) : null;
 };
 
 const Footer$3 = function Footer(props) {
@@ -12766,9 +12929,9 @@ const Footer$3 = function Footer(props) {
     table,
     ...columnProps
   } = props;
-  const isPinned = !!footer.column.getIsPinned();
+  const isFrozen = !!footer.column.getIsPinned();
   const className = cn('group/header sticky bottom-0 bg-white border-t-2 relative', getCellSizingClasses('normal'), {
-    'z-[1]': isPinned
+    'z-[1]': isFrozen
   }, props.className);
   return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
     // base props
@@ -12790,9 +12953,9 @@ function useColumnDefinitions(children, options, tableRef) {
   const columnHelper = reactTable$1.createColumnHelper();
   return React__default.useMemo(() => {
     var _options$actionsForRo;
+    let internalFrozenColumnCount = 0;
     // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved
     const columns = [];
-    const defaultColumnPinning = [];
     const defaultColumnSizing = {};
     const defaultColumnVisibility = {};
     const defaultSorting = [];
@@ -12800,9 +12963,6 @@ function useColumnDefinitions(children, options, tableRef) {
     React__default.Children.toArray(children).filter(child => !!child).forEach(child => {
       if ( /*#__PURE__*/React__default.isValidElement(child)) {
         var _child$props$minWidth;
-        if (child.props.defaultPinned && options.enableColumnPinning) {
-          defaultColumnPinning.push(child.props.accessor);
-        }
         if (child.props.defaultWidth) {
           defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;
         }
@@ -12861,22 +13021,22 @@ function useColumnDefinitions(children, options, tableRef) {
     });
     if (options.enableRowExpansion && options.expandedRowRenderer) {
       columns.unshift(columnHelper.display(createRowExpansionColumn(options.expandedRowRenderer, texts)));
-      defaultColumnPinning.unshift(COLUMN_ID_FOR_EXPANSION);
+      internalFrozenColumnCount++;
     }
     if (options.enableRowSelection) {
       columns.unshift(columnHelper.display(createRowSelectionColumn(options.enableMultipleRowSelection, lastSelectedRowIndex, options.onRowDrag, tableRef, texts)));
-      defaultColumnPinning.unshift(COLUMN_ID_FOR_SELECTION);
+      internalFrozenColumnCount++;
     }
     if (options.onRowDrag) {
       columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));
-      defaultColumnPinning.unshift(COLUMN_ID_FOR_DRAGGABLE);
+      internalFrozenColumnCount++;
     }
     if ((_options$actionsForRo = options.actionsForRow) !== null && _options$actionsForRo !== void 0 && _options$actionsForRo.length) {
       columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));
     }
     return {
       columns,
-      defaultColumnPinning,
+      internalFrozenColumnCount,
       defaultColumnSizing,
       defaultColumnVisibility,
       defaultSorting,
@@ -12891,15 +13051,18 @@ const getSortingFn = dataType => {
   return 'auto';
 };
 
-// pinned columns have position sticky, and because we support more than one of them
+// frozen columns have position sticky, and because we support more than one of them
 // we must set a 'left' css value. this hook listens to changes on state that will
-// affect the left offset (resize, visibility, pinning) and updates offsets based on width
+// affect the left offset (resize, visibility, freezing) and updates offsets based on width
 const useColumnOffsetStateListener = (table, setColumnOffsets) => {
   const {
     columnOrder,
     columnSizingInfo,
     columnVisibility
   } = table.getState();
+  const {
+    frozenColumnsCount
+  } = table.options.meta;
   React__default.useEffect(() => {
     const offsets = {};
     // store left offsets for each visible column
@@ -12908,7 +13071,7 @@ const useColumnOffsetStateListener = (table, setColumnOffsets) => {
       return offset + column.getSize();
     }, 0);
     setColumnOffsets(offsets);
-  }, [columnOrder, columnSizingInfo, columnVisibility]);
+  }, [columnOrder, columnSizingInfo, columnVisibility, frozenColumnsCount]);
 };
 
 const useRowSelectionListener = (table, onRowSelect) => {
@@ -12933,16 +13096,16 @@ const useSettingsStateListener = (table, onChangeSettings) => {
       handler = setTimeout(() => onChangeSettings({
         columnFilters: state.columnFilters,
         columnOrder: state.columnOrder,
-        columnPinning: state.columnPinning,
         columnSizing: state.columnSizing,
         columnVisibility: state.columnVisibility,
+        frozenColumnCount: meta.frozenColumnsCount,
         globalFilter: state.globalFilter,
         rowDensity: meta.rowDensity,
         sorting: state.sorting
       }), 250);
     }
     return () => clearTimeout(handler);
-  }, [state.columnFilters, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, state.globalFilter, meta.rowDensity, state.sorting]);
+  }, [state.columnFilters, state.columnOrder, meta.frozenColumnsCount, state.columnSizing, state.columnVisibility, state.globalFilter, meta.rowDensity, state.sorting]);
 };
 
 const useActiveRow = (defaultActiveRowIndex = 0) => {
@@ -12990,14 +13153,14 @@ const useActiveRowStateListener = (table, rows, activeRowIndex) => {
 };
 
 function useTable$1(children, props, ref) {
-  var _settings$columnOrder, _ref, _settings$columnPinni, _settings$columnPinni2, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
+  var _settings$frozenColum, _settings$columnOrder, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
   const {
     actionsForRow = [],
     data,
     defaultActiveRowIndex,
     disableColumnFiltering = false,
     disableColumnHiding = false,
-    disableColumnPinning = false,
+    disableColumnFreezing = false,
     disableColumnReordering = false,
     disableColumnResizing = false,
     disableRowDensity = false,
@@ -13024,7 +13187,7 @@ function useTable$1(children, props, ref) {
   const enableMultipleRowSelection = !disableMultipleRowSelection && enableRowSelection;
   const {
     columns,
-    defaultColumnPinning,
+    internalFrozenColumnCount,
     defaultColumnSizing,
     defaultSorting,
     defaultColumnVisibility,
@@ -13033,7 +13196,7 @@ function useTable$1(children, props, ref) {
     actionsForRow,
     enableColumnFiltering: !disableColumnFiltering,
     enableColumnHiding: !disableColumnHiding,
-    enableColumnPinning: !disableColumnPinning,
+    enableColumnFreezing: !disableColumnFreezing,
     enableRowExpansion,
     enableRowSelection,
     enableMultipleRowSelection,
@@ -13041,11 +13204,13 @@ function useTable$1(children, props, ref) {
     onRowDrag
   }, ref);
   const lastSortedOrFilteredRows = React__default.useRef(null);
+  const totalFrozenColumns = internalFrozenColumnCount + ((_settings$frozenColum = settings === null || settings === void 0 ? void 0 : settings.frozenColumnCount) !== null && _settings$frozenColum !== void 0 ? _settings$frozenColum : 0);
+  const frozenColumns = columns.slice(0, totalFrozenColumns).map(column => column.id);
   // defaults
   const initialState = {
     columnOrder: (_settings$columnOrder = settings === null || settings === void 0 ? void 0 : settings.columnOrder) !== null && _settings$columnOrder !== void 0 ? _settings$columnOrder : columns.map(column => column.id),
     columnPinning: {
-      left: (_ref = (_settings$columnPinni = settings === null || settings === void 0 ? void 0 : (_settings$columnPinni2 = settings.columnPinning) === null || _settings$columnPinni2 === void 0 ? void 0 : _settings$columnPinni2.left) !== null && _settings$columnPinni !== void 0 ? _settings$columnPinni : defaultColumnPinning) !== null && _ref !== void 0 ? _ref : [],
+      left: frozenColumns,
       right: []
     },
     columnSizing: (_settings$columnSizin = settings === null || settings === void 0 ? void 0 : settings.columnSizing) !== null && _settings$columnSizin !== void 0 ? _settings$columnSizin : defaultColumnSizing,
@@ -13063,6 +13228,8 @@ function useTable$1(children, props, ref) {
   const [dragging, setDragging] = React__default.useState({});
   const [shouldPauseSortingAndFiltering, setShouldPauseSortingAndFiltering] = React__default.useState(false);
   const [shouldDisableTableActions, setShouldDisableTableActions] = React__default.useState(false);
+  // Frozen column count is the count of external columns that are frozen
+  const [frozenColumnsCount, setFrozenColumnsCount] = React__default.useState(totalFrozenColumns - internalFrozenColumnCount);
   // For some reason, using state instead of ref didn't work as expected, that's why ref is used
   const focussableColumnIndexes = React__default.useRef([]);
   // some options get set even if they are undefined, so we have to do it conditionally
@@ -13072,7 +13239,7 @@ function useTable$1(children, props, ref) {
     enableColumnResizing: !disableColumnResizing,
     enableGlobalFilter: !disableSearch,
     enableHiding: !disableColumnHiding,
-    enablePinning: !disableColumnPinning,
+    enablePinning: !disableColumnFreezing,
     enableRowSelection: enableRowSelection,
     enableMultiRowSelection: enableMultipleRowSelection,
     enableSorting: !disableSorting
@@ -13133,9 +13300,13 @@ function useTable$1(children, props, ref) {
       dragging,
       setDragging,
       // computed
+      enableColumnFreezing: !disableColumnFreezing,
       enableColumnReordering: !disableColumnReordering,
+      enableColumnHiding: !disableColumnHiding,
       shouldPauseHoverState,
       setShouldPauseHoverState,
+      frozenColumnsCount,
+      setFrozenColumnsCount,
       // resorting
       shouldPauseSortingAndFiltering,
       setShouldPauseSortingAndFiltering,
@@ -13333,6 +13504,10 @@ function Container(externalProps) {
 }
 Container.displayName = 'SortableContainer';
 
+const isFormElement = element => {
+  const formElementNodeNames = ['BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'FIELDSET'];
+  return formElementNodeNames.includes(element.nodeName);
+};
 function Item$3(props) {
   const {
     asChild,
@@ -13356,7 +13531,7 @@ function Item$3(props) {
   };
   const onPointerDown = event => {
     // allow form components, like checkboxes, to be active
-    if (event.target === event.currentTarget) {
+    if (event.currentTarget.contains(event.target) && !isFormElement(event.target)) {
       listeners === null || listeners === void 0 ? void 0 : listeners.onPointerDown(event);
     }
   };
@@ -13396,50 +13571,80 @@ function List$1(externalProps) {
 }
 List$1.displayName = 'SortableList';
 
+const Truncate = ({
+  tooltip,
+  children
+}) => {
+  const ref = React__default.useRef(null);
+  const [mounted, setMounted] = React__default.useState(false);
+  const {
+    truncated
+  } = useTruncated(ref.current, [mounted]);
+  React__default.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  const clonedChildrenWithRef = /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
+    ref,
+    className: cn(children.props.className, 'truncate')
+  });
+  if (truncated) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tooltip
+    }, clonedChildrenWithRef);
+  }
+  return clonedChildrenWithRef;
+};
+
 const OrderableColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var _column$columnDef$hea;
+  var _ref, _column$columnDef$hea, _column$columnDef$hea2;
   const {
     canBeReordered,
     column,
-    isReorderingAllowed,
+    children,
+    isColumnFixed,
     ...attributes
   } = props;
   let icon;
   if (canBeReordered) {
     icon = /*#__PURE__*/React__default.createElement(Icon, {
       name: "drag",
-      className: "text-grey-500 hover:text-grey-700 mr-0.5 -ml-2 -mt-px cursor-move"
+      /** top margin of -3px on Icon, is added to make sure that each OrderableColumn is of 32px height **/
+      className: "text-grey-500 hover:text-grey-700 mr-0.5 -ml-[6px] -mt-[3px] inline-block !h-5 !w-5 cursor-move"
     });
-  } else if (isReorderingAllowed) {
+  } else if (isColumnFixed) {
     icon = /*#__PURE__*/React__default.createElement("span", {
       className: "mr-0.5 inline-flex w-4"
     });
   }
+  // columnName should be a string
+  const columnName = (_ref = (_column$columnDef$hea = (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString()) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id) !== null && _ref !== void 0 ? _ref : '';
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    className: "hover:bg-grey-100 aria-pressed:bg-grey-200 flex w-full items-center justify-between gap-x-2 rounded py-1 px-2 aria-pressed:z-10",
+    className: "hover:bg-grey-100 aria-pressed:bg-grey-200 flex w-full items-center justify-between gap-x-2 rounded py-[6px] px-2 aria-pressed:z-10",
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "pointer-events-none"
-  }, icon, (_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id), column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
-    checked: column.getIsVisible(),
-    onChange: column.toggleVisibility
-  }) : null);
+  }), /*#__PURE__*/React__default.createElement(Truncate, {
+    tooltip: columnName
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "select-none"
+  }, icon, columnName)), children);
 });
 const isOrderingAllowed = (table, column) => {
   var _column$columnDef$met;
   const meta = table.options.meta;
-  if (table.options.enablePinning) {
-    return true;
-  }
   return meta.enableColumnReordering ? !((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.disableReordering) : false;
 };
+const isColumnOrderingDisabled = (table, column) => {
+  var _column$columnDef$met2;
+  const meta = table.options.meta;
+  return meta.enableColumnReordering && !!((_column$columnDef$met2 = column.columnDef.meta) !== null && _column$columnDef$met2 !== void 0 && _column$columnDef$met2.disableReordering);
+};
 const SortableColumnContainer = ({
   state,
   moveColumn,
   reorderColumn,
-  table
+  table,
+  query
 }) => {
-  var _ref;
   const {
     texts
   } = useLocalization();
@@ -13448,7 +13653,7 @@ const SortableColumnContainer = ({
     const draggedColumn = state[listId].find(c => c.id === activeId);
     const targetColumn = state[listId].find(c => c.id === overId);
     if (draggedColumn && targetColumn) {
-      reorderColumn(draggedColumn.id, targetColumn.id, listId === 'pinned');
+      reorderColumn(draggedColumn.id, targetColumn.id, listId === 'visible');
     }
   };
   const move = (activeId, oldListId) => {
@@ -13457,80 +13662,114 @@ const SortableColumnContainer = ({
       moveColumn(column);
     }
   };
-  const handleDoubleClick = (id, status) => table.options.enablePinning ? event => {
-    event.stopPropagation();
-    move(id, status);
-  } : undefined;
-  const isReorderingAllowed = (_ref = meta.enableColumnReordering || table.options.enablePinning) !== null && _ref !== void 0 ? _ref : false;
-  if (!table.options.enablePinning) {
+  const handleColumnCheckboxChange = column => () => {
+    moveColumn === null || moveColumn === void 0 ? void 0 : moveColumn(column);
+    column.toggleVisibility();
+  };
+  const isColumnHidingAllowed = meta.enableColumnHiding;
+  const isQueryFilterNotApplied = query === '';
+  const filteredHiddenColumns = state.hidden.filter(column => {
+    var _column$columnDef$hea3;
+    return (_column$columnDef$hea3 = column.columnDef.header) === null || _column$columnDef$hea3 === void 0 ? void 0 : _column$columnDef$hea3.toString().toLowerCase().includes(query.toLowerCase());
+  });
+  const filteredVisibleColumns = state.visible.filter(column => {
+    var _column$columnDef$hea4;
+    return (_column$columnDef$hea4 = column.columnDef.header) === null || _column$columnDef$hea4 === void 0 ? void 0 : _column$columnDef$hea4.toString().toLowerCase().includes(query.toLowerCase());
+  });
+  const visibleListDescriptionText = isQueryFilterNotApplied ? texts.table2.columnSettings.columnsVisibleDrop : texts.table2.columnSettings.noVisibleColumns;
+  const hiddenListDescriptionText = isQueryFilterNotApplied ? texts.table2.columnSettings.columnsHiddenDrop : texts.table2.columnSettings.noHiddenColumns;
+  if (isColumnHidingAllowed) {
     return /*#__PURE__*/React__default.createElement(Container, {
       reorder: reorder,
       move: move
-    }, /*#__PURE__*/React__default.createElement(List$1, {
-      id: "other",
-      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-x-hidden px-2"
-    }, state.other.map(column => {
-      var _column$columnDef$met2;
-      const canBeReordered = isOrderingAllowed(table, column);
+    }, /*#__PURE__*/React__default.createElement(Truncate, {
+      tooltip: texts.table2.columnSettings.columnsVisible
+    }, /*#__PURE__*/React__default.createElement("h5", {
+      className: "mx-4 my-[6px]"
+    }, texts.table2.columnSettings.columnsVisible)), /*#__PURE__*/React__default.createElement(List$1, {
+      id: "visible",
+      className: "flex min-h-[theme(spacing.8)] flex-col overflow-hidden px-2"
+    }, filteredVisibleColumns.length ? filteredVisibleColumns.map(column => {
+      // When searching a column, we disable reordering and make it fixed
+      const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;
+      const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;
       return /*#__PURE__*/React__default.createElement(Item$3, {
         key: column.id,
-        disabled: (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.disableReordering,
+        disabled: !canBeReordered,
         id: column.id,
         asChild: true
       }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
         canBeReordered: canBeReordered,
         column: column,
-        isReorderingAllowed: isReorderingAllowed,
-        onDoubleClick: handleDoubleClick(column.id, 'other')
-      }));
-    })));
+        isColumnFixed: isColumnFixed
+      }, column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
+        className: "!mt-0",
+        checked: column.getIsVisible(),
+        onChange: handleColumnCheckboxChange(column)
+      }) : null));
+    }) :
+    /*#__PURE__*/
+    // For some reason wrapping this paragraph with Truncate will throw error in scenarios where
+    // we conditionally hide or show the paragraph e.g. moving the last column to the hide list
+    React__default.createElement("p", {
+      className: "text-grey-500 mb-0 flex h-8 items-center truncate px-2"
+    }, visibleListDescriptionText)), /*#__PURE__*/React__default.createElement(Truncate, {
+      tooltip: texts.table2.columnSettings.columnsHidden
+    }, /*#__PURE__*/React__default.createElement("h5", {
+      className: "mx-4 my-[6px] truncate"
+    }, texts.table2.columnSettings.columnsHidden)), /*#__PURE__*/React__default.createElement(List$1, {
+      id: "hidden",
+      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-hidden px-2"
+    }, filteredHiddenColumns.length ? filteredHiddenColumns.map(column => {
+      // When searching a column, we disable reordering and make it fixed
+      const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;
+      const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;
+      return /*#__PURE__*/React__default.createElement(Item$3, {
+        key: column.id,
+        disabled: !canBeReordered,
+        id: column.id,
+        asChild: true
+      }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
+        canBeReordered: canBeReordered,
+        column: column,
+        isColumnFixed: isColumnFixed
+      }, column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
+        className: "!mt-0",
+        checked: column.getIsVisible(),
+        onChange: handleColumnCheckboxChange(column)
+      }) : null));
+    }) :
+    /*#__PURE__*/
+    // For some reason wrapping this paragraph with Truncate will throw error in scenarios where
+    // we conditionally hide or show the paragraph e.g. moving the last column to the visible list
+    React__default.createElement("p", {
+      className: "text-grey-500 mb-0 flex h-8 items-center truncate px-2"
+    }, hiddenListDescriptionText)));
   }
   return /*#__PURE__*/React__default.createElement(Container, {
     reorder: reorder,
     move: move
-  }, /*#__PURE__*/React__default.createElement("h5", {
-    className: "mx-4"
-  }, texts.table2.columnSettings.columnsPinned), /*#__PURE__*/React__default.createElement(List$1, {
-    id: "pinned",
-    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-x-hidden px-2"
-  }, state.pinned.length ? state.pinned.map(column => {
-    var _column$columnDef$met3;
-    const canBeReordered = isOrderingAllowed(table, column);
+  }, /*#__PURE__*/React__default.createElement(List$1, {
+    id: "visible",
+    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-hidden px-2"
+  }, state.visible.length ? state.visible.filter(column => {
+    var _column$columnDef$hea5;
+    return (_column$columnDef$hea5 = column.columnDef.header) === null || _column$columnDef$hea5 === void 0 ? void 0 : _column$columnDef$hea5.toString().toLowerCase().includes(query.toLowerCase());
+  }).map(column => {
+    // When searching a column, we disable reordering and make it fixed
+    const canBeReordered = isOrderingAllowed(table, column) && isQueryFilterNotApplied;
+    const isColumnFixed = isColumnOrderingDisabled(table, column) && isQueryFilterNotApplied;
     return /*#__PURE__*/React__default.createElement(Item$3, {
       key: column.id,
-      disabled: (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.disableReordering,
+      disabled: !canBeReordered,
       id: column.id,
       asChild: true
     }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
       canBeReordered: canBeReordered,
       column: column,
-      isReorderingAllowed: isReorderingAllowed,
-      onDoubleClick: handleDoubleClick(column.id, 'pinned')
+      isColumnFixed: isColumnFixed
     }));
-  }) : /*#__PURE__*/React__default.createElement("p", {
-    className: "text-grey-500 mb-0 flex h-8 items-center px-2"
-  }, texts.table2.columnSettings.columnsPinnedDrop)), /*#__PURE__*/React__default.createElement("h5", {
-    className: "mx-4"
-  }, texts.table2.columnSettings.columnsOther), /*#__PURE__*/React__default.createElement(List$1, {
-    id: "other",
-    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-x-hidden px-2"
-  }, state.other.length ? state.other.map(column => {
-    var _column$columnDef$met4;
-    const canBeReordered = isOrderingAllowed(table, column);
-    return /*#__PURE__*/React__default.createElement(Item$3, {
-      key: column.id,
-      disabled: (_column$columnDef$met4 = column.columnDef.meta) === null || _column$columnDef$met4 === void 0 ? void 0 : _column$columnDef$met4.disableReordering,
-      id: column.id,
-      asChild: true
-    }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
-      canBeReordered: canBeReordered,
-      column: column,
-      isReorderingAllowed: isReorderingAllowed,
-      onDoubleClick: handleDoubleClick(column.id, 'other')
-    }));
-  }) : /*#__PURE__*/React__default.createElement("p", {
-    className: "text-grey-500 mb-0 flex h-8 items-center px-2"
-  }, texts.table2.columnSettings.columnsOtherDrop)));
+  }) : null));
 };
 const reorder = (draggedColumnId, targetColumnId, list = []) => {
   const nextColumnOrder = [...list];
@@ -13546,38 +13785,109 @@ const ColumnSettingsButton = ({
   const [query, setQuery] = React__default.useState('');
   const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
   const [state, setState] = React__default.useState({
-    pinned: columns.filter(column => column.getIsPinned()),
-    other: columns.filter(column => !column.getIsPinned())
+    visible: columns.filter(column => column.getIsVisible()),
+    hidden: columns.filter(column => !column.getIsVisible())
   });
-  const pinColumn = column => {
-    if (state.pinned.find(c => c.id === column.id)) {
-      setState(currentState => ({
-        pinned: currentState.pinned.filter(c => c.id !== column.id),
-        other: [column].concat(...currentState.other)
-      }));
+  const initialOrderedColumns = React__default.useRef(columns);
+  const moveColumnToList = column => {
+    // If column can't hide then don't toggle visiblity
+    if (column.getCanHide()) {
+      column.toggleVisibility();
+    }
+    if (state.visible.find(c => c.id === column.id)) {
+      setState(currentState => {
+        const filteredColumns = currentState.visible.filter(c => c.id !== column.id);
+        if (column.getCanHide()) {
+          const hiddenColumns = [column].concat(...currentState.hidden);
+          // Sort the hidden column so that they follow the initial order of fixed columns
+          const sortedFixedHiddenColumns = hiddenColumns.filter(hiddenColumn => {
+            var _hiddenColumn$columnD;
+            return !!((_hiddenColumn$columnD = hiddenColumn.columnDef.meta) !== null && _hiddenColumn$columnD !== void 0 && _hiddenColumn$columnD.disableReordering);
+          }).sort((colA, colB) => {
+            const indexA = initialOrderedColumns.current.indexOf(colA);
+            const indexB = initialOrderedColumns.current.indexOf(colB);
+            return indexA - indexB;
+          });
+          const reorderableHiddenColumns = hiddenColumns.filter(hiddenColumn => {
+            var _hiddenColumn$columnD2;
+            return !((_hiddenColumn$columnD2 = hiddenColumn.columnDef.meta) !== null && _hiddenColumn$columnD2 !== void 0 && _hiddenColumn$columnD2.disableReordering);
+          });
+          return {
+            visible: filteredColumns,
+            hidden: [...sortedFixedHiddenColumns, ...reorderableHiddenColumns]
+          };
+        }
+        // If column can't hide and it is dragged to hidden column list then move the column to the bottom of
+        // the visible column list
+        return {
+          visible: filteredColumns.concat(column),
+          hidden: currentState.hidden
+        };
+      });
     } else {
-      setState(currentState => ({
-        pinned: currentState.pinned.concat(column),
-        other: currentState.other.filter(c => c.id !== column.id)
-      }));
+      setState(currentState => {
+        let visibleColumns = [];
+        // If ordering is allowed then we don't care about the previous column order
+        if (isOrderingAllowed(table, column)) {
+          visibleColumns = currentState.visible.concat(column);
+        } else {
+          const orderedVisibleColumns = initialOrderedColumns.current.filter(orderedColumn => !state.hidden.find(c => c.id === orderedColumn.id) || orderedColumn.id === column.id).map(({
+            id
+          }) => id);
+          const movedColumnIndex = orderedVisibleColumns.indexOf(column.id);
+          // Index of the column that is moved to visible list
+          // Intial value for the index is the last item in visible list
+          let index = currentState.visible.length;
+          currentState.visible.find((col, colIndex) => {
+            const columnIndex = orderedVisibleColumns.indexOf(col.id);
+            // Index where the moved column should be shown in visible list
+            if (movedColumnIndex < columnIndex) {
+              index = colIndex;
+              return true;
+            }
+            return false;
+          });
+          visibleColumns = currentState.visible.slice(0, index).concat(column).concat(currentState.visible.slice(index));
+        }
+        return {
+          visible: visibleColumns,
+          hidden: currentState.hidden.filter(c => c.id !== column.id)
+        };
+      });
     }
   };
-  const reorderColumn = (draggedColumnId, targetColumnId, pinned) => {
-    if (pinned) {
+  const reorderColumnInList = (draggedColumnId, targetColumnId, isVisible) => {
+    var _columns$find, _columns$find$columnD;
+    const isTargetColumnFixed = !!((_columns$find = columns.find(column => column.id === targetColumnId)) !== null && _columns$find !== void 0 && (_columns$find$columnD = _columns$find.columnDef.meta) !== null && _columns$find$columnD !== void 0 && _columns$find$columnD.disableReordering);
+    if (isVisible) {
+      let firstReorderableVisibleColumnId = targetColumnId;
+      if (isTargetColumnFixed) {
+        var _state$visible$find$i, _state$visible$find;
+        firstReorderableVisibleColumnId = (_state$visible$find$i = (_state$visible$find = state.visible.find(visibleColumn => {
+          var _visibleColumn$column;
+          return !((_visibleColumn$column = visibleColumn.columnDef.meta) !== null && _visibleColumn$column !== void 0 && _visibleColumn$column.disableReordering);
+        })) === null || _state$visible$find === void 0 ? void 0 : _state$visible$find.id) !== null && _state$visible$find$i !== void 0 ? _state$visible$find$i : targetColumnId;
+      }
       setState(currentState => ({
         ...currentState,
-        pinned: reorder(draggedColumnId, targetColumnId, currentState.pinned)
+        visible: reorder(draggedColumnId, firstReorderableVisibleColumnId, currentState.visible)
       }));
     } else {
+      let firstReorderableHiddenColumnId = targetColumnId;
+      if (isTargetColumnFixed) {
+        var _state$hidden$find$id, _state$hidden$find;
+        firstReorderableHiddenColumnId = (_state$hidden$find$id = (_state$hidden$find = state.hidden.find(visibleColumn => {
+          var _visibleColumn$column2;
+          return !((_visibleColumn$column2 = visibleColumn.columnDef.meta) !== null && _visibleColumn$column2 !== void 0 && _visibleColumn$column2.disableReordering);
+        })) === null || _state$hidden$find === void 0 ? void 0 : _state$hidden$find.id) !== null && _state$hidden$find$id !== void 0 ? _state$hidden$find$id : targetColumnId;
+      }
       setState(currentState => ({
         ...currentState,
-        other: reorder(draggedColumnId, targetColumnId, currentState.other)
+        hidden: reorder(draggedColumnId, firstReorderableHiddenColumnId, currentState.hidden)
       }));
     }
   };
-  // probably a more elegant way to do this without local state but had
-  // a range of issues using the native apis directly
-  React__default.useEffect(() => {
+  const changeColumnOrder = newColumnOrder => {
     const internals = [];
     if (table.options.enableRowSelection) {
       internals.push(COLUMN_ID_FOR_SELECTION);
@@ -13585,14 +13895,42 @@ const ColumnSettingsButton = ({
     if (table.options.enableExpanding) {
       internals.push(COLUMN_ID_FOR_EXPANSION);
     }
-    table.setColumnPinning({
-      left: internals.concat(...state.pinned.map(c => c.id))
-    });
-    table.setColumnOrder(internals.concat([...state.pinned, ...state.other].map(c => c.id)));
+    table.setColumnOrder(internals.concat(newColumnOrder.map(c => c.id)));
+  };
+  // probably a more elegant way to do this without local state but had
+  // a range of issues using the native apis directly
+  React__default.useEffect(() => {
+    changeColumnOrder([...state.visible, ...state.hidden]);
   }, [state]);
-  return /*#__PURE__*/React__default.createElement(IconButton, {
+  // This effect moves up all fixed/unorderable columns before orderable columns.
+  // For custom column order, the fixed/unorderable columns will also move up before orderable columns.
+  // The order between all fixed/unorderable column items, and all orderable column items will be same as it was
+  // specified by the consumer.
+  React__default.useEffect(() => {
+    const orderableColumns = [];
+    const fixedColumns = [];
+    columns.forEach(column => {
+      var _column$columnDef$met3;
+      const isColumnFixed = !!((_column$columnDef$met3 = column.columnDef.meta) !== null && _column$columnDef$met3 !== void 0 && _column$columnDef$met3.disableReordering);
+      if (isColumnFixed) {
+        fixedColumns.push(column);
+      } else {
+        orderableColumns.push(column);
+      }
+    });
+    const newOrderedColumns = [...fixedColumns, ...orderableColumns];
+    // Changes order in the table
+    changeColumnOrder(newOrderedColumns);
+    // Changes order in the column settings button popover
+    setState({
+      visible: newOrderedColumns.filter(column => column.getIsVisible()),
+      hidden: newOrderedColumns.filter(column => !column.getIsVisible())
+    });
+    // update initial column order
+    initialOrderedColumns.current = newOrderedColumns;
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Button$1, {
     "aria-label": texts.table2.columnSettings.tooltip,
-    icon: "columns",
     popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
       align: "end"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -13602,25 +13940,18 @@ const ColumnSettingsButton = ({
       placeholder: texts.table2.columnSettings.search,
       value: query
     }) : null, /*#__PURE__*/React__default.createElement("div", {
-      className: "-ml-4 -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.8))] overflow-auto"
-    }, query ? /*#__PURE__*/React__default.createElement("div", {
-      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px overflow-x-hidden px-2"
-    }, columns.filter(column => {
-      var _column$columnDef$hea2;
-      return (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString().toLowerCase().includes(query.toLowerCase());
-    }).map(column => /*#__PURE__*/React__default.createElement(OrderableColumn, {
-      key: column.id,
-      canBeReordered: false,
-      column: column,
-      isReorderingAllowed: false
-    }))) : /*#__PURE__*/React__default.createElement(SortableColumnContainer, {
+      className: "-ml-[calc(theme(spacing.4)_-_2px)] -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.7)_-_1px)] overflow-auto"
+    }, /*#__PURE__*/React__default.createElement(SortableColumnContainer, {
       state: state,
-      moveColumn: pinColumn,
-      reorderColumn: reorderColumn,
-      table: table
+      moveColumn: moveColumnToList,
+      reorderColumn: reorderColumnInList,
+      table: table,
+      query: query
     }))))),
     tooltip: texts.table2.columnSettings.tooltip
-  });
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "columns"
+  }), texts.table2.columnSettings.button);
 };
 
 const ExpandedRow = ({
@@ -13645,6 +13976,9 @@ const ExpandedRow = ({
       });
     }
   }, []);
+  if (props.children === null || props.children === undefined) {
+    return null;
+  }
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: "border-grey-300 bg-grey-50 col-span-full border-b p-4"
   }, props, {
@@ -14275,6 +14609,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
   } = props;
   const tableRef = useMergedRef(ref);
   const timeoutIdRef = React__default.useRef();
+  const prevScrollY = React__default.useRef(0);
   // react-table
   const {
     rows,
@@ -14445,15 +14780,26 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
             } else {
               const _temp3 = function () {
                 if (typeof loadMore === 'function') {
+                  const scrollY = event.currentTarget.scrollTop;
+                  const isVerticalScrolling = scrollY !== prevScrollY.current;
+                  prevScrollY.current = scrollY;
                   const _temp2 = function () {
-                    if (event.currentTarget.scrollHeight - event.currentTarget.scrollTop - event.currentTarget.clientHeight < 600 && !loadingRef.current) {
+                    if (
+                    // This condition will also prevent triggering of loadMore function when scrolled upwards
+                    event.currentTarget.scrollHeight - event.currentTarget.scrollTop - event.currentTarget.clientHeight < 600 && !loadingRef.current &&
+                    // We don't want to trigger loadMore function on horizontal scrolling
+                    isVerticalScrolling) {
                       const _temp = _finallyRethrows(function () {
-                        const isAllRowsSelected = table.getIsAllRowsSelected();
-                        loadingRef.current = true;
-                        return Promise.resolve(loadMore()).then(function () {
-                          if (isAllRowsSelected) {
-                            table.toggleAllRowsSelected(true);
-                          }
+                        return _catch(function () {
+                          const isAllRowsSelected = table.getIsAllRowsSelected();
+                          loadingRef.current = true;
+                          return Promise.resolve(loadMore()).then(function () {
+                            if (isAllRowsSelected) {
+                              table.toggleAllRowsSelected(true);
+                            }
+                          });
+                        }, function (error) {
+                          console.error(error);
                         });
                       }, function (_wasThrown, _result) {
                         loadingRef.current = false;
@@ -14483,7 +14829,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     handleMouseLeave = () => meta.setShouldPauseHoverState(false);
   }
   const className = cn('bg-white border border-grey-300 focus:yt-focus focus:border-blue-500 grid auto-rows-max overflow-auto relative rounded group', props.className);
-  const enableSettingsButton = table.options.enablePinning || table.options.enableHiding || meta.enableColumnReordering;
+  const enableSettingsButton = table.options.enableHiding || meta.enableColumnReordering;
   const hasInternalToolbar = enableSettingsButton || meta.editMode.enableEditMode || table.options.enableColumnFilters || meta.enableRowDensity || table.options.enableGlobalFilter;
   const hasToolbar = hasInternalToolbar || !!toolbarLeft || !toolbarRight;
   const hasFooters = React__default.useMemo(() => {
@@ -15639,6 +15985,7 @@ exports.VisuallyHidden = VisuallyHidden;
 exports.WindowedTable = WindowedTable;
 exports.convertRowIndexPathToNumberArray = convertRowIndexPathToNumberArray;
 exports.defaultLocalisationTexts = defaultLocalisationTexts;
+exports.defaultLocalizationContext = defaultLocalizationContext;
 exports.findByValue = findByValue$1;
 exports.format = format;
 exports.getByRowIndexPath = getByRowIndexPath;