@shival99/z-ui 2.6.5 → 2.6.7

package/fesm2022/shival99-z-ui-components-z-table.mjs

@@ -21,7 +21,7 @@ import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
 import { ZSafeHtmlPipe, ZFormatNumPipe } from '@shival99/z-ui/pipes';
 import { ZTranslateService, ZCacheService } from '@shival99/z-ui/services';
 import { ZExcelService } from '@shival99/z-ui/services/excel';
-import { zMergeClasses } from '@shival99/z-ui/utils';
+import { zMergeClasses, zCreateDestroySafeTimeout } from '@shival99/z-ui/utils';
 import { tableFeatures, createSortedRowModel, createPaginatedRowModel, createFilteredRowModel, createFacetedUniqueValues, createFacetedRowModel, createFacetedMinMaxValues, createExpandedRowModel, stockFeatures, injectTable, FlexRenderDirective } from '@tanstack/angular-table';
 import { injectVirtualizer, defaultRangeExtractor, elementScroll } from '@tanstack/angular-virtual';
 import { NgScrollbar } from 'ngx-scrollbar';
@@ -1790,6 +1790,7 @@ class ZTableEditCellComponent {
           [zDisabled]="cfg().disabled"
           [zReadonly]="cfg().readonly"
           [ngModel]="numericValue()"
+          [ngModelOptions]="{ standalone: true }"
           (ngModelChange)="onValueChange($event)"
           (zOnBlur)="onInputBlur()"
           class="w-full"
@@ -1809,6 +1810,7 @@ class ZTableEditCellComponent {
           [zDisabled]="cfg().disabled"
           [zReadonly]="cfg().readonly"
           [ngModel]="value()"
+          [ngModelOptions]="{ standalone: true }"
           [zPlaceholder]="cfg().placeholder"
           (ngModelChange)="onSelectChange($event)"
           class="w-full min-w-0"
@@ -1830,6 +1832,7 @@ class ZTableEditCellComponent {
           [zReadonly]="cfg().readonly"
           [zPlaceholder]="cfg().placeholder"
           [ngModel]="stringValue()"
+          [ngModelOptions]="{ standalone: true }"
           (zOnCommit)="onAutocompleteCommit($event)"
           (zOnSelect)="onAutocompleteSelect($event)"
           (zOnBlur)="onInputBlur()"
@@ -1851,6 +1854,7 @@ class ZTableEditCellComponent {
           [zLoadingOutline]="true"
           [zPlaceholder]="cfg().placeholder"
           [ngModel]="dateValue()"
+          [ngModelOptions]="{ standalone: true }"
           (ngModelChange)="onImmediateChange($event)"
           class="w-full"
         />
@@ -1868,6 +1872,7 @@ class ZTableEditCellComponent {
           [zDisabled]="cfg().disabled"
           [zReadonly]="cfg().readonly"
           [ngModel]="stringValue()"
+          [ngModelOptions]="{ standalone: true }"
           (ngModelChange)="onValueChange($event)"
           (zOnBlur)="onInputBlur()"
           class="w-full"
@@ -1885,6 +1890,7 @@ class ZTableEditCellComponent {
           [zDisabled]="cfg().disabled"
           [zReadonly]="cfg().readonly"
           [ngModel]="stringValue()"
+          [ngModelOptions]="{ standalone: true }"
           (ngModelChange)="onValueChange($event)"
           (zOnBlur)="onInputBlur()"
           class="w-full"
@@ -1951,6 +1957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
           [zDisabled]="cfg().disabled"
           [zReadonly]="cfg().readonly"
           [ngModel]="numericValue()"
+          [ngModelOptions]="{ standalone: true }"
           (ngModelChange)="onValueChange($event)"
           (zOnBlur)="onInputBlur()"
           class="w-full"
@@ -1970,6 +1977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
           [zDisabled]="cfg().disabled"
           [zReadonly]="cfg().readonly"
           [ngModel]="value()"
+          [ngModelOptions]="{ standalone: true }"
           [zPlaceholder]="cfg().placeholder"
           (ngModelChange)="onSelectChange($event)"
           class="w-full min-w-0"
@@ -1991,6 +1999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
           [zReadonly]="cfg().readonly"
           [zPlaceholder]="cfg().placeholder"
           [ngModel]="stringValue()"
+          [ngModelOptions]="{ standalone: true }"
           (zOnCommit)="onAutocompleteCommit($event)"
           (zOnSelect)="onAutocompleteSelect($event)"
           (zOnBlur)="onInputBlur()"
@@ -2012,6 +2021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
           [zLoadingOutline]="true"
           [zPlaceholder]="cfg().placeholder"
           [ngModel]="dateValue()"
+          [ngModelOptions]="{ standalone: true }"
           (ngModelChange)="onImmediateChange($event)"
           class="w-full"
         />
@@ -2029,6 +2039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
           [zDisabled]="cfg().disabled"
           [zReadonly]="cfg().readonly"
           [ngModel]="stringValue()"
+          [ngModelOptions]="{ standalone: true }"
           (ngModelChange)="onValueChange($event)"
           (zOnBlur)="onInputBlur()"
           class="w-full"
@@ -2046,6 +2057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
           [zDisabled]="cfg().disabled"
           [zReadonly]="cfg().readonly"
           [ngModel]="stringValue()"
+          [ngModelOptions]="{ standalone: true }"
           (ngModelChange)="onValueChange($event)"
           (zOnBlur)="onInputBlur()"
           class="w-full"
@@ -2629,7 +2641,13 @@ class ZTableFilterComponent {
           @if (canSort()) {
             <div class="p-1">
               <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2">
-                <z-input class="min-w-0" zSize="sm" zReadonly [ngModel]="sortLabelKey() | translate" />
+                <z-input
+                  class="min-w-0"
+                  zSize="sm"
+                  zReadonly
+                  [ngModel]="sortLabelKey() | translate"
+                  [ngModelOptions]="{ standalone: true }"
+                />
                 <z-select
                   class="col-span-2 min-w-0"
                   zSize="sm"
@@ -2637,6 +2655,7 @@ class ZTableFilterComponent {
                   [zWrap]="false"
                   [zScrollClose]="true"
                   [ngModel]="draftSortValue()"
+                  [ngModelOptions]="{ standalone: true }"
                   [zPlaceholder]="'i18n_z_ui_table_sort' | translate"
                   (ngModelChange)="updateDraftSort($event)"
                 />
@@ -2677,6 +2696,7 @@ class ZTableFilterComponent {
                               [zMaxVisible]="30"
                               [zPlaceholder]="'i18n_z_ui_table_filter_select_condition' | translate"
                               [ngModel]="condition.operator"
+                              [ngModelOptions]="{ standalone: true }"
                               (ngModelChange)="updateFilterOperator(condition.id, $event)"
                             />
                             @if (condition.isValueLess) {
@@ -2691,6 +2711,7 @@ class ZTableFilterComponent {
                                 zAllowClear
                                 [zPlaceholder]="'i18n_z_ui_table_filter_value' | translate"
                                 [ngModel]="condition.value ?? ''"
+                                [ngModelOptions]="{ standalone: true }"
                                 (ngModelChange)="updateFilterValue(condition.id, $event)"
                               />
                             }
@@ -2721,7 +2742,13 @@ class ZTableFilterComponent {
             } @else {
               <div class="p-1">
                 <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2">
-                  <z-input class="min-w-0" zSize="sm" zReadonly [ngModel]="legacyFilterLabelKey() | translate" />
+                  <z-input
+                    class="min-w-0"
+                    zSize="sm"
+                    zReadonly
+                    [ngModel]="legacyFilterLabelKey() | translate"
+                    [ngModelOptions]="{ standalone: true }"
+                  />
                   @switch (legacyAdvancedType()) {
                     @case ('range') {
                       <div class="col-span-2 flex min-w-0 gap-1">
@@ -2730,6 +2757,7 @@ class ZTableFilterComponent {
                           zSize="sm"
                           [zPlaceholder]="'i18n_z_ui_table_filter_min' | translate"
                           [ngModel]="rangeMinValue()"
+                          [ngModelOptions]="{ standalone: true }"
                           (ngModelChange)="onMinChangeDebounced($event)"
                           class="min-w-0 flex-1"
                         />
@@ -2738,6 +2766,7 @@ class ZTableFilterComponent {
                           zSize="sm"
                           [zPlaceholder]="'i18n_z_ui_table_filter_max' | translate"
                           [ngModel]="rangeMaxValue()"
+                          [ngModelOptions]="{ standalone: true }"
                           (ngModelChange)="onMaxChangeDebounced($event)"
                           class="min-w-0 flex-1"
                         />
@@ -2753,6 +2782,7 @@ class ZTableFilterComponent {
                         [zScrollClose]="true"
                         [zPlaceholder]="'i18n_z_ui_table_filter_date' | translate"
                         [ngModel]="dateValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         (ngModelChange)="onDateChange($event)"
                         class="col-span-2 min-w-0"
                       />
@@ -2769,6 +2799,7 @@ class ZTableFilterComponent {
                         [zScrollClose]="true"
                         [zPlaceholder]="'i18n_z_ui_table_filter_date_range' | translate"
                         [ngModel]="dateRangeValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         (ngModelChange)="onDateRangeChange($event)"
                         class="col-span-2 min-w-0"
                       />
@@ -2784,6 +2815,7 @@ class ZTableFilterComponent {
                         [zScrollClose]="true"
                         [zPlaceholder]="'i18n_z_ui_table_filter_time' | translate"
                         [ngModel]="timeValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         (ngModelChange)="onTimeChange($event)"
                         class="col-span-2 min-w-0"
                       />
@@ -2797,6 +2829,7 @@ class ZTableFilterComponent {
                         [zOptions]="selectOptions()"
                         [zConfig]="selectConfig()"
                         [ngModel]="selectValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         [zMaxVisible]="30"
                         [zPlaceholder]="'i18n_z_ui_common_select' | translate"
                         (ngModelChange)="onSelectChange($event)"
@@ -2815,6 +2848,7 @@ class ZTableFilterComponent {
                         [zMaxTagCount]="1"
                         [zMaxVisible]="30"
                         [ngModel]="multiSelectValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         [zPlaceholder]="'i18n_z_ui_common_select' | translate"
                         (ngModelChange)="onMultiSelectChange($event)"
                         class="col-span-2 min-w-0"
@@ -2834,6 +2868,7 @@ class ZTableFilterComponent {
                         class="col-span-2 min-w-0"
                         [zAllowClear]="true"
                         [ngModel]="multiSelectValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         (ngModelChange)="onMultiSelectChange($event)"
                       />
                     }
@@ -2948,7 +2983,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
           @if (canSort()) {
             <div class="p-1">
               <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2">
-                <z-input class="min-w-0" zSize="sm" zReadonly [ngModel]="sortLabelKey() | translate" />
+                <z-input
+                  class="min-w-0"
+                  zSize="sm"
+                  zReadonly
+                  [ngModel]="sortLabelKey() | translate"
+                  [ngModelOptions]="{ standalone: true }"
+                />
                 <z-select
                   class="col-span-2 min-w-0"
                   zSize="sm"
@@ -2956,6 +2997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                   [zWrap]="false"
                   [zScrollClose]="true"
                   [ngModel]="draftSortValue()"
+                  [ngModelOptions]="{ standalone: true }"
                   [zPlaceholder]="'i18n_z_ui_table_sort' | translate"
                   (ngModelChange)="updateDraftSort($event)"
                 />
@@ -2996,6 +3038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                               [zMaxVisible]="30"
                               [zPlaceholder]="'i18n_z_ui_table_filter_select_condition' | translate"
                               [ngModel]="condition.operator"
+                              [ngModelOptions]="{ standalone: true }"
                               (ngModelChange)="updateFilterOperator(condition.id, $event)"
                             />
                             @if (condition.isValueLess) {
@@ -3010,6 +3053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                                 zAllowClear
                                 [zPlaceholder]="'i18n_z_ui_table_filter_value' | translate"
                                 [ngModel]="condition.value ?? ''"
+                                [ngModelOptions]="{ standalone: true }"
                                 (ngModelChange)="updateFilterValue(condition.id, $event)"
                               />
                             }
@@ -3040,7 +3084,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             } @else {
               <div class="p-1">
                 <div class="grid min-w-0 grid-cols-[1fr_1fr_2rem] items-center gap-2">
-                  <z-input class="min-w-0" zSize="sm" zReadonly [ngModel]="legacyFilterLabelKey() | translate" />
+                  <z-input
+                    class="min-w-0"
+                    zSize="sm"
+                    zReadonly
+                    [ngModel]="legacyFilterLabelKey() | translate"
+                    [ngModelOptions]="{ standalone: true }"
+                  />
                   @switch (legacyAdvancedType()) {
                     @case ('range') {
                       <div class="col-span-2 flex min-w-0 gap-1">
@@ -3049,6 +3099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                           zSize="sm"
                           [zPlaceholder]="'i18n_z_ui_table_filter_min' | translate"
                           [ngModel]="rangeMinValue()"
+                          [ngModelOptions]="{ standalone: true }"
                           (ngModelChange)="onMinChangeDebounced($event)"
                           class="min-w-0 flex-1"
                         />
@@ -3057,6 +3108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                           zSize="sm"
                           [zPlaceholder]="'i18n_z_ui_table_filter_max' | translate"
                           [ngModel]="rangeMaxValue()"
+                          [ngModelOptions]="{ standalone: true }"
                           (ngModelChange)="onMaxChangeDebounced($event)"
                           class="min-w-0 flex-1"
                         />
@@ -3072,6 +3124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         [zScrollClose]="true"
                         [zPlaceholder]="'i18n_z_ui_table_filter_date' | translate"
                         [ngModel]="dateValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         (ngModelChange)="onDateChange($event)"
                         class="col-span-2 min-w-0"
                       />
@@ -3088,6 +3141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         [zScrollClose]="true"
                         [zPlaceholder]="'i18n_z_ui_table_filter_date_range' | translate"
                         [ngModel]="dateRangeValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         (ngModelChange)="onDateRangeChange($event)"
                         class="col-span-2 min-w-0"
                       />
@@ -3103,6 +3157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         [zScrollClose]="true"
                         [zPlaceholder]="'i18n_z_ui_table_filter_time' | translate"
                         [ngModel]="timeValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         (ngModelChange)="onTimeChange($event)"
                         class="col-span-2 min-w-0"
                       />
@@ -3116,6 +3171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         [zOptions]="selectOptions()"
                         [zConfig]="selectConfig()"
                         [ngModel]="selectValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         [zMaxVisible]="30"
                         [zPlaceholder]="'i18n_z_ui_common_select' | translate"
                         (ngModelChange)="onSelectChange($event)"
@@ -3134,6 +3190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         [zMaxTagCount]="1"
                         [zMaxVisible]="30"
                         [ngModel]="multiSelectValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         [zPlaceholder]="'i18n_z_ui_common_select' | translate"
                         (ngModelChange)="onMultiSelectChange($event)"
                         class="col-span-2 min-w-0"
@@ -3153,6 +3210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class="col-span-2 min-w-0"
                         [zAllowClear]="true"
                         [ngModel]="multiSelectValue()"
+                        [ngModelOptions]="{ standalone: true }"
                         (ngModelChange)="onMultiSelectChange($event)"
                       />
                     }
@@ -5566,6 +5624,7 @@ class ZTableComponent {
     _zTranslate = inject(ZTranslateService);
     _overlayService = inject(ZOverlayService);
     _viewContainerRef = inject(ViewContainerRef);
+    _destroyRef = inject(DestroyRef);
     /** Prevents recursive scroll sync between thead/tbody/tfoot */
     _isSyncingScroll = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isSyncingScroll" }] : /* istanbul ignore next */ []));
@@ -5579,7 +5638,7 @@ class ZTableComponent {
     _settingsDebounceTimeout = null;
     _visibilityDebounceTimeout = null;
     /** Debounces filter change emissions to server */
-    _filterEmitDebounceTimeout = null;
+    _filterEmitDebounceTimer = zCreateDestroySafeTimeout(this._destroyRef);
     /** Keeps the bulk bar mounted long enough for its exit animation */
     _bulkBarTimer = null;
     _bulkBarOverlayRef = null;
@@ -6373,7 +6432,10 @@ class ZTableComponent {
         if (this.isServerGrouping()) {
             const selectedColumnId = this.groupingColumnIds()[0];
             const fallbackColumnId = this.serverGroupColumnId();
-            return selectedColumnId ? [selectedColumnId] : fallbackColumnId ? [fallbackColumnId] : [];
+            if (selectedColumnId) {
+                return [selectedColumnId];
+            }
+            return fallbackColumnId ? [fallbackColumnId] : [];
         }
         return this.groupingColumnIds();
     }, /* @ts-ignore */
@@ -7874,7 +7936,13 @@ class ZTableComponent {
         const stickyGroupMeta = this._stickyGroupHeaderMeta();
         // Estimate for not-yet-measured rows: learned height if available, else virtual.size.
         const dynamicRowEstimate = isDynamic && this._dynamicEstimateHeight !== null ? this._dynamicEstimateHeight : rowHeight;
-        const itemCount = isGrouping ? flatItems.length : groups.length > 0 ? groups.length : this._virtualGroupCount();
+        let itemCount = this._virtualGroupCount();
+        if (isGrouping) {
+            itemCount = flatItems.length;
+        }
+        if (!isGrouping && groups.length > 0) {
+            itemCount = groups.length;
+        }
         return {
             scrollElement,
             count: itemCount,
@@ -8248,11 +8316,13 @@ class ZTableComponent {
             // Virtual scroll windows the rows itself, so it needs the full row model — otherwise the
             // default pageSize of 10 leaves the paginated row model truncating the data it ever sees.
             const isVirtualConfig = !!cfg.virtual && (typeof cfg.virtual === 'boolean' ? cfg.virtual : cfg.virtual.enabled);
-            const configuredPageSize = cfg.pagination?.enabled
-                ? cfg.pagination.pageSize
-                : isVirtualConfig
-                    ? Number.MAX_SAFE_INTEGER
-                    : undefined;
+            let configuredPageSize;
+            if (cfg.pagination?.enabled) {
+                configuredPageSize = cfg.pagination.pageSize;
+            }
+            if (!cfg.pagination?.enabled && isVirtualConfig) {
+                configuredPageSize = Number.MAX_SAFE_INTEGER;
+            }
             const initialPageSize = cfg.initialState?.pagination?.pageSize;
             const paginationSchemaKey = `${this._getConfigCacheKey(key || 'initial-pagination')}:${configuredPageSize ?? ''}:${initialPageSize ?? ''}`;
             if (!cfg.initialState?.pagination &&
@@ -8509,11 +8579,13 @@ class ZTableComponent {
             updateItem: (id, updates, fieldKey) => {
                 const current = this.zConfig();
                 current.data = current.data.map((row, index) => {
-                    const rowId = fieldKey
-                        ? row[fieldKey]
-                        : current.getRowId
-                            ? current.getRowId(row, index, undefined, current.data)
-                            : row['id'];
+                    let rowId = row['id'];
+                    if (fieldKey) {
+                        rowId = row[fieldKey];
+                    }
+                    if (!fieldKey && current.getRowId) {
+                        rowId = current.getRowId(row, index, undefined, current.data);
+                    }
                     return rowId === id ? { ...row, ...updates } : row;
                 });
                 this._dataForceUpdate.update(v => v + 1);
@@ -8522,11 +8594,13 @@ class ZTableComponent {
             deleteItem: (id, fieldKey) => {
                 const current = this.zConfig();
                 current.data = current.data.filter((row, index) => {
-                    const rowId = fieldKey
-                        ? row[fieldKey]
-                        : current.getRowId
-                            ? current.getRowId(row, index, undefined, current.data)
-                            : row['id'];
+                    let rowId = row['id'];
+                    if (fieldKey) {
+                        rowId = row[fieldKey];
+                    }
+                    if (!fieldKey && current.getRowId) {
+                        rowId = current.getRowId(row, index, undefined, current.data);
+                    }
                     return rowId !== id;
                 });
                 this._dataForceUpdate.update(v => v + 1);
@@ -8768,10 +8842,7 @@ class ZTableComponent {
         }, this.zConfig().debounceTime ?? Z_DEFAULT_DEBOUNCE_TIME);
     }
     _emitFilterChangeDebounced(filters, search) {
-        if (this._filterEmitDebounceTimeout) {
-            clearTimeout(this._filterEmitDebounceTimeout);
-        }
-        this._filterEmitDebounceTimeout = setTimeout(() => {
+        this._filterEmitDebounceTimer.schedule(() => {
             this.zChange.emit({
                 type: 'filter',
                 data: { filters, search },
@@ -10018,7 +10089,7 @@ class ZTableComponent {
         if (!(target instanceof HTMLElement)) {
             return false;
         }
-        return !!target.closest('button, input, textarea, select, [contenteditable="true"], z-input, z-select, z-calendar, z-checkbox, z-switch');
+        return !!target.closest('button, input, textarea, select, [contenteditable="true"], z-input, z-select, z-calendar, z-checkbox, z-switch, scrollbar-thumb-x, scrollbar-thumb-y, scrollbar-track-x, scrollbar-track-y, scrollbarbutton');
     }
     _isCellSelectionDragTarget(target) {
         if (this._document.body.classList.contains('z-table-pointer-dragging')) {
@@ -10542,7 +10613,13 @@ class ZTableComponent {
         if (position && !this.pinAvailabilityMap()[columnId]?.[position]) {
             return;
         }
-        const tanStackPosition = position === 'left' ? 'start' : position === 'right' ? 'end' : false;
+        let tanStackPosition = false;
+        if (position === 'left') {
+            tanStackPosition = 'start';
+        }
+        if (position === 'right') {
+            tanStackPosition = 'end';
+        }
         column.pin(tanStackPosition);
         // A configured header colSpan renders as one solid block, so pinning (or unpinning) the
         // leading column must carry its covered columns along — otherwise unpinning only the