naive-ui 2.33.2 → 2.33.4

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

@@ -85,7 +85,7 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        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, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
+        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, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -103,7 +103,12 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedExpandedRowKeySetRef = (0, vue_1.computed)(() => {
             return new Set(mergedExpandedRowKeysRef.value);
         });
+        function getRowInfo(key) {
+            const currentIndex = paginatedDataRef.value.findIndex((item) => item.key === key);
+            return paginatedDataRef.value[currentIndex].rawNode;
+        }
         function handleCheckboxUpdateChecked(tmNode, checked, shiftKey) {
+            const rowInfo = getRowInfo(tmNode.key);
             if (shiftKey) {
                 const lastIndex = paginatedDataRef.value.findIndex((item) => item.key === lastSelectedKey);
                 if (lastIndex !== -1) {
@@ -117,25 +122,26 @@ exports.default = (0, vue_1.defineComponent)({
                         }
                     });
                     if (checked) {
-                        doCheck(rowKeysToCheck, false);
+                        doCheck(rowKeysToCheck, false, rowInfo);
                     }
                     else {
-                        doUncheck(rowKeysToCheck);
+                        doUncheck(rowKeysToCheck, rowInfo);
                     }
                     lastSelectedKey = tmNode.key;
                     return;
                 }
             }
             if (checked) {
-                doCheck(tmNode.key, false);
+                doCheck(tmNode.key, false, rowInfo);
             }
             else {
-                doUncheck(tmNode.key);
+                doUncheck(tmNode.key, rowInfo);
             }
             lastSelectedKey = tmNode.key;
         }
         function handleRadioUpdateChecked(tmNode) {
-            doCheck(tmNode.key, true);
+            const rowInfo = getRowInfo(tmNode.key);
+            doCheck(tmNode.key, true, rowInfo);
         }
         function getScrollContainer() {
             if (!shouldDisplaySomeTablePartRef.value) {
@@ -280,7 +286,7 @@ exports.default = (0, vue_1.defineComponent)({
                 id: `n-${componentId}`
             });
         });
-        return Object.assign({ bodyWidth: bodyWidthRef, dataTableSlots,
+        return Object.assign({ bodyWidth: bodyWidthRef, summaryPlacement: summaryPlacementRef, dataTableSlots,
             componentId,
             scrollbarInstRef,
             virtualListRef,
@@ -356,32 +362,34 @@ exports.default = (0, vue_1.defineComponent)({
                 if (summary) {
                     const summaryRows = summary(this.rawPaginatedData);
                     if (Array.isArray(summaryRows)) {
-                        mergedData = [
-                            ...mergedPaginationData,
-                            ...summaryRows.map((row, i) => ({
-                                isSummaryRow: true,
-                                key: `__n_summary__${i}`,
-                                tmNode: {
-                                    rawNode: row,
-                                    disabled: true
-                                },
-                                index: -1
-                            }))
-                        ];
+                        const summaryRowData = summaryRows.map((row, i) => ({
+                            isSummaryRow: true,
+                            key: `__n_summary__${i}`,
+                            tmNode: {
+                                rawNode: row,
+                                disabled: true
+                            },
+                            index: -1
+                        }));
+                        mergedData =
+                            this.summaryPlacement === 'top'
+                                ? [...summaryRowData, ...mergedPaginationData]
+                                : [...mergedPaginationData, ...summaryRowData];
                     }
                     else {
-                        mergedData = [
-                            ...mergedPaginationData,
-                            {
-                                isSummaryRow: true,
-                                key: '__n_summary__',
-                                tmNode: {
-                                    rawNode: summaryRows,
-                                    disabled: true
-                                },
-                                index: -1
-                            }
-                        ];
+                        const summaryRowData = {
+                            isSummaryRow: true,
+                            key: '__n_summary__',
+                            tmNode: {
+                                rawNode: summaryRows,
+                                disabled: true
+                            },
+                            index: -1
+                        };
+                        mergedData =
+                            this.summaryPlacement === 'top'
+                                ? [summaryRowData, ...mergedPaginationData]
+                                : [...mergedPaginationData, summaryRowData];
                     }
                 }
                 else {

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

@@ -13,7 +13,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean, e: MouseEvent | KeyboardEvent) => void>;
         required: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     rowKey: {
         type: PropType<RowKey>;
         required: true;

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

@@ -13,7 +13,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean) => void>;
         required: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     rowKey: {
         type: PropType<RowKey>;
         required: true;

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

@@ -168,6 +168,8 @@ declare const _default: import("vue").DefineComponent<{
                 tdPaddingMedium: string;
                 tdPaddingLarge: string;
                 sorterSize: string;
+                resizableContainerSize: string;
+                resizableSize: string;
                 filterSize: string;
                 paginationMargin: string;
                 emptyPadding: string;
@@ -832,6 +834,76 @@ declare const _default: import("vue").DefineComponent<{
                         }, any>;
                     }>;
                 }>;
+                Dropdown: import("../../../_mixins").Theme<"Dropdown", {
+                    optionHeightSmall: string;
+                    optionHeightMedium: string;
+                    optionHeightLarge: string;
+                    optionHeightHuge: string;
+                    borderRadius: string;
+                    fontSizeSmall: string;
+                    fontSizeMedium: string;
+                    fontSizeLarge: string;
+                    fontSizeHuge: string;
+                    optionTextColor: string;
+                    optionTextColorHover: string;
+                    optionTextColorActive: string;
+                    optionTextColorChildActive: string;
+                    color: string;
+                    dividerColor: string;
+                    suffixColor: string;
+                    prefixColor: string;
+                    optionColorHover: string;
+                    optionColorActive: string;
+                    groupHeaderTextColor: string;
+                    optionTextColorInverted: string;
+                    optionTextColorHoverInverted: string;
+                    optionTextColorActiveInverted: string;
+                    optionTextColorChildActiveInverted: string;
+                    colorInverted: string;
+                    dividerColorInverted: string;
+                    suffixColorInverted: string;
+                    prefixColorInverted: string;
+                    optionColorHoverInverted: string;
+                    optionColorActiveInverted: string;
+                    groupHeaderTextColorInverted: string;
+                    optionOpacityDisabled: string;
+                    padding: string;
+                    optionIconSizeSmall: string;
+                    optionIconSizeMedium: string;
+                    optionIconSizeLarge: string;
+                    optionIconSizeHuge: string;
+                    optionSuffixWidthSmall: string;
+                    optionSuffixWidthMedium: string;
+                    optionSuffixWidthLarge: string;
+                    optionSuffixWidthHuge: string;
+                    optionIconSuffixWidthSmall: string;
+                    optionIconSuffixWidthMedium: string;
+                    optionIconSuffixWidthLarge: string;
+                    optionIconSuffixWidthHuge: string;
+                    optionPrefixWidthSmall: string;
+                    optionPrefixWidthMedium: string;
+                    optionPrefixWidthLarge: string;
+                    optionPrefixWidthHuge: string;
+                    optionIconPrefixWidthSmall: string;
+                    optionIconPrefixWidthMedium: string;
+                    optionIconPrefixWidthLarge: string;
+                    optionIconPrefixWidthHuge: string;
+                }, {
+                    Popover: import("../../../_mixins").Theme<"Popover", {
+                        fontSize: string;
+                        borderRadius: string;
+                        color: string;
+                        dividerColor: string;
+                        textColor: string;
+                        boxShadow: string;
+                        space: string;
+                        spaceArrow: string;
+                        arrowOffset: string;
+                        arrowOffsetVertical: string;
+                        arrowHeight: string;
+                        padding: string;
+                    }, any>;
+                }>;
             };
             peerOverrides: {
                 Button?: {
@@ -1152,12 +1224,30 @@ declare const _default: import("vue").DefineComponent<{
                         }>> | undefined;
                     } | undefined;
                 } | undefined;
+                Dropdown?: {
+                    peers?: {
+                        Popover?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Popover", {
+                            fontSize: string;
+                            borderRadius: string;
+                            color: string;
+                            dividerColor: string;
+                            textColor: string;
+                            boxShadow: string;
+                            space: string;
+                            spaceArrow: string;
+                            arrowOffset: string;
+                            arrowOffsetVertical: string;
+                            arrowHeight: string;
+                            padding: string;
+                        }, any>> | undefined;
+                    } | undefined;
+                } | undefined;
             };
         }>;
         required: true;
     };
     renderCell: PropType<(value: any, rowData: object, column: any) => VNodeChild>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
@@ -1325,6 +1415,8 @@ declare const _default: import("vue").DefineComponent<{
                 tdPaddingMedium: string;
                 tdPaddingLarge: string;
                 sorterSize: string;
+                resizableContainerSize: string;
+                resizableSize: string;
                 filterSize: string;
                 paginationMargin: string;
                 emptyPadding: string;
@@ -1989,6 +2081,76 @@ declare const _default: import("vue").DefineComponent<{
                         }, any>;
                     }>;
                 }>;
+                Dropdown: import("../../../_mixins").Theme<"Dropdown", {
+                    optionHeightSmall: string;
+                    optionHeightMedium: string;
+                    optionHeightLarge: string;
+                    optionHeightHuge: string;
+                    borderRadius: string;
+                    fontSizeSmall: string;
+                    fontSizeMedium: string;
+                    fontSizeLarge: string;
+                    fontSizeHuge: string;
+                    optionTextColor: string;
+                    optionTextColorHover: string;
+                    optionTextColorActive: string;
+                    optionTextColorChildActive: string;
+                    color: string;
+                    dividerColor: string;
+                    suffixColor: string;
+                    prefixColor: string;
+                    optionColorHover: string;
+                    optionColorActive: string;
+                    groupHeaderTextColor: string;
+                    optionTextColorInverted: string;
+                    optionTextColorHoverInverted: string;
+                    optionTextColorActiveInverted: string;
+                    optionTextColorChildActiveInverted: string;
+                    colorInverted: string;
+                    dividerColorInverted: string;
+                    suffixColorInverted: string;
+                    prefixColorInverted: string;
+                    optionColorHoverInverted: string;
+                    optionColorActiveInverted: string;
+                    groupHeaderTextColorInverted: string;
+                    optionOpacityDisabled: string;
+                    padding: string;
+                    optionIconSizeSmall: string;
+                    optionIconSizeMedium: string;
+                    optionIconSizeLarge: string;
+                    optionIconSizeHuge: string;
+                    optionSuffixWidthSmall: string;
+                    optionSuffixWidthMedium: string;
+                    optionSuffixWidthLarge: string;
+                    optionSuffixWidthHuge: string;
+                    optionIconSuffixWidthSmall: string;
+                    optionIconSuffixWidthMedium: string;
+                    optionIconSuffixWidthLarge: string;
+                    optionIconSuffixWidthHuge: string;
+                    optionPrefixWidthSmall: string;
+                    optionPrefixWidthMedium: string;
+                    optionPrefixWidthLarge: string;
+                    optionPrefixWidthHuge: string;
+                    optionIconPrefixWidthSmall: string;
+                    optionIconPrefixWidthMedium: string;
+                    optionIconPrefixWidthLarge: string;
+                    optionIconPrefixWidthHuge: string;
+                }, {
+                    Popover: import("../../../_mixins").Theme<"Popover", {
+                        fontSize: string;
+                        borderRadius: string;
+                        color: string;
+                        dividerColor: string;
+                        textColor: string;
+                        boxShadow: string;
+                        space: string;
+                        spaceArrow: string;
+                        arrowOffset: string;
+                        arrowOffsetVertical: string;
+                        arrowHeight: string;
+                        padding: string;
+                    }, any>;
+                }>;
             };
             peerOverrides: {
                 Button?: {
@@ -2309,6 +2471,24 @@ declare const _default: import("vue").DefineComponent<{
                         }>> | undefined;
                     } | undefined;
                 } | undefined;
+                Dropdown?: {
+                    peers?: {
+                        Popover?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Popover", {
+                            fontSize: string;
+                            borderRadius: string;
+                            color: string;
+                            dividerColor: string;
+                            textColor: string;
+                            boxShadow: string;
+                            space: string;
+                            spaceArrow: string;
+                            arrowOffset: string;
+                            arrowOffsetVertical: string;
+                            arrowHeight: string;
+                            padding: string;
+                        }, any>> | undefined;
+                    } | undefined;
+                } | undefined;
             };
         }>;
         required: true;

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

@@ -13,7 +13,7 @@ declare const _default: import("vue").DefineComponent<{
     renderExpandIcon: {
         type: PropType<() => VNodeChild>;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
         required: true;

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

@@ -1,19 +1,20 @@
-import { TableBaseColumn } from '../interface';
+import { TableBaseColumn, ColumnKey } from '../interface';
 declare const _default: import("vue").DefineComponent<{
     discrete: {
         type: BooleanConstructor;
         default: boolean;
     };
 }, {
+    cellElsRef: import("vue").Ref<Record<ColumnKey, HTMLTableCellElement>>;
     componentId: string;
     mergedSortState: import("vue").Ref<import("../interface").SortState[]>;
     mergedClsPrefix: import("vue").Ref<string>;
     scrollX: import("vue").Ref<string | number | undefined>;
-    fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+    fixedColumnLeftMap: import("vue").Ref<Record<ColumnKey, {
         start: number;
         end: number;
     } | undefined>>;
-    fixedColumnRightMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+    fixedColumnRightMap: import("vue").Ref<Record<ColumnKey, {
         start: number;
         end: number;
     } | undefined>>;
@@ -171,6 +172,8 @@ declare const _default: import("vue").DefineComponent<{
             tdPaddingMedium: string;
             tdPaddingLarge: string;
             sorterSize: string;
+            resizableContainerSize: string;
+            resizableSize: string;
             filterSize: string;
             paginationMargin: string;
             emptyPadding: string;
@@ -835,6 +838,76 @@ declare const _default: import("vue").DefineComponent<{
                     }, any>;
                 }>;
             }>;
+            Dropdown: import("../../../_mixins").Theme<"Dropdown", {
+                optionHeightSmall: string;
+                optionHeightMedium: string;
+                optionHeightLarge: string;
+                optionHeightHuge: string;
+                borderRadius: string;
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                optionTextColor: string;
+                optionTextColorHover: string;
+                optionTextColorActive: string;
+                optionTextColorChildActive: string;
+                color: string;
+                dividerColor: string;
+                suffixColor: string;
+                prefixColor: string;
+                optionColorHover: string;
+                optionColorActive: string;
+                groupHeaderTextColor: string;
+                optionTextColorInverted: string;
+                optionTextColorHoverInverted: string;
+                optionTextColorActiveInverted: string;
+                optionTextColorChildActiveInverted: string;
+                colorInverted: string;
+                dividerColorInverted: string;
+                suffixColorInverted: string;
+                prefixColorInverted: string;
+                optionColorHoverInverted: string;
+                optionColorActiveInverted: string;
+                groupHeaderTextColorInverted: string;
+                optionOpacityDisabled: string;
+                padding: string;
+                optionIconSizeSmall: string;
+                optionIconSizeMedium: string;
+                optionIconSizeLarge: string;
+                optionIconSizeHuge: string;
+                optionSuffixWidthSmall: string;
+                optionSuffixWidthMedium: string;
+                optionSuffixWidthLarge: string;
+                optionSuffixWidthHuge: string;
+                optionIconSuffixWidthSmall: string;
+                optionIconSuffixWidthMedium: string;
+                optionIconSuffixWidthLarge: string;
+                optionIconSuffixWidthHuge: string;
+                optionPrefixWidthSmall: string;
+                optionPrefixWidthMedium: string;
+                optionPrefixWidthLarge: string;
+                optionPrefixWidthHuge: string;
+                optionIconPrefixWidthSmall: string;
+                optionIconPrefixWidthMedium: string;
+                optionIconPrefixWidthLarge: string;
+                optionIconPrefixWidthHuge: string;
+            }, {
+                Popover: import("../../../_mixins").Theme<"Popover", {
+                    fontSize: string;
+                    borderRadius: string;
+                    color: string;
+                    dividerColor: string;
+                    textColor: string;
+                    boxShadow: string;
+                    space: string;
+                    spaceArrow: string;
+                    arrowOffset: string;
+                    arrowOffsetVertical: string;
+                    arrowHeight: string;
+                    padding: string;
+                }, any>;
+            }>;
         };
         peerOverrides: {
             Button?: {
@@ -1155,6 +1228,24 @@ declare const _default: import("vue").DefineComponent<{
                     }>> | undefined;
                 } | undefined;
             } | undefined;
+            Dropdown?: {
+                peers?: {
+                    Popover?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Popover", {
+                        fontSize: string;
+                        borderRadius: string;
+                        color: string;
+                        dividerColor: string;
+                        textColor: string;
+                        boxShadow: string;
+                        space: string;
+                        spaceArrow: string;
+                        arrowOffset: string;
+                        arrowOffsetVertical: string;
+                        arrowHeight: string;
+                        padding: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
         };
     }>;
     checkOptions: import("vue").Ref<import("../interface").DataTableSelectionOptions<import("../interface").InternalRowData> | undefined>;
@@ -1165,7 +1256,9 @@ declare const _default: import("vue").DefineComponent<{
     handleCheckboxUpdateChecked: () => void;
     handleColHeaderClick: (e: MouseEvent, column: TableBaseColumn) => void;
     handleTableHeaderScroll: (e: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    handleColumnResizeStart: (column: TableBaseColumn) => void;
+    handleColumnResize: (column: TableBaseColumn, displacementX: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     discrete: {
         type: BooleanConstructor;
         default: boolean;

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

@@ -10,6 +10,7 @@ const checkbox_1 = require("../../../checkbox");
 const ellipsis_1 = require("../../../ellipsis");
 const SortButton_1 = __importDefault(require("../HeaderButton/SortButton"));
 const FilterButton_1 = __importDefault(require("../HeaderButton/FilterButton"));
+const ResizeButton_1 = __importDefault(require("../HeaderButton/ResizeButton"));
 const utils_1 = require("../utils");
 const interface_1 = require("../interface");
 const SelectionMenu_1 = __importDefault(require("./SelectionMenu"));
@@ -27,9 +28,14 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup() {
-        const { mergedClsPrefixRef, scrollXRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, allRowsCheckedRef, someRowsCheckedRef, rowsRef, colsRef, mergedThemeRef, checkOptionsRef, mergedSortStateRef, componentId, scrollPartRef, mergedTableLayoutRef, headerCheckboxDisabledRef, handleTableHeaderScroll, deriveNextSorter, doUncheckAll, doCheckAll
+        const { mergedClsPrefixRef, scrollXRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, allRowsCheckedRef, someRowsCheckedRef, rowsRef, colsRef, mergedThemeRef, checkOptionsRef, mergedSortStateRef, componentId, scrollPartRef, mergedTableLayoutRef, headerCheckboxDisabledRef, onUnstableColumnResize, 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)({});
+        function getCellActualWidth(key) {
+            const element = cellElsRef.value[key];
+            return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width;
+        }
         function handleCheckboxUpdateChecked() {
             if (allRowsCheckedRef.value) {
                 doUncheckAll();
@@ -39,8 +45,10 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function handleColHeaderClick(e, column) {
-            if ((0, seemly_1.happensIn)(e, 'dataTableFilter'))
+            if ((0, seemly_1.happensIn)(e, 'dataTableFilter') ||
+                (0, seemly_1.happensIn)(e, 'dataTableResizable')) {
                 return;
+            }
             if (!(0, utils_1.isColumnSortable)(column))
                 return;
             const activeSorter = mergedSortStateRef.value.find((state) => state.columnKey === column.key) || null;
@@ -53,7 +61,22 @@ exports.default = (0, vue_1.defineComponent)({
         function handleMouseleave() {
             scrollPartRef.value = 'body';
         }
+        const resizeStartWidthMap = new Map();
+        function handleColumnResizeStart(column) {
+            resizeStartWidthMap.set(column.key, getCellActualWidth(column.key));
+        }
+        function handleColumnResize(column, displacementX) {
+            const startWidth = resizeStartWidthMap.get(column.key);
+            if (startWidth === undefined) {
+                return;
+            }
+            const widthAfterResize = startWidth + displacementX;
+            const limitWidth = (0, utils_1.clampValueFollowCSSRules)(widthAfterResize, column.minWidth, column.maxWidth);
+            onUnstableColumnResize(widthAfterResize, limitWidth, column, getCellActualWidth);
+            doUpdateResizableWidth(column, limitWidth);
+        }
         return {
+            cellElsRef,
             componentId,
             mergedSortState: mergedSortStateRef,
             mergedClsPrefix: mergedClsPrefixRef,
@@ -73,11 +96,13 @@ exports.default = (0, vue_1.defineComponent)({
             handleMouseleave,
             handleCheckboxUpdateChecked,
             handleColHeaderClick,
-            handleTableHeaderScroll
+            handleTableHeaderScroll,
+            handleColumnResizeStart,
+            handleColumnResize
         };
     },
     render() {
-        const { mergedClsPrefix, fixedColumnLeftMap, fixedColumnRightMap, currentPage, allRowsChecked, someRowsChecked, rows, cols, mergedTheme, checkOptions, componentId, discrete, mergedTableLayout, headerCheckboxDisabled, mergedSortState, handleColHeaderClick, handleCheckboxUpdateChecked } = this;
+        const { cellElsRef, mergedClsPrefix, fixedColumnLeftMap, fixedColumnRightMap, currentPage, allRowsChecked, someRowsChecked, rows, cols, mergedTheme, checkOptions, componentId, discrete, mergedTableLayout, headerCheckboxDisabled, mergedSortState, handleColHeaderClick, handleCheckboxUpdateChecked, handleColumnResizeStart, handleColumnResize } = this;
         let hasEllipsis = false;
         const theadVNode = ((0, vue_1.h)("thead", { class: `${mergedClsPrefix}-data-table-thead`, "data-n-id": componentId }, rows.map((row) => {
             return ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-data-table-tr` }, row.map(({ column, colSpan, rowSpan, isLast }) => {
@@ -86,9 +111,24 @@ exports.default = (0, vue_1.defineComponent)({
                 const { ellipsis } = column;
                 if (!hasEllipsis && ellipsis)
                     hasEllipsis = true;
+                const createColumnVNode = () => {
+                    if (column.type === 'selection') {
+                        return column.multiple !== false ? ((0, vue_1.h)(vue_1.Fragment, null,
+                            (0, vue_1.h)(checkbox_1.NCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
+                            checkOptions ? ((0, vue_1.h)(SelectionMenu_1.default, { clsPrefix: mergedClsPrefix })) : null)) : null;
+                    }
+                    return ((0, vue_1.h)(vue_1.Fragment, null,
+                        ellipsis === true || (ellipsis && !ellipsis.tooltip) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+                            : ellipsis && typeof ellipsis === 'object' ? ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
+                                default: () => renderTitle(column)
+                            })) : (renderTitle(column)),
+                        (0, utils_1.isColumnSortable)(column) ? ((0, vue_1.h)(SortButton_1.default, { column: column })) : null,
+                        (0, utils_1.isColumnFilterable)(column) ? ((0, vue_1.h)(FilterButton_1.default, { column: column, options: column.filterOptions })) : null,
+                        (0, utils_1.isColumnResizable)(column) ? ((0, vue_1.h)(ResizeButton_1.default, { onResizeStart: () => handleColumnResizeStart(column), onResize: (displacementX) => handleColumnResize(column, displacementX) })) : null));
+                };
                 const leftFixed = key in fixedColumnLeftMap;
                 const rightFixed = key in fixedColumnRightMap;
-                return ((0, vue_1.h)("th", { key: key, style: {
+                return ((0, vue_1.h)("th", { ref: (el) => (cellElsRef[key] = el), key: key, style: {
                         textAlign: column.align,
                         left: (0, seemly_1.pxfy)((_a = fixedColumnLeftMap[key]) === null || _a === void 0 ? void 0 : _a.start),
                         right: (0, seemly_1.pxfy)((_b = fixedColumnRightMap[key]) === null || _b === void 0 ? void 0 : _b.start)
@@ -110,15 +150,7 @@ exports.default = (0, vue_1.defineComponent)({
                         ? (e) => {
                             handleColHeaderClick(e, column);
                         }
-                        : undefined },
-                    column.type === 'selection' ? (column.multiple !== false ? ((0, vue_1.h)(vue_1.Fragment, null,
-                        (0, vue_1.h)(checkbox_1.NCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
-                        checkOptions ? ((0, vue_1.h)(SelectionMenu_1.default, { clsPrefix: mergedClsPrefix })) : null)) : null) : ellipsis === true || (ellipsis && !ellipsis.tooltip) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-                        : ellipsis && typeof ellipsis === 'object' ? ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
-                            default: () => renderTitle(column)
-                        })) : (renderTitle(column)),
-                    (0, utils_1.isColumnSortable)(column) ? ((0, vue_1.h)(SortButton_1.default, { column: column })) : null,
-                    (0, utils_1.isColumnFilterable)(column) ? ((0, vue_1.h)(FilterButton_1.default, { column: column, options: column.filterOptions })) : null));
+                        : undefined }, createColumnVNode()));
             })));
         })));
         if (!discrete) {