@uzum-tech/ui 1.13.2 → 1.14.1

package/lib/config-provider/src/ConfigProvider.d.ts

@@ -36,6 +36,7 @@ export declare const configProviderProps: {
         readonly default: "desktop-first";
     };
     readonly preflightStyleDisabled: BooleanConstructor;
+    readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
@@ -79,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "desktop-first";
     };
     readonly preflightStyleDisabled: BooleanConstructor;
+    readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
@@ -126,6 +128,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "desktop-first";
     };
     readonly preflightStyleDisabled: BooleanConstructor;
+    readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;

package/lib/config-provider/src/ConfigProvider.js

@@ -37,6 +37,7 @@ exports.configProviderProps = {
         default: 'desktop-first'
     },
     preflightStyleDisabled: Boolean,
+    styleMountTarget: Object,
     inlineThemeDisabled: {
         type: Boolean,
         default: undefined
@@ -246,6 +247,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const inlineThemeDisabled = props.inlineThemeDisabled || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.inlineThemeDisabled);
         const preflightStyleDisabled = props.preflightStyleDisabled || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.preflightStyleDisabled);
+        const styleMountTarget = props.styleMountTarget || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget);
         const mergedThemeHashRef = (0, vue_1.computed)(() => {
             const { value: theme } = mergedThemeRef;
             const { value: mergedThemeOverrides } = mergedThemeOverridesRef;
@@ -307,7 +309,8 @@ exports.default = (0, vue_1.defineComponent)({
             mergedThemeRef,
             mergedThemeOverridesRef,
             inlineThemeDisabled: inlineThemeDisabled || false,
-            preflightStyleDisabled: preflightStyleDisabled || false
+            preflightStyleDisabled: preflightStyleDisabled || false,
+            styleMountTarget
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,

package/lib/config-provider/src/internal-interface.d.ts

@@ -457,4 +457,5 @@ export interface ConfigProviderInjection {
     activeBreakpointThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     inlineThemeDisabled: boolean;
     preflightStyleDisabled: boolean;
+    styleMountTarget: ParentNode | undefined;
 }

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

@@ -85,6 +85,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "current";
     };
     readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
+    readonly localStorageKey: StringConstructor;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: TableBaseColumn) => import("vue").VNodeChild>;
     readonly defaultEmptyValue: import("vue").PropType<string | (() => import("vue").VNodeChild) | undefined>;
     readonly renderExpandIcon: import("vue").PropType<import("./interface").RenderExpandIcon>;
@@ -801,6 +802,13 @@ declare const _default: import("vue").DefineComponent<{
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -1749,6 +1757,13 @@ declare const _default: import("vue").DefineComponent<{
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -2697,6 +2712,13 @@ declare const _default: import("vue").DefineComponent<{
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -3668,6 +3690,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -4177,6 +4206,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;
@@ -4498,6 +4534,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "current";
     };
     readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
+    readonly localStorageKey: StringConstructor;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: TableBaseColumn) => import("vue").VNodeChild>;
     readonly defaultEmptyValue: import("vue").PropType<string | (() => import("vue").VNodeChild) | undefined>;
     readonly renderExpandIcon: import("vue").PropType<import("./interface").RenderExpandIcon>;
@@ -5214,6 +5251,13 @@ declare const _default: import("vue").DefineComponent<{
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -6162,6 +6206,13 @@ declare const _default: import("vue").DefineComponent<{
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -7110,6 +7161,13 @@ declare const _default: import("vue").DefineComponent<{
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;

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

@@ -18,6 +18,7 @@ const use_resizable_1 = require("./use-resizable");
 const interface_1 = require("./interface");
 const use_group_header_1 = require("./use-group-header");
 const use_expand_1 = require("./use-expand");
+const use_table_storage_1 = require("./use-table-storage");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'DataTable',
@@ -58,10 +59,10 @@ exports.default = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('DataTable', '-data-table', index_cssr_1.default, styles_1.dataTableLight, props, mergedClsPrefixRef);
         const bodyWidthRef = (0, vue_1.ref)(null);
         const mainTableInstRef = (0, vue_1.ref)(null);
-        const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth } = (0, use_resizable_1.useResizable)();
+        const { getResizableWidth, clearResizableWidth, doUpdateResizableWidth, resizableWidthsRef } = (0, use_resizable_1.useResizable)();
         const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } = (0, use_group_header_1.useGroupHeader)(props, getResizableWidth);
-        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, childTriggerColIndexRef, doUpdatePage, doUpdateFilters, onUnstableColumnResize, deriveNextSorter, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
-        const { doCheckAll, doUncheckAll, doCheck, doUncheck, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = (0, use_check_1.useCheck)(props, {
+        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, childTriggerColIndexRef, doUpdatePage, doUpdatePageSize, doUpdateFilters, onUnstableColumnResize, deriveNextSorter, restoreSortState, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
+        const { doCheckAll, doUncheckAll, doCheck, doUncheck, doUpdateCheckedRowKeys, mergedCheckedRowKeysRef, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = (0, use_check_1.useCheck)(props, {
             selectionColumnRef,
             treeMateRef,
             paginatedDataRef
@@ -72,6 +73,72 @@ exports.default = (0, vue_1.defineComponent)({
             mainTableInstRef,
             mergedCurrentPageRef
         });
+        (0, vue_1.onMounted)(() => {
+            var _a, _b;
+            const key = props.localStorageKey;
+            if (!key)
+                return;
+            const stored = (0, use_table_storage_1.loadTableState)(key);
+            if (!stored)
+                return;
+            if (stored.columnWidths && Object.keys(stored.columnWidths).length > 0) {
+                resizableWidthsRef.value = Object.assign(Object.assign({}, resizableWidthsRef.value), stored.columnWidths);
+            }
+            if (props.pagination && stored.page != null) {
+                doUpdatePage(stored.page);
+            }
+            if (props.pagination && stored.pageSize != null) {
+                doUpdatePageSize(stored.pageSize);
+            }
+            if (stored.filters) {
+                filter(stored.filters);
+            }
+            const sortToRestore = (0, use_table_storage_1.restoreSortStateFromStored)(stored.sortState, dataRelatedColsRef.value);
+            if (sortToRestore === null || sortToRestore === void 0 ? void 0 : sortToRestore.length) {
+                restoreSortState(sortToRestore);
+            }
+            if ((_a = stored.checkedRowKeys) === null || _a === void 0 ? void 0 : _a.length) {
+                doUpdateCheckedRowKeys(stored.checkedRowKeys, undefined, 'check');
+            }
+            if ((_b = stored.expandedRowKeys) === null || _b === void 0 ? void 0 : _b.length) {
+                doUpdateExpandedRowKeys(stored.expandedRowKeys);
+            }
+        });
+        (0, vue_1.watch)(() => {
+            var _a, _b;
+            return props.localStorageKey
+                ? {
+                    key: props.localStorageKey,
+                    columnWidths: resizableWidthsRef.value,
+                    page: (_a = mergedPaginationRef.value) === null || _a === void 0 ? void 0 : _a.page,
+                    pageSize: (_b = mergedPaginationRef.value) === null || _b === void 0 ? void 0 : _b.pageSize,
+                    filters: mergedFilterStateRef.value,
+                    sortState: mergedSortStateRef.value.map((s) => ({
+                        columnKey: s.columnKey,
+                        order: s.order
+                    })),
+                    checkedRowKeys: mergedCheckedRowKeysRef.value,
+                    expandedRowKeys: mergedExpandedRowKeysRef.value
+                }
+                : null;
+        }, (state) => {
+            var _a, _b;
+            if (!(state === null || state === void 0 ? void 0 : state.key))
+                return;
+            (0, use_table_storage_1.saveTableState)(state.key, {
+                columnWidths: state.columnWidths,
+                page: state.page,
+                pageSize: state.pageSize,
+                filters: state.filters,
+                sortState: state.sortState.length ? state.sortState : undefined,
+                checkedRowKeys: ((_a = state.checkedRowKeys) === null || _a === void 0 ? void 0 : _a.length)
+                    ? state.checkedRowKeys
+                    : undefined,
+                expandedRowKeys: ((_b = state.expandedRowKeys) === null || _b === void 0 ? void 0 : _b.length)
+                    ? state.expandedRowKeys
+                    : undefined
+            });
+        }, { deep: true });
         const { localeRef } = (0, _mixins_1.useLocale)('DataTable');
         const mergedTableLayoutRef = (0, vue_1.computed)(() => {
             // Layout

package/lib/data-table/src/HeaderButton/FilterButton.d.ts

@@ -702,6 +702,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -1211,6 +1218,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;

package/lib/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -727,6 +727,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -1236,6 +1243,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;

package/lib/data-table/src/TableParts/Body.d.ts

@@ -728,6 +728,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -1237,6 +1244,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;

package/lib/data-table/src/TableParts/Body.js

@@ -20,6 +20,7 @@ const seemly_1 = require("seemly");
 const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
 const common_1 = require("../../../_mixins/common");
+const context_1 = require("../../../config-provider/src/context");
 const cssr_1 = require("../../../_utils/cssr");
 const _internal_1 = require("../../../_internal");
 const _utils_1 = require("../../../_utils");
@@ -102,6 +103,7 @@ exports.default = (0, vue_1.defineComponent)({
         const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, loadingSkeletonRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell, defaultEmptyValueRef, emptyPropsRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const UConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const scrollbarInstRef = (0, vue_1.ref)(null);
         const virtualListRef = (0, vue_1.ref)(null);
         const emptyElRef = (0, vue_1.ref)(null);
@@ -296,13 +298,15 @@ exports.default = (0, vue_1.defineComponent)({
                 id: `u-${componentId}`,
                 force: true,
                 props: cProps,
-                anchorMetaName: common_1.cssrAnchorMetaName
+                anchorMetaName: common_1.cssrAnchorMetaName,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
             fixedStyleMounted = true;
         });
         (0, vue_1.onUnmounted)(() => {
             style.unmount({
-                id: `u-${componentId}`
+                id: `u-${componentId}`,
+                parent: UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.styleMountTarget
             });
         });
         return Object.assign({ bodyWidth: bodyWidthRef, summaryPlacement: summaryPlacementRef, dataTableSlots,

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

@@ -715,6 +715,13 @@ declare const _default: import("vue").DefineComponent<{
                     borderFocus: string;
                     boxShadowFocus: string;
                     loadingColor: string;
+                    loadingColorSuccess: string;
+                    borderSuccess: string;
+                    borderHoverSuccess: string;
+                    colorFocusSuccess: string;
+                    borderFocusSuccess: string;
+                    boxShadowFocusSuccess: string;
+                    caretColorSuccess: string;
                     loadingColorWarning: string;
                     borderWarning: string;
                     borderHoverWarning: string;
@@ -1224,6 +1231,13 @@ declare const _default: import("vue").DefineComponent<{
                         borderFocus: string;
                         boxShadowFocus: string;
                         loadingColor: string;
+                        loadingColorSuccess: string;
+                        borderSuccess: string;
+                        borderHoverSuccess: string;
+                        colorFocusSuccess: string;
+                        borderFocusSuccess: string;
+                        boxShadowFocusSuccess: string;
+                        caretColorSuccess: string;
                         loadingColorWarning: string;
                         borderWarning: string;
                         borderHoverWarning: string;

package/lib/data-table/src/TableParts/Header.js

@@ -28,7 +28,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup() {
-        const { mergedClsPrefixRef, scrollXRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, allRowsCheckedRef, someRowsCheckedRef, rowsRef, colsRef, mergedThemeRef, checkOptionsRef, mergedSortStateRef, componentId, mergedTableLayoutRef, headerCheckboxDisabledRef, sizeRef, onUnstableColumnResize, doUpdateResizableWidth, handleTableHeaderScroll, deriveNextSorter, doUncheckAll, doCheckAll
+        const { mergedClsPrefixRef, scrollXRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, allRowsCheckedRef, someRowsCheckedRef, rowsRef, colsRef, mergedThemeRef, checkOptionsRef, mergedSortStateRef, componentId, mergedTableLayoutRef, headerCheckboxDisabledRef, sizeRef, onUnstableColumnResize, getResizableWidth, doUpdateResizableWidth, handleTableHeaderScroll, deriveNextSorter, doUncheckAll, doCheckAll
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const cellElsRef = (0, vue_1.ref)({});
@@ -56,13 +56,25 @@ exports.default = (0, vue_1.defineComponent)({
             deriveNextSorter(nextSorter);
         }
         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;
+            return (0, utils_1.getNumberColWidth)(column);
+        }
         function handleColumnResizeStart(column) {
-            resizeStartWidthMap.set(column.key, getCellActualWidth(column.key));
+            resizeStartWidthMap.set(column.key, getColumnStartWidth(column));
         }
         function handleColumnResize(column, displacementX) {
-            const startWidth = resizeStartWidthMap.get(column.key);
+            let startWidth = resizeStartWidthMap.get(column.key);
             if (startWidth === undefined) {
-                return;
+                startWidth = getColumnStartWidth(column);
+                if (startWidth === undefined)
+                    return;
+                resizeStartWidthMap.set(column.key, startWidth);
             }
             const widthAfterResize = startWidth + displacementX;
             const limitWidth = (0, utils_1.clampValueFollowCSSRules)(widthAfterResize, column.minWidth, column.maxWidth);

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

@@ -96,6 +96,7 @@ export declare const dataTableProps: {
         readonly default: "current";
     };
     readonly scrollbarProps: PropType<ScrollbarProps>;
+    readonly localStorageKey: StringConstructor;
     readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn) => VNodeChild>;
     readonly defaultEmptyValue: PropType<string | (() => VNodeChild) | undefined>;
     readonly renderExpandIcon: PropType<RenderExpandIcon>;
@@ -812,6 +813,13 @@ export declare const dataTableProps: {
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -1760,6 +1768,13 @@ export declare const dataTableProps: {
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -2708,6 +2723,13 @@ export declare const dataTableProps: {
                 borderFocus: string;
                 boxShadowFocus: string;
                 loadingColor: string;
+                loadingColorSuccess: string;
+                borderSuccess: string;
+                borderHoverSuccess: string;
+                colorFocusSuccess: string;
+                borderFocusSuccess: string;
+                boxShadowFocusSuccess: string;
+                caretColorSuccess: string;
                 loadingColorWarning: string;
                 borderWarning: string;
                 borderHoverWarning: string;
@@ -3185,6 +3207,18 @@ export interface MainTableInjection {
     leftActiveFixedColKey: ColumnKey | null;
     rightActiveFixedColKey: ColumnKey | null;
 }
+export interface DataTableStorageState {
+    columnWidths?: Record<string, number>;
+    page?: number;
+    pageSize?: number;
+    filters?: FilterState;
+    sortState?: Array<{
+        columnKey: ColumnKey;
+        order: SortState['order'];
+    }>;
+    checkedRowKeys?: RowKey[];
+    expandedRowKeys?: RowKey[];
+}
 export type RenderFilter = (props: {
     active: boolean;
     show: boolean;

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

@@ -53,7 +53,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, scrollbarProps: Object, renderCell: Function, defaultEmptyValue: [String, Function], renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, scrollbarProps: Object, localStorageKey: String, renderCell: Function, defaultEmptyValue: [String, Function], renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.dataTableInjectionKey = (0, _utils_1.createInjectionKey)('u-data-table');

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

@@ -3,4 +3,5 @@ export declare function useResizable(): {
     getResizableWidth: (key: ColumnKey) => number | undefined;
     doUpdateResizableWidth: (column: TableColumn, width: number) => void;
     clearResizableWidth: () => void;
+    resizableWidthsRef: import("vue").Ref<Record<ColumnKey, number>>;
 };

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

@@ -20,6 +20,7 @@ function useResizable() {
     return {
         getResizableWidth,
         doUpdateResizableWidth,
-        clearResizableWidth
+        clearResizableWidth,
+        resizableWidthsRef
     };
 }

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

@@ -16,4 +16,5 @@ export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsR
         };
     }[]>;
     deriveNextSorter: (sortState: SortState | null) => void;
+    doUpdateSorter: (sortState: SortState | SortState[] | null) => void;
 };

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

@@ -189,6 +189,7 @@ function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
         sort,
         sortedDataRef,
         mergedSortStateRef,
-        deriveNextSorter
+        deriveNextSorter,
+        doUpdateSorter
     };
 }

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, FilterState, SortState, TableBaseColumn, TableSelectionColumn, InternalRowData, TmNode, TableExpandColumn, RowKey, DataTableSetupProps } from './interface';
 export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: {
     dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
 }): {
@@ -22,10 +22,11 @@ export declare function useTableData(props: DataTableSetupProps, { dataRelatedCo
     selectionColumnRef: ComputedRef<TableSelectionColumn | null>;
     childTriggerColIndexRef: ComputedRef<number>;
     doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void;
-    deriveNextSorter: (sortState: import("./interface").SortState | null) => void;
+    deriveNextSorter: (sortState: SortState | null) => void;
     doUpdatePageSize: (pageSize: number) => void;
     doUpdatePage: (page: number) => void;
     onUnstableColumnResize: (resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void;
+    restoreSortState: (sortState: SortState | SortState[] | null) => void;
     filter: (filters: FilterState | null) => void;
     filters: (filters: FilterState | null) => void;
     clearFilter: () => void;

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

@@ -131,7 +131,7 @@ function useTableData(props, { dataRelatedColsRef }) {
             })
             : [];
     });
-    const { sortedDataRef, deriveNextSorter, mergedSortStateRef, sort, clearSorter } = (0, use_sorter_1.useSorter)(props, {
+    const { sortedDataRef, deriveNextSorter, mergedSortStateRef, sort, clearSorter, doUpdateSorter } = (0, use_sorter_1.useSorter)(props, {
         dataRelatedColsRef,
         filteredDataRef
     });
@@ -302,6 +302,9 @@ function useTableData(props, { dataRelatedColsRef }) {
             (0, _utils_1.warn)('data-table', '`filters` is not an object');
         }
     }
+    function restoreSortState(sortState) {
+        doUpdateSorter(sortState);
+    }
     return {
         treeMateRef,
         mergedCurrentPageRef: boundedMergedCurrentPageRef,
@@ -318,6 +321,7 @@ function useTableData(props, { dataRelatedColsRef }) {
         doUpdatePageSize,
         doUpdatePage,
         onUnstableColumnResize,
+        restoreSortState,
         // exported methods
         filter,
         filters,

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

@@ -0,0 +1,4 @@
+import type { DataTableStorageState, SortState, TableBaseColumn, TableExpandColumn, TableSelectionColumn } from './interface';
+export declare function loadTableState(localStorageKey: string): DataTableStorageState | null;
+export declare function saveTableState(localStorageKey: string, state: DataTableStorageState): void;
+export declare function restoreSortStateFromStored(stored: DataTableStorageState['sortState'], dataRelatedCols: Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>): SortState[] | null;