naive-ui 2.38.2 → 2.40.0

package/lib/data-table/src/styles/index.cssr.js

@@ -19,16 +19,22 @@ const fixedColumnStyle = createFixedColumnStyle();
 // --n-border-color-popover
 // --n-th-color
 // --n-th-color-hover
+// --n-th-color-sorting
 // --n-th-color-modal
 // --n-th-color-hover-modal
+// --n-th-color-sorting-modal
 // --n-th-color-popover
 // --n-th-color-hover-popover
+// --n-th-color-sorting-popover
 // --n-td-color
 // --n-td-color-hover
+// --n-td-color-sorting
 // --n-td-color-modal
 // --n-td-color-hover-modal
+// --n-td-color-sorting-modal
 // --n-td-color-popover
 // --n-td-color-hover-popover
+// --n-td-color-sorting-popover
 // --n-th-text-color
 // --n-td-text-color
 // --n-th-font-weight
@@ -59,8 +65,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  --n-merged-th-color: var(--n-th-color);
  --n-merged-td-color: var(--n-td-color);
  --n-merged-border-color: var(--n-border-color);
- --n-merged-th-color-hover: var(--n-th-color-hover);
+ --n-merged-th-color-sorting: var(--n-th-color-sorting);
  --n-merged-td-color-hover: var(--n-td-color-hover);
+ --n-merged-td-color-sorting: var(--n-td-color-sorting);
  --n-merged-td-color-striped: var(--n-td-color-striped);
  `, [(0, cssr_1.cB)('data-table-wrapper', `
  flex-grow: 1;
@@ -133,6 +140,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  transition: background-color .3s var(--n-bezier);
  background-color: var(--n-merged-th-color);
  `), (0, cssr_1.cB)('data-table-tr', `
+ position: relative;
  box-sizing: border-box;
  background-clip: padding-box;
  transition: background-color .3s var(--n-bezier);
@@ -183,6 +191,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  max-width: 100%;
  `), (0, cssr_1.cM)('hover', `
  background-color: var(--n-merged-th-color-hover);
+ `), (0, cssr_1.cM)('sorting', `
+ background-color: var(--n-merged-th-color-sorting);
  `), (0, cssr_1.cM)('sortable', `
  cursor: pointer;
  `, [(0, cssr_1.cE)('ellipsis', `
@@ -281,6 +291,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  background-color: var(--n-merged-th-color);
  `), (0, cssr_1.cM)('hover', `
  background-color: var(--n-merged-td-color-hover);
+ `), (0, cssr_1.cM)('sorting', `
+ background-color: var(--n-merged-td-color-sorting);
  `), (0, cssr_1.cE)('ellipsis', `
  display: inline-block;
  text-overflow: ellipsis;
@@ -396,6 +408,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  --n-merged-border-color: var(--n-border-color-modal);
  --n-merged-th-color-hover: var(--n-th-color-hover-modal);
  --n-merged-td-color-hover: var(--n-td-color-hover-modal);
+ --n-merged-th-color-sorting: var(--n-th-color-hover-modal);
+ --n-merged-td-color-sorting: var(--n-td-color-hover-modal);
  --n-merged-td-color-striped: var(--n-td-color-striped-modal);
  `)), (0, cssr_1.insidePopover)((0, cssr_1.cB)('data-table', `
  --n-merged-th-color: var(--n-th-color-popover);
@@ -403,6 +417,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  --n-merged-border-color: var(--n-border-color-popover);
  --n-merged-th-color-hover: var(--n-th-color-hover-popover);
  --n-merged-td-color-hover: var(--n-td-color-hover-popover);
+ --n-merged-th-color-sorting: var(--n-th-color-hover-popover);
+ --n-merged-td-color-sorting: var(--n-td-color-hover-popover);
  --n-merged-td-color-striped: var(--n-td-color-striped-popover);
  `))]);
 function createFixedColumnStyle() {

package/lib/data-table/src/use-check.d.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef } from 'vue';
-import type { DataTableSetupProps, RowKey, RowData, TableSelectionColumn, InternalRowData, TmNode } from './interface';
 import type { TreeMate } from 'treemate';
+import type { DataTableSetupProps, InternalRowData, RowData, RowKey, TableSelectionColumn, TmNode } from './interface';
 export declare function useCheck(props: DataTableSetupProps, data: {
     selectionColumnRef: ComputedRef<TableSelectionColumn | null>;
     paginatedDataRef: ComputedRef<TmNode[]>;
@@ -12,7 +12,7 @@ export declare function useCheck(props: DataTableSetupProps, data: {
     someRowsCheckedRef: ComputedRef<boolean>;
     allRowsCheckedRef: ComputedRef<boolean>;
     headerCheckboxDisabledRef: ComputedRef<boolean>;
-    doUpdateCheckedRowKeys: (keys: RowKey[], row: RowData | undefined, action: 'check' | 'uncheck' | 'checkAll' | 'uncheckAll') => void;
+    doUpdateCheckedRowKeys: (keys: RowKey[], row: RowData | undefined, action: "check" | "uncheck" | "checkAll" | "uncheckAll") => void;
     doCheckAll: (checkWholeTable?: boolean) => void;
     doUncheckAll: (checkWholeTable?: boolean) => void;
     doCheck: (rowKey: RowKey | RowKey[], single: boolean | undefined, rowInfo: RowData) => void;

package/lib/data-table/src/use-check.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheck = void 0;
+exports.useCheck = useCheck;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useCheck(props, data) {
     const { paginatedDataRef, treeMateRef, selectionColumnRef } = data;
     const uncontrolledCheckedRowKeysRef = (0, vue_1.ref)(props.defaultCheckedRowKeys);
@@ -40,21 +39,21 @@ function useCheck(props, data) {
         }, 0);
     });
     const countOfCurrentPageDisabledRowsRef = (0, vue_1.computed)(() => {
-        return paginatedDataRef.value.filter((item) => item.disabled).length;
+        return paginatedDataRef.value.filter(item => item.disabled).length;
     });
     const someRowsCheckedRef = (0, vue_1.computed)(() => {
         const { length } = paginatedDataRef.value;
         const { value: mergedInderminateRowKeySet } = mergedInderminateRowKeySetRef;
-        return ((countOfCurrentPageCheckedRowsRef.value > 0 &&
-            countOfCurrentPageCheckedRowsRef.value <
-                length - countOfCurrentPageDisabledRowsRef.value) ||
-            paginatedDataRef.value.some((rowData) => mergedInderminateRowKeySet.has(rowData.key)));
+        return ((countOfCurrentPageCheckedRowsRef.value > 0
+            && countOfCurrentPageCheckedRowsRef.value
+                < length - countOfCurrentPageDisabledRowsRef.value)
+            || paginatedDataRef.value.some(rowData => mergedInderminateRowKeySet.has(rowData.key)));
     });
     const allRowsCheckedRef = (0, vue_1.computed)(() => {
         const { length } = paginatedDataRef.value;
-        return (countOfCurrentPageCheckedRowsRef.value !== 0 &&
-            countOfCurrentPageCheckedRowsRef.value ===
-                length - countOfCurrentPageDisabledRowsRef.value);
+        return (countOfCurrentPageCheckedRowsRef.value !== 0
+            && countOfCurrentPageCheckedRowsRef.value
+                === length - countOfCurrentPageDisabledRowsRef.value);
     });
     const headerCheckboxDisabledRef = (0, vue_1.computed)(() => {
         return paginatedDataRef.value.length === 0;
@@ -66,7 +65,6 @@ function useCheck(props, data) {
         keys.forEach((key) => {
             var _a;
             const row = (_a = getNode(key)) === null || _a === void 0 ? void 0 : _a.rawNode;
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             rows.push(row);
         });
         if (_onUpdateCheckedRowKeys) {
@@ -150,4 +148,3 @@ function useCheck(props, data) {
         doUncheck
     };
 }
-exports.useCheck = useCheck;

package/lib/data-table/src/use-expand.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from 'vue';
 import type { TreeMate } from 'treemate';
-import type { Expandable, InternalRowData, RowKey, DataTableSetupProps } from './interface';
+import type { DataTableSetupProps, Expandable, InternalRowData, RowKey } from './interface';
 export declare function useExpand(props: DataTableSetupProps, treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>): {
     stickyExpandedRowsRef: Ref<boolean>;
     mergedExpandedRowKeysRef: import("vue").ComputedRef<import("treemate").Key[]>;

package/lib/data-table/src/use-expand.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useExpand = void 0;
+exports.useExpand = useExpand;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const _utils_1 = require("../../_utils");
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useExpand(props, treeMateRef) {
     const renderExpandRef = (0, vooks_1.useMemo)(() => {
         for (const col of props.columns) {
@@ -62,4 +61,3 @@ function useExpand(props, treeMateRef) {
         doUpdateExpandedRowKeys
     };
 }
-exports.useExpand = useExpand;

package/lib/data-table/src/use-group-header.d.ts

@@ -1,15 +1,21 @@
 import { type CSSProperties, type ComputedRef } from 'vue';
-import type { TableExpandColumn, TableSelectionColumn, TableColumn, TableBaseColumn, ColumnKey, DataTableSetupProps } from './interface';
+import type { ColumnKey, DataTableSetupProps, TableBaseColumn, TableColumn, TableExpandColumn, TableSelectionColumn } from './interface';
 export interface RowItem {
     colSpan: number;
     rowSpan: number;
     column: TableColumn;
+    colIndex: number;
     isLast: boolean;
 }
 export interface ColItem {
     key: string | number;
     style: CSSProperties;
     column: TableSelectionColumn | TableExpandColumn | TableBaseColumn;
+    index: number;
+    /**
+     * The width property is only applied to horizontally virtual scroll table
+     */
+    width: number;
 }
 export declare function useGroupHeader(props: DataTableSetupProps, getResizableWidth: (key: ColumnKey) => number | undefined): {
     rowsRef: ComputedRef<RowItem[][]>;

package/lib/data-table/src/use-group-header.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGroupHeader = void 0;
+exports.useGroupHeader = useGroupHeader;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
@@ -17,7 +17,7 @@ function getRowsAndCols(columns, getResizableWidth) {
             rows[currentDepth] = [];
             maxDepth = currentDepth;
         }
-        for (const column of columns) {
+        columns.forEach((column, index) => {
             if ('children' in column) {
                 ensureMaxDepth(column.children, currentDepth + 1);
             }
@@ -26,7 +26,10 @@ function getRowsAndCols(columns, getResizableWidth) {
                 cols.push({
                     key: (0, utils_1.getColKey)(column),
                     style: (0, utils_1.createCustomWidthStyle)(column, key !== undefined ? (0, _utils_1.formatLength)(getResizableWidth(key)) : undefined),
-                    column
+                    column,
+                    index,
+                    // The width property is only applied to horizontally virtual scroll table
+                    width: column.width === undefined ? 128 : Number(column.width)
                 });
                 totalRowSpan += 1;
                 if (!hasEllipsis) {
@@ -34,13 +37,13 @@ function getRowsAndCols(columns, getResizableWidth) {
                 }
                 dataRelatedCols.push(column);
             }
-        }
+        });
     }
     ensureMaxDepth(columns, 0);
     let currentLeafIndex = 0;
     function ensureColLayout(columns, currentDepth) {
         let hideUntilIndex = 0;
-        columns.forEach((column, index) => {
+        columns.forEach((column) => {
             var _a;
             if ('children' in column) {
                 // do not allow colSpan > 1 for non-leaf th
@@ -48,6 +51,7 @@ function getRowsAndCols(columns, getResizableWidth) {
                 const cachedCurrentLeafIndex = currentLeafIndex;
                 const rowItem = {
                     column,
+                    colIndex: currentLeafIndex,
                     colSpan: 0,
                     rowSpan: 1,
                     isLast: false
@@ -79,6 +83,7 @@ function getRowsAndCols(columns, getResizableWidth) {
                 const rowItem = {
                     column,
                     colSpan,
+                    colIndex: currentLeafIndex,
                     rowSpan: maxDepth - currentDepth + 1,
                     isLast
                 };
@@ -105,4 +110,3 @@ function useGroupHeader(props, getResizableWidth) {
         dataRelatedColsRef: (0, vue_1.computed)(() => rowsAndCols.value.dataRelatedCols)
     };
 }
-exports.useGroupHeader = useGroupHeader;

package/lib/data-table/src/use-resizable.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResizable = void 0;
+exports.useResizable = useResizable;
 const vue_1 = require("vue");
 const utils_1 = require("./utils");
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useResizable() {
     const resizableWidthsRef = (0, vue_1.ref)({});
     function getResizableWidth(key) {
@@ -23,4 +22,3 @@ function useResizable() {
         clearResizableWidth
     };
 }
-exports.useResizable = useResizable;

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

@@ -1,5 +1,5 @@
 import { type ComputedRef, type Ref } from 'vue';
-import type { ColumnKey, MainTableRef, TableColumn, DataTableSetupProps } from './interface';
+import type { ColumnKey, DataTableSetupProps, MainTableRef, TableColumn } from './interface';
 export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef }: {
     bodyWidthRef: Ref<null | number>;
     mainTableInstRef: Ref<MainTableRef | null>;

package/lib/data-table/src/use-scroll.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScroll = void 0;
+exports.useScroll = useScroll;
 const seemly_1 = require("seemly");
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef }) {
     let lastScrollLeft = 0;
     const scrollPartRef = (0, vue_1.ref)();
@@ -17,10 +16,10 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         return (0, _utils_1.formatLength)(props.scrollX);
     });
     const leftFixedColumnsRef = (0, vue_1.computed)(() => {
-        return props.columns.filter((column) => column.fixed === 'left');
+        return props.columns.filter(column => column.fixed === 'left');
     });
     const rightFixedColumnsRef = (0, vue_1.computed)(() => {
-        return props.columns.filter((column) => column.fixed === 'right');
+        return props.columns.filter(column => column.fixed === 'right');
     });
     const fixedColumnLeftMapRef = (0, vue_1.computed)(() => {
         const columns = {};
@@ -84,7 +83,7 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
     }
     function deriveActiveLeftFixedChildrenColumns() {
         leftActiveFixedChildrenColKeysRef.value = [];
-        let activeLeftFixedColumn = props.columns.find((col) => (0, utils_1.getColKey)(col) === leftActiveFixedColKeyRef.value);
+        let activeLeftFixedColumn = props.columns.find(col => (0, utils_1.getColKey)(col) === leftActiveFixedColKeyRef.value);
         while (activeLeftFixedColumn && 'children' in activeLeftFixedColumn) {
             const length = activeLeftFixedColumn.children.length;
             if (length === 0)
@@ -107,10 +106,10 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         const { value: fixedColumnRightMap } = fixedColumnRightMapRef;
         for (let i = rightFixedColumns.length - 1; i >= 0; --i) {
             const key = (0, utils_1.getColKey)(rightFixedColumns[i]);
-            if (Math.round(lastScrollLeft +
-                (((_a = fixedColumnRightMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) +
-                tableWidth -
-                rightWidth) < scrollWidth) {
+            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;
             }
@@ -122,10 +121,10 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
     }
     function deriveActiveRightFixedChildrenColumns() {
         rightActiveFixedChildrenColKeysRef.value = [];
-        let activeRightFixedColumn = props.columns.find((col) => (0, utils_1.getColKey)(col) === rightActiveFixedColKeyRef.value);
-        while (activeRightFixedColumn &&
-            'children' in activeRightFixedColumn &&
-            activeRightFixedColumn.children.length) {
+        let activeRightFixedColumn = props.columns.find(col => (0, utils_1.getColKey)(col) === rightActiveFixedColKeyRef.value);
+        while (activeRightFixedColumn
+            && 'children' in activeRightFixedColumn
+            && activeRightFixedColumn.children.length) {
             const nextActiveRightFixedColumn = activeRightFixedColumn.children[0];
             rightActiveFixedChildrenColKeysRef.value.push((0, utils_1.getColKey)(nextActiveRightFixedColumn));
             activeRightFixedColumn = nextActiveRightFixedColumn;
@@ -226,4 +225,3 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         setHeaderScrollLeft
     };
 }
-exports.useScroll = useScroll;

package/lib/data-table/src/use-sorter.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef } from 'vue';
-import type { ColumnKey, InternalRowData, SortOrder, SortState, TmNode, TableBaseColumn, TableExpandColumn, TableSelectionColumn, CompareFn, DataTableSetupProps } from './interface';
+import type { ColumnKey, CompareFn, DataTableSetupProps, InternalRowData, SortOrder, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn, TmNode } from './interface';
 export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsRef, filteredDataRef }: {
     dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
     filteredDataRef: ComputedRef<TmNode[]>;

package/lib/data-table/src/use-sorter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSorter = void 0;
+exports.useSorter = useSorter;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
@@ -11,19 +11,19 @@ function getMultiplePriority(sorter) {
     return false;
 }
 function getSortFunction(sorter, columnKey) {
-    if (columnKey &&
-        (sorter === undefined ||
-            sorter === 'default' ||
-            (typeof sorter === 'object' && sorter.compare === 'default'))) {
+    if (columnKey
+        && (sorter === undefined
+            || sorter === 'default'
+            || (typeof sorter === 'object' && sorter.compare === 'default'))) {
         return getDefaultSorterFn(columnKey);
     }
     if (typeof sorter === 'function') {
         return sorter;
     }
-    if (sorter &&
-        typeof sorter === 'object' &&
-        sorter.compare &&
-        sorter.compare !== 'default') {
+    if (sorter
+        && typeof sorter === 'object'
+        && sorter.compare
+        && sorter.compare !== 'default') {
         return sorter.compare;
     }
     return false;
@@ -49,7 +49,6 @@ function getDefaultSorterFn(columnKey) {
         return 0;
     };
 }
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
     const defaultSortState = [];
     // initialize
@@ -67,11 +66,11 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
     const mergedSortStateRef = (0, vue_1.computed)(() => {
         // If one of the columns's sort order is false or 'ascend' or 'descend',
         // the table's controll functionality should work in controlled manner.
-        const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter((column) => column.type !== 'selection' &&
-            column.sorter !== undefined &&
-            (column.sortOrder === 'ascend' ||
-                column.sortOrder === 'descend' ||
-                column.sortOrder === false));
+        const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter(column => column.type !== 'selection'
+            && column.sorter !== undefined
+            && (column.sortOrder === 'ascend'
+                || column.sortOrder === 'descend'
+                || column.sortOrder === false));
         // if multiple columns are controlled sortable, then we need to find columns with active sortOrder
         const columnToSort = columnsWithControlledSortOrder.filter((col) => col.sortOrder !== false);
         if (columnToSort.length) {
@@ -80,9 +79,7 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
                     columnKey: column.key,
                     // column to sort has controlled sorter
                     // sorter && sort order won't be undefined
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     order: column.sortOrder,
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     sorter: column.sorter
                 };
             });
@@ -134,7 +131,7 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
         // Multiple sorter (if you clicked on a multiple sort column)
         if (sortState && getMultiplePriority(sortState.sorter) !== false) {
             // clear column is not multiple sort
-            currentSortState = currentSortState.filter((sortState) => getMultiplePriority(sortState.sorter) !== false);
+            currentSortState = currentSortState.filter(sortState => getMultiplePriority(sortState.sorter) !== false);
             updateSortStatesByNewSortState(currentSortState, sortState);
             return currentSortState;
         }
@@ -167,9 +164,9 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
             clearSorter();
         }
         else {
-            const columnToSort = dataRelatedColsRef.value.find((column) => column.type !== 'selection' &&
-                column.type !== 'expand' &&
-                column.key === columnKey);
+            const columnToSort = dataRelatedColsRef.value.find(column => column.type !== 'selection'
+                && column.type !== 'expand'
+                && column.key === columnKey);
             if (!(columnToSort === null || columnToSort === void 0 ? void 0 : columnToSort.sorter))
                 return;
             const sorter = columnToSort.sorter;
@@ -184,7 +181,7 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
         doUpdateSorter(null);
     }
     function updateSortStatesByNewSortState(sortStates, sortState) {
-        const index = sortStates.findIndex((state) => (sortState === null || sortState === void 0 ? void 0 : sortState.columnKey) && state.columnKey === sortState.columnKey);
+        const index = sortStates.findIndex(state => (sortState === null || sortState === void 0 ? void 0 : sortState.columnKey) && state.columnKey === sortState.columnKey);
         if (index !== undefined && index >= 0) {
             sortStates[index] = sortState;
         }
@@ -200,4 +197,3 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
         deriveNextSorter
     };
 }
-exports.useSorter = useSorter;

package/lib/data-table/src/use-table-data.d.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef } from 'vue';
 import type { PaginationProps } from '../../pagination/src/Pagination';
-import type { ColumnKey, FilterState, TableBaseColumn, TableSelectionColumn, InternalRowData, TmNode, TableExpandColumn, RowKey, DataTableSetupProps } from './interface';
+import type { ColumnKey, DataTableSetupProps, FilterState, InternalRowData, RowKey, TableBaseColumn, TableExpandColumn, TableSelectionColumn, TmNode } from './interface';
 export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: {
     dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
 }): {

package/lib/data-table/src/use-table-data.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTableData = void 0;
+exports.useTableData = useTableData;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const treemate_1 = require("treemate");
 const _utils_1 = require("../../_utils");
-const utils_1 = require("./utils");
+const utils_1 = require("../../pagination/src/utils");
+const utils_2 = require("./utils");
 const use_sorter_1 = require("./use-sorter");
-const utils_2 = require("../../pagination/src/utils");
 // useTableData combines filter, sorter and pagination
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useTableData(props, { dataRelatedColsRef }) {
     const selectionColumnRef = (0, vue_1.computed)(() => {
         const getSelectionColumn = (cols) => {
@@ -31,7 +30,7 @@ function useTableData(props, { dataRelatedColsRef }) {
         return (0, treemate_1.createTreeMate)(props.data, {
             ignoreEmptyChildren: true,
             getKey: props.rowKey,
-            getChildren: (rowData) => rowData[childrenKey],
+            getChildren: rowData => rowData[childrenKey],
             getDisabled: (rowData) => {
                 var _a, _b;
                 if ((_b = (_a = selectionColumnRef.value) === null || _a === void 0 ? void 0 : _a.disabled) === null || _b === void 0 ? void 0 : _b.call(_a, rowData)) {
@@ -59,11 +58,11 @@ function useTableData(props, { dataRelatedColsRef }) {
     const uncontrolledFilterStateRef = (0, vue_1.ref)({});
     const { pagination } = props;
     const uncontrolledCurrentPageRef = (0, vue_1.ref)(pagination ? pagination.defaultPage || 1 : 1);
-    const uncontrolledPageSizeRef = (0, vue_1.ref)((0, utils_2.getDefaultPageSize)(pagination));
+    const uncontrolledPageSizeRef = (0, vue_1.ref)((0, utils_1.getDefaultPageSize)(pagination));
     const mergedFilterStateRef = (0, vue_1.computed)(() => {
         const columnsWithControlledFilter = dataRelatedColsRef.value.filter((column) => {
-            return (column.filterOptionValues !== undefined ||
-                column.filterOptionValue !== undefined);
+            return (column.filterOptionValues !== undefined
+                || column.filterOptionValue !== undefined);
         });
         const controlledFilterState = {};
         columnsWithControlledFilter.forEach((column) => {
@@ -77,7 +76,7 @@ function useTableData(props, { dataRelatedColsRef }) {
                 controlledFilterState[column.key] = column.filterOptionValues;
             }
         });
-        const activeFilters = Object.assign((0, utils_1.createShallowClonedObject)(uncontrolledFilterStateRef.value), controlledFilterState);
+        const activeFilters = Object.assign((0, utils_2.createShallowClonedObject)(uncontrolledFilterStateRef.value), controlledFilterState);
         return activeFilters;
     });
     const filteredDataRef = (0, vue_1.computed)(() => {
@@ -89,9 +88,9 @@ function useTableData(props, { dataRelatedColsRef }) {
         const { value: { treeNodes: data } } = treeMateRef;
         const columnEntries = [];
         columns.forEach((column) => {
-            if (column.type === 'selection' ||
-                column.type === 'expand' ||
-                'children' in column) {
+            if (column.type === 'selection'
+                || column.type === 'expand'
+                || 'children' in column) {
                 return;
             }
             columnEntries.push([column.key, column]);
@@ -115,12 +114,12 @@ function useTableData(props, { dataRelatedColsRef }) {
                         : column.filter;
                     if (column && typeof filter === 'function') {
                         if (column.filterMode === 'and') {
-                            if (activeFilterOptionValues.some((filterOptionValue) => !filter(filterOptionValue, row))) {
+                            if (activeFilterOptionValues.some(filterOptionValue => !filter(filterOptionValue, row))) {
                                 return false;
                             }
                         }
                         else {
-                            if (activeFilterOptionValues.some((filterOptionValue) => filter(filterOptionValue, row))) {
+                            if (activeFilterOptionValues.some(filterOptionValue => filter(filterOptionValue, row))) {
                                 continue;
                             }
                             else {
@@ -143,17 +142,17 @@ function useTableData(props, { dataRelatedColsRef }) {
         if (column.filter) {
             const defaultFilterOptionValues = column.defaultFilterOptionValues;
             if (column.filterMultiple) {
-                uncontrolledFilterStateRef.value[column.key] =
-                    defaultFilterOptionValues || [];
+                uncontrolledFilterStateRef.value[column.key]
+                    = defaultFilterOptionValues || [];
             }
             else if (defaultFilterOptionValues !== undefined) {
                 // this branch is for compatibility, someone may use `values` in single filter mode
-                uncontrolledFilterStateRef.value[column.key] =
-                    defaultFilterOptionValues === null ? [] : defaultFilterOptionValues;
+                uncontrolledFilterStateRef.value[column.key]
+                    = defaultFilterOptionValues === null ? [] : defaultFilterOptionValues;
             }
             else {
-                uncontrolledFilterStateRef.value[column.key] =
-                    (_a = column.defaultFilterOptionValue) !== null && _a !== void 0 ? _a : null;
+                uncontrolledFilterStateRef.value[column.key]
+                    = (_a = column.defaultFilterOptionValue) !== null && _a !== void 0 ? _a : null;
             }
         }
     });
@@ -196,7 +195,7 @@ function useTableData(props, { dataRelatedColsRef }) {
         return sortedDataRef.value.slice(startIndex, startIndex + pageSize);
     });
     const rawPaginatedDataRef = (0, vue_1.computed)(() => {
-        return paginatedDataRef.value.map((tmNode) => tmNode.rawNode);
+        return paginatedDataRef.value.map(tmNode => tmNode.rawNode);
     });
     function mergedOnUpdatePage(page) {
         const { pagination } = props;
@@ -298,7 +297,7 @@ function useTableData(props, { dataRelatedColsRef }) {
             uncontrolledFilterStateRef.value = {};
         }
         else if (filters) {
-            uncontrolledFilterStateRef.value = (0, utils_1.createShallowClonedObject)(filters);
+            uncontrolledFilterStateRef.value = (0, utils_2.createShallowClonedObject)(filters);
         }
         else if (process.env.NODE_ENV !== 'production') {
             (0, _utils_1.warn)('data-table', '`filters` is not an object');
@@ -330,4 +329,3 @@ function useTableData(props, { dataRelatedColsRef }) {
         sort
     };
 }
-exports.useTableData = useTableData;

package/lib/data-table/src/utils.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue';
-import type { SortOrder, TableBaseColumn, InternalRowData, SortOrderFlag, SortState, CreateRowClassName, TableSelectionColumn, TableColumn, TableExpandColumn, RowData } from './interface';
+import type { CreateRowClassName, InternalRowData, RowData, SortOrder, SortOrderFlag, SortState, TableBaseColumn, TableColumn, TableExpandColumn, TableSelectionColumn } from './interface';
 export declare const SELECTION_COL_WIDTH = 40;
 export declare const EXPAND_COL_WIDTH = 40;
 export declare function getNumberColWidth(col: TableColumn): number | undefined;