@uzum-tech/ui 2.0.0-beta.3 → 2.0.0-beta.5

package/es/data-table/src/TableParts/Cell.mjs

@@ -2,7 +2,7 @@ import { get } from 'lodash-es';
 import { defineComponent, h } from 'vue';
 import { UEllipsis } from "../../../ellipsis/index.mjs";
 import { processMaskedValue } from "../use-mask.mjs";
-import { defaultNumericMask } from "../utils.mjs";
+import { defaultNumericMask, isColumnEllipsisEnabled } from "../utils/index.mjs";
 export default defineComponent({
   name: 'DataTableCell',
   emits: ['edit'],
@@ -51,7 +51,7 @@ export default defineComponent({
       numeric
     } = column;
     if (numeric && !mask) mask = defaultNumericMask;
-    const isEditable = typeof editable === 'function' ? editable(row) : editable;
+    const rowEditable = typeof editable === 'function' ? editable(row) : editable;
     if (render && !isSummary) {
       let cellValue = render(row, this.index);
       if (cellValue == null || cellValue === false) {
@@ -75,7 +75,7 @@ export default defineComponent({
         }
         cell = cellValue;
       }
-    } else if (isEditable && !isSummary) {
+    } else if (rowEditable && !isSummary) {
       const {
         placeholder
       } = column;
@@ -88,19 +88,19 @@ export default defineComponent({
         class: `${this.clsPrefix}-data-table-editable-input`,
         value: displayValue,
         placeholder: placeholder || '',
-        onFocus: e => {
-          const input = e.target;
+        onFocus: event => {
+          const input = event.target;
           isEditingRef.current = true;
           input.value = rawValue;
         },
-        onKeyDown: e => {
+        onKeyDown: event => {
           if (mask && typeof mask === 'function' && isEditingRef.current) {
-            const input = e.target;
+            const input = event.target;
             input.value = rawValue;
           }
         },
-        onInput: e => {
-          const input = e.target;
+        onInput: event => {
+          const input = event.target;
           let value = input.value;
           if (numeric) {
             const cursorPosition = input.selectionStart || 0;
@@ -146,15 +146,15 @@ export default defineComponent({
           }
           this.$emit('edit', processedValue, row, key);
         },
-        onKeyUp: e => {
+        onKeyUp: event => {
           if (mask && typeof mask === 'function' && isEditingRef.current) {
-            const input = e.target;
+            const input = event.target;
             input.value = rawValue;
           }
         },
-        onChange: e => {
+        onChange: event => {
           if (mask && typeof mask === 'function' && isEditingRef.current) {
-            const input = e.target;
+            const input = event.target;
             setTimeout(() => {
               if (isEditingRef.current && input.value !== rawValue) {
                 input.value = rawValue;
@@ -167,10 +167,10 @@ export default defineComponent({
             }, 10);
           }
         },
-        onBlur: e => {
+        onBlur: event => {
           isEditingRef.current = false;
           if (mask) {
-            const input = e.target;
+            const input = event.target;
             let currentValue = input.value;
             if (numeric && currentValue !== '') {
               currentValue = currentValue.replace(',', '.');
@@ -234,8 +234,8 @@ export default defineComponent({
         }
       }
     }
-    if (ellipsis) {
-      if (typeof ellipsis === 'object') {
+    if (isColumnEllipsisEnabled(column)) {
+      if (ellipsis && typeof ellipsis === 'object') {
         const {
           mergedTheme
         } = this;

package/es/data-table/src/TableParts/Header.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
 }>, {
-    cellElsRef: import("vue").Ref<Record<ColumnKey, HTMLTableCellElement>, Record<ColumnKey, HTMLTableCellElement>>;
+    cellElementsRef: import("vue").Ref<Record<ColumnKey, HTMLTableCellElement>, Record<ColumnKey, HTMLTableCellElement>>;
     componentId: string;
     mergedSortState: import("vue").Ref<import("../interface").SortState[], import("../interface").SortState[]>;
     mergedClsPrefix: import("vue").Ref<string, string>;
@@ -2792,9 +2792,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     checkOptions: import("vue").Ref<import("../interface").DataTableSelectionOptions<import("../interface").InternalRowData> | undefined, import("../interface").DataTableSelectionOptions<import("../interface").InternalRowData> | undefined>;
     mergedTableLayout: import("vue").Ref<"auto" | "fixed", "auto" | "fixed">;
+    resizableEnabled: import("vue").Ref<boolean, boolean>;
+    fixedResizableTableWidth: import("vue").ComputedRef<string | undefined>;
     headerCheckboxDisabled: import("vue").Ref<boolean, boolean>;
     handleCheckboxUpdateChecked: () => void;
-    handleColHeaderClick: (e: MouseEvent, column: TableBaseColumn) => void;
+    handleColHeaderClick: (event: MouseEvent, column: TableBaseColumn) => void;
     handleTableHeaderScroll: (e: Event) => void;
     handleColumnResizeStart: (column: TableBaseColumn) => void;
     handleColumnResize: (column: TableBaseColumn, displacementX: number) => void;

package/es/data-table/src/TableParts/Header.mjs

@@ -1,5 +1,5 @@
-import { happensIn, pxfy } from 'seemly';
-import { defineComponent, Fragment, h, inject, ref } from 'vue';
+import { depx, happensIn, pxfy } from 'seemly';
+import { computed, defineComponent, Fragment, h, inject, ref } from 'vue';
 import { formatLength } from "../../../_utils/index.mjs";
 import { UCheckbox } from "../../../checkbox/index.mjs";
 import { UEllipsis } from "../../../ellipsis/index.mjs";
@@ -7,7 +7,7 @@ import FilterButton from "../HeaderButton/FilterButton.mjs";
 import ResizeButton from "../HeaderButton/ResizeButton.mjs";
 import SortButton from "../HeaderButton/SortButton.mjs";
 import { dataTableInjectionKey } from "../interface.mjs";
-import { clampValueFollowCSSRules, createNextSorter, getColKey, getNumberColWidth, isColumnFilterable, isColumnResizable, isColumnSortable, isColumnSorting } from "../utils.mjs";
+import { clampValueFollowCSSRules, createNextSorter, getColKey, getNumberColWidth, isColumnEllipsisEnabled, isColumnFilterable, isColumnResizable, isColumnSortable, isColumnSorting, resolveColumnWidthConstraint } from "../utils/index.mjs";
 import SelectionMenu from "./SelectionMenu.mjs";
 function renderTitle(column) {
   return typeof column.title === 'function' ? column.title(column) : column.title;
@@ -22,6 +22,7 @@ export default defineComponent({
   },
   setup() {
     const {
+      props: dataTableProps,
       mergedClsPrefixRef,
       scrollXRef,
       fixedColumnLeftMapRef,
@@ -36,6 +37,7 @@ export default defineComponent({
       mergedSortStateRef,
       componentId,
       mergedTableLayoutRef,
+      resizableEnabledRef,
       headerCheckboxDisabledRef,
       sizeRef,
       onUnstableColumnResize,
@@ -46,9 +48,22 @@ export default defineComponent({
       doUncheckAll,
       doCheckAll
     } = inject(dataTableInjectionKey);
-    const cellElsRef = ref({});
+    const fixedResizableModeRef = computed(() => {
+      return mergedTableLayoutRef.value === 'fixed' && resizableEnabledRef.value;
+    });
+    const fixedResizableTableWidthRef = computed(() => {
+      if (!fixedResizableModeRef.value) return;
+      let total = 0;
+      for (const column of colsRef.value) {
+        const width = depx(column.style.width);
+        if (!Number.isFinite(width) || width <= 0) return;
+        total += width;
+      }
+      return `${total}px`;
+    });
+    const cellElementsRef = ref({});
     function getCellActualWidth(key) {
-      const element = cellElsRef.value[key];
+      const element = cellElementsRef.value[key];
       return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width;
     }
     function handleCheckboxUpdateChecked() {
@@ -58,8 +73,8 @@ export default defineComponent({
         doCheckAll();
       }
     }
-    function handleColHeaderClick(e, column) {
-      if (happensIn(e, 'dataTableFilter') || happensIn(e, 'dataTableResizable')) {
+    function handleColHeaderClick(event, column) {
+      if (happensIn(event, 'dataTableFilter') || happensIn(event, 'dataTableResizable')) {
         return;
       }
       if (!isColumnSortable(column)) return;
@@ -69,16 +84,18 @@ export default defineComponent({
     }
     const resizeStartWidthMap = new Map();
     function getColumnStartWidth(column) {
-      const actual = getCellActualWidth(column.key);
-      if (actual !== undefined && actual > 0) return actual;
-      const resized = getResizableWidth(column.key);
-      if (resized !== undefined && resized > 0) return resized;
+      const actualWidth = getCellActualWidth(column.key);
+      if (actualWidth !== undefined && actualWidth > 0) return actualWidth;
+      const resizedWidth = getResizableWidth(column.key);
+      if (resizedWidth !== undefined && resizedWidth > 0) return resizedWidth;
       return getNumberColWidth(column);
     }
     function handleColumnResizeStart(column) {
       resizeStartWidthMap.set(column.key, getColumnStartWidth(column));
     }
     function handleColumnResize(column, displacementX) {
+      var _a, _b, _c, _d;
+      if (!resizableEnabledRef.value) return;
       let startWidth = resizeStartWidthMap.get(column.key);
       if (startWidth === undefined) {
         startWidth = getColumnStartWidth(column);
@@ -86,12 +103,34 @@ export default defineComponent({
         resizeStartWidthMap.set(column.key, startWidth);
       }
       const widthAfterResize = startWidth + displacementX;
-      const limitWidth = clampValueFollowCSSRules(widthAfterResize, column.minWidth, column.maxWidth);
+      const {
+        min: minWidth,
+        max: maxWidth
+      } = resolveColumnWidthConstraint(column, dataTableProps.resizableMinWidth, dataTableProps.resizableMaxWidth);
+      const limitWidth = clampValueFollowCSSRules(widthAfterResize, minWidth, maxWidth);
+      const currentWidth = (_b = (_a = getResizableWidth(column.key)) !== null && _a !== void 0 ? _a : getCellActualWidth(column.key)) !== null && _b !== void 0 ? _b : startWidth;
+      const delta = limitWidth - currentWidth;
+      if (fixedResizableModeRef.value && delta > 0) {
+        const lastColumnItem = colsRef.value[colsRef.value.length - 1];
+        if (lastColumnItem !== undefined && lastColumnItem.key !== column.key) {
+          const lastCurrentWidth = (_d = (_c = getResizableWidth(lastColumnItem.key)) !== null && _c !== void 0 ? _c : getCellActualWidth(lastColumnItem.key)) !== null && _d !== void 0 ? _d : depx(lastColumnItem.style.width);
+          if (Number.isFinite(lastCurrentWidth) && lastCurrentWidth > 0) {
+            const {
+              min: lastMinWidth,
+              max: lastMaxWidth
+            } = resolveColumnWidthConstraint(lastColumnItem.column, dataTableProps.resizableMinWidth, dataTableProps.resizableMaxWidth);
+            const nextLastWidth = clampValueFollowCSSRules(lastCurrentWidth - delta, lastMinWidth, lastMaxWidth);
+            doUpdateResizableWidth({
+              key: lastColumnItem.key
+            }, nextLastWidth);
+          }
+        }
+      }
       onUnstableColumnResize(widthAfterResize, limitWidth, column, getCellActualWidth);
       doUpdateResizableWidth(column, limitWidth);
     }
     return {
-      cellElsRef,
+      cellElementsRef,
       componentId,
       mergedSortState: mergedSortStateRef,
       mergedClsPrefix: mergedClsPrefixRef,
@@ -106,6 +145,8 @@ export default defineComponent({
       mergedTheme: mergedThemeRef,
       checkOptions: checkOptionsRef,
       mergedTableLayout: mergedTableLayoutRef,
+      resizableEnabled: resizableEnabledRef,
+      fixedResizableTableWidth: fixedResizableTableWidthRef,
       headerCheckboxDisabled: headerCheckboxDisabledRef,
       handleCheckboxUpdateChecked,
       handleColHeaderClick,
@@ -117,7 +158,7 @@ export default defineComponent({
   },
   render() {
     const {
-      cellElsRef,
+      cellElementsRef,
       mergedClsPrefix,
       fixedColumnLeftMap,
       fixedColumnRightMap,
@@ -131,6 +172,8 @@ export default defineComponent({
       componentId,
       discrete,
       mergedTableLayout,
+      resizableEnabled,
+      fixedResizableTableWidth,
       headerCheckboxDisabled,
       mergedSortState,
       sizeRef,
@@ -139,7 +182,6 @@ export default defineComponent({
       handleColumnResizeStart,
       handleColumnResize
     } = this;
-    let hasEllipsis = false;
     const theadVNode = h("thead", {
       class: `${mergedClsPrefix}-data-table-thead`,
       "data-u-id": componentId
@@ -157,7 +199,7 @@ export default defineComponent({
         const {
           ellipsis
         } = column;
-        if (!hasEllipsis && ellipsis) hasEllipsis = true;
+        const ellipsisEnabled = isColumnEllipsisEnabled(column);
         const createColumnVNode = () => {
           if (column.type === 'selection') {
             return column.multiple !== false ? h(Fragment, null, h(UCheckbox, {
@@ -176,21 +218,21 @@ export default defineComponent({
             class: `${mergedClsPrefix}-data-table-th__title-wrapper`
           }, h("div", {
             class: `${mergedClsPrefix}-data-table-th__title`
-          }, ellipsis === true || ellipsis && !ellipsis.tooltip ? h("div", {
-            class: `${mergedClsPrefix}-data-table-th__ellipsis`
-          }, renderTitle(column)) : ellipsis && typeof ellipsis === 'object' ? h(UEllipsis, Object.assign({}, ellipsis, {
+          }, ellipsisEnabled ? ellipsis && typeof ellipsis === 'object' ? h(UEllipsis, Object.assign({}, ellipsis, {
             theme: mergedTheme.peers.Ellipsis,
             themeOverrides: mergedTheme.peerOverrides.Ellipsis
           }), {
             default: () => renderTitle(column)
-          }) : renderTitle(column), column.subtitle && h("div", {
+          }) : h("div", {
+            class: `${mergedClsPrefix}-data-table-th__ellipsis`
+          }, renderTitle(column)) : renderTitle(column), column.subtitle && h("div", {
             class: `${mergedClsPrefix}-data-table-th__subtitle`
           }, column.subtitle)), isColumnSortable(column) ? h(SortButton, {
             column: column
           }) : null), isColumnFilterable(column) ? h(FilterButton, {
             column: column,
             options: column.filterOptions
-          }) : null, isColumnResizable(column) ? h(ResizeButton, {
+          }) : null, resizableEnabled && isColumnResizable(column) ? h(ResizeButton, {
             onResizeStart: () => {
               handleColumnResizeStart(column);
             },
@@ -202,7 +244,7 @@ export default defineComponent({
         const leftFixed = key in fixedColumnLeftMap;
         const rightFixed = key in fixedColumnRightMap;
         return h("th", {
-          ref: el => cellElsRef[key] = el,
+          ref: el => cellElementsRef[key] = el,
           key: key,
           style: {
             textAlign: column.titleAlign || column.align,
@@ -242,6 +284,7 @@ export default defineComponent({
       class: `${mergedClsPrefix}-data-table-table`,
       style: {
         minWidth: formatLength(scrollX),
+        width: fixedResizableTableWidth,
         tableLayout: mergedTableLayout
       }
     }, h("colgroup", null, cols.map(col => h("col", {

package/es/data-table/src/interface.d.ts

@@ -74,6 +74,15 @@ export declare const dataTableProps: {
         readonly type: PropType<"auto" | "fixed">;
         readonly default: "auto";
     };
+    readonly resizableMinWidth: {
+        readonly type: PropType<number | string>;
+        readonly default: 50;
+    };
+    readonly resizableMaxWidth: PropType<number | string>;
+    readonly resizableStorage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly allowCheckingNotLoaded: BooleanConstructor;
     readonly cascade: {
         readonly type: BooleanConstructor;
@@ -2975,6 +2984,12 @@ export declare const dataTableProps: {
 export type FilterOptionValue = string | number;
 export type ColumnKey = string | number;
 export type RowKey = string | number;
+export interface ColumnWidthComputationItem {
+    key: ColumnKey;
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+}
 export type SortOrderFlag = 1 | -1 | 0;
 export interface DataTableSlots {
     default?: () => VNode[];
@@ -3153,6 +3168,7 @@ export interface DataTableInjection {
     virtualScrollRef: Ref<boolean>;
     bodyWidthRef: Ref<number | null>;
     mergedTableLayoutRef: Ref<'auto' | 'fixed'>;
+    resizableEnabledRef: Ref<boolean>;
     maxHeightRef: Ref<string | number | undefined>;
     minHeightRef: Ref<string | number | undefined>;
     rowPropsRef: Ref<CreateRowProps | undefined>;

package/es/data-table/src/interface.mjs

@@ -64,6 +64,15 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
     type: String,
     default: 'auto'
   },
+  resizableMinWidth: {
+    type: [Number, String],
+    default: 50
+  },
+  resizableMaxWidth: [Number, String],
+  resizableStorage: {
+    type: Boolean,
+    default: true
+  },
   allowCheckingNotLoaded: Boolean,
   cascade: {
     type: Boolean,

package/es/data-table/src/use-group-header.mjs

@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { formatLength } from "../../_utils/index.mjs";
-import { createCustomWidthStyle, getColKey } from "./utils.mjs";
+import { createCustomWidthStyle, getColKey, isColumnEllipsisEnabled } from "./utils/index.mjs";
 function getRowsAndCols(columns, getResizableWidth) {
   const rows = [];
   const cols = [];
@@ -27,7 +27,7 @@ function getRowsAndCols(columns, getResizableWidth) {
         });
         totalRowSpan += 1;
         if (!hasEllipsis) {
-          hasEllipsis = !!column.ellipsis;
+          hasEllipsis = isColumnEllipsisEnabled(column);
         }
         dataRelatedCols.push(column);
       }

package/es/data-table/src/use-mask.mjs

@@ -1,4 +1,4 @@
-import { REGEX } from "./utils.mjs";
+import { REGEX } from "./utils/index.mjs";
 export function applyMask(value, mask) {
   if (!mask) return value;
   if (!value || value.trim() === '') return '';

package/es/data-table/src/use-resizable.d.ts

@@ -2,6 +2,7 @@ import type { ColumnKey, TableColumn } from './interface';
 export declare function useResizable(): {
     getResizableWidth: (key: ColumnKey) => number | undefined;
     doUpdateResizableWidth: (column: TableColumn, width: number) => void;
+    setResizableWidths: (widths: Record<ColumnKey, number>) => void;
     clearResizableWidth: () => void;
     resizableWidthsRef: import("vue").Ref<Record<ColumnKey, number>, Record<ColumnKey, number>>;
 };

package/es/data-table/src/use-resizable.mjs

@@ -1,21 +1,24 @@
 import { ref } from 'vue';
-import { isColumnResizable } from "./utils.mjs";
 export function useResizable() {
   const resizableWidthsRef = ref({});
   function getResizableWidth(key) {
     return resizableWidthsRef.value[key];
   }
   function doUpdateResizableWidth(column, width) {
-    if (isColumnResizable(column) && 'key' in column) {
+    if ('key' in column) {
       resizableWidthsRef.value[column.key] = width;
     }
   }
+  function setResizableWidths(widths) {
+    resizableWidthsRef.value = widths;
+  }
   function clearResizableWidth() {
     resizableWidthsRef.value = {};
   }
   return {
     getResizableWidth,
     doUpdateResizableWidth,
+    setResizableWidths,
     clearResizableWidth,
     resizableWidthsRef
   };

package/es/data-table/src/use-scroll.d.ts

@@ -1,9 +1,10 @@
 import type { ComputedRef, Ref } from 'vue';
 import type { ColumnKey, DataTableSetupProps, MainTableRef, TableColumn } from './interface';
-export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef }: {
+export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, getResizableWidth }: {
     bodyWidthRef: Ref<null | number>;
     mainTableInstRef: Ref<MainTableRef | null>;
     mergedCurrentPageRef: ComputedRef<number>;
+    getResizableWidth: (key: ColumnKey) => number | undefined;
 }): {
     styleScrollXRef: ComputedRef<string | undefined>;
     fixedColumnLeftMapRef: ComputedRef<Record<ColumnKey, {
@@ -14,14 +15,14 @@ export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef
         start: number;
         end: number;
     } | undefined>>;
-    leftFixedColumnsRef: ComputedRef<TableColumn<any>[]>;
-    rightFixedColumnsRef: ComputedRef<TableColumn<any>[]>;
+    leftFixedColumnsRef: ComputedRef<TableColumn[]>;
+    rightFixedColumnsRef: ComputedRef<TableColumn[]>;
     leftActiveFixedColKeyRef: Ref<ColumnKey | null, ColumnKey | null>;
     leftActiveFixedChildrenColKeysRef: Ref<ColumnKey[], ColumnKey[]>;
     rightActiveFixedColKeyRef: Ref<ColumnKey | null, ColumnKey | null>;
     rightActiveFixedChildrenColKeysRef: Ref<ColumnKey[], ColumnKey[]>;
     syncScrollState: () => void;
-    handleTableBodyScroll: (e: Event) => void;
+    handleTableBodyScroll: (event: Event) => void;
     handleTableHeaderScroll: () => void;
     setHeaderScrollLeft: (left: number) => void;
 };

package/es/data-table/src/use-scroll.mjs

@@ -1,11 +1,12 @@
 import { beforeNextFrameOnce } from 'seemly';
 import { computed, ref, watch } from 'vue';
 import { formatLength } from "../../_utils/index.mjs";
-import { getColKey, getNumberColWidth } from "./utils.mjs";
+import { getColKey, getNumberColWidth } from "./utils/index.mjs";
 export function useScroll(props, {
   mainTableInstRef,
   mergedCurrentPageRef,
-  bodyWidthRef
+  bodyWidthRef,
+  getResizableWidth
 }) {
   let lastScrollLeft = 0;
   const scrollPartRef = ref();
@@ -25,18 +26,19 @@ export function useScroll(props, {
   const fixedColumnLeftMapRef = computed(() => {
     const columns = {};
     let left = 0;
-    function traverse(cols) {
-      cols.forEach(col => {
+    function traverse(columnList) {
+      columnList.forEach(column => {
+        var _a;
         const positionInfo = {
           start: left,
           end: 0
         };
-        columns[getColKey(col)] = positionInfo;
-        if ('children' in col) {
-          traverse(col.children);
+        columns[getColKey(column)] = positionInfo;
+        if ('children' in column) {
+          traverse(column.children);
           positionInfo.end = left;
         } else {
-          left += getNumberColWidth(col) || 0;
+          left += ((_a = getResizableWidth(getColKey(column))) !== null && _a !== void 0 ? _a : getNumberColWidth(column)) || 0;
           positionInfo.end = left;
         }
       });
@@ -47,19 +49,20 @@ export function useScroll(props, {
   const fixedColumnRightMapRef = computed(() => {
     const columns = {};
     let right = 0;
-    function traverse(cols) {
-      for (let i = cols.length - 1; i >= 0; --i) {
-        const col = cols[i];
+    function traverse(columnList) {
+      var _a;
+      for (let index = columnList.length - 1; index >= 0; --index) {
+        const column = columnList[index];
         const positionInfo = {
           start: right,
           end: 0
         };
-        columns[getColKey(col)] = positionInfo;
-        if ('children' in col) {
-          traverse(col.children);
+        columns[getColKey(column)] = positionInfo;
+        if ('children' in column) {
+          traverse(column.children);
           positionInfo.end = right;
         } else {
-          right += getNumberColWidth(col) || 0;
+          right += ((_a = getResizableWidth(getColKey(column))) !== null && _a !== void 0 ? _a : getNumberColWidth(column)) || 0;
           positionInfo.end = right;
         }
       }
@@ -78,8 +81,8 @@ export function useScroll(props, {
       value: fixedColumnLeftMap
     } = fixedColumnLeftMapRef;
     let leftActiveFixedColKey = null;
-    for (let i = 0; i < leftFixedColumns.length; ++i) {
-      const key = getColKey(leftFixedColumns[i]);
+    for (let index = 0; index < leftFixedColumns.length; ++index) {
+      const key = getColKey(leftFixedColumns[index]);
       if (lastScrollLeft > (((_a = fixedColumnLeftMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) - leftWidth) {
         leftActiveFixedColKey = key;
         leftWidth = ((_b = fixedColumnLeftMap[key]) === null || _b === void 0 ? void 0 : _b.end) || 0;
@@ -91,7 +94,7 @@ export function useScroll(props, {
   }
   function deriveActiveLeftFixedChildrenColumns() {
     leftActiveFixedChildrenColKeysRef.value = [];
-    let activeLeftFixedColumn = props.columns.find(col => getColKey(col) === leftActiveFixedColKeyRef.value);
+    let activeLeftFixedColumn = props.columns.find(column => getColKey(column) === leftActiveFixedColKeyRef.value);
     while (activeLeftFixedColumn && 'children' in activeLeftFixedColumn) {
       const length = activeLeftFixedColumn.children.length;
       if (length === 0) break;
@@ -116,8 +119,8 @@ export function useScroll(props, {
     const {
       value: fixedColumnRightMap
     } = fixedColumnRightMapRef;
-    for (let i = rightFixedColumns.length - 1; i >= 0; --i) {
-      const key = getColKey(rightFixedColumns[i]);
+    for (let index = rightFixedColumns.length - 1; index >= 0; --index) {
+      const key = getColKey(rightFixedColumns[index]);
       if (Math.round(lastScrollLeft + (((_a = fixedColumnRightMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) + tableWidth - rightWidth) < scrollWidth) {
         rightActiveFixedColKey = key;
         rightWidth = ((_b = fixedColumnRightMap[key]) === null || _b === void 0 ? void 0 : _b.end) || 0;
@@ -129,7 +132,7 @@ export function useScroll(props, {
   }
   function deriveActiveRightFixedChildrenColumns() {
     rightActiveFixedChildrenColKeysRef.value = [];
-    let activeRightFixedColumn = props.columns.find(col => getColKey(col) === rightActiveFixedColKeyRef.value);
+    let activeRightFixedColumn = props.columns.find(column => getColKey(column) === rightActiveFixedColKeyRef.value);
     while (activeRightFixedColumn && 'children' in activeRightFixedColumn && activeRightFixedColumn.children.length) {
       const nextActiveRightFixedColumn = activeRightFixedColumn.children[0];
       rightActiveFixedChildrenColKeysRef.value.push(getColKey(nextActiveRightFixedColumn));
@@ -137,8 +140,9 @@ export function useScroll(props, {
     }
   }
   function getScrollElements() {
-    const header = mainTableInstRef.value ? mainTableInstRef.value.getHeaderElement() : null;
-    const body = mainTableInstRef.value ? mainTableInstRef.value.getBodyElement() : null;
+    var _a, _b, _c, _d;
+    const header = (_b = (_a = mainTableInstRef.value) === null || _a === void 0 ? void 0 : _a.getHeaderElement()) !== null && _b !== void 0 ? _b : null;
+    const body = (_d = (_c = mainTableInstRef.value) === null || _c === void 0 ? void 0 : _c.getBodyElement()) !== null && _d !== void 0 ? _d : null;
     return {
       header,
       body
@@ -159,9 +163,9 @@ export function useScroll(props, {
       scrollPartRef.value = undefined;
     }
   }
-  function handleTableBodyScroll(e) {
+  function handleTableBodyScroll(event) {
     var _a;
-    (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, event);
     if (scrollPartRef.value !== 'head') {
       beforeNextFrameOnce(syncScrollState);
     } else {

package/es/data-table/src/use-sorter.mjs

@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue';
 import { call } from "../../_utils/index.mjs";
-import { getFlagOfOrder } from "./utils.mjs";
+import { getFlagOfOrder } from "./utils/index.mjs";
 function getMultiplePriority(sorter) {
   if (typeof sorter === 'object' && typeof sorter.multiple === 'number') {
     return sorter.multiple;

package/es/data-table/src/use-table-data.mjs

@@ -3,7 +3,7 @@ import { useMemo, useMergedState } from 'vooks';
 import { computed, ref } from 'vue';
 import { call, warn } from "../../_utils/index.mjs";
 import { useSorter } from "./use-sorter.mjs";
-import { createShallowClonedObject } from "./utils.mjs";
+import { createShallowClonedObject } from "./utils/index.mjs";
 // useTableData combines filter, sorter and pagination
 export function useTableData(props, {
   dataRelatedColsRef

package/es/data-table/src/utils/column-utils.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'vue';
+import type { CreateRowClassName, InternalRowData, TableBaseColumn, TableColumn, TableExpandColumn, TableSelectionColumn } from '../interface';
+export declare const SELECTION_COL_WIDTH = 40;
+export declare const EXPAND_COL_WIDTH = 40;
+export declare function getNumberColWidth(column: TableColumn): number | undefined;
+export declare function getStringColWidth(column: TableColumn): string | undefined;
+export declare function getColKey(column: TableColumn): string | number;
+export declare function createCustomWidthStyle(column: TableBaseColumn | TableSelectionColumn | TableExpandColumn, resizedWidth?: string): CSSProperties;
+export declare function createRowClassName(row: InternalRowData, index: number, rowClassName?: string | CreateRowClassName): string;
+export declare function isColumnSortable(column: TableColumn): boolean;
+export declare function isColumnEllipsisEnabled(column: Pick<TableColumn, 'ellipsis'>): boolean;
+export declare function isColumnResizable(column: TableColumn): boolean;
+export declare function isColumnFilterable(column: TableColumn): boolean;