naive-ui 2.22.0 → 2.24.0

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

@@ -82,31 +82,11 @@ export declare const dataTableProps: {
     readonly onUpdateCheckedRowKeys: PropType<MaybeArray<OnUpdateCheckedRowKeys>>;
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
-    readonly onPageChange: {
-        readonly type: PropType<MaybeArray<(page: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onPageSizeChange: {
-        readonly type: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onSorterChange: {
-        readonly type: PropType<MaybeArray<OnUpdateSorter> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onFiltersChange: {
-        readonly type: PropType<MaybeArray<OnUpdateFilters> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onCheckedRowKeysChange: {
-        readonly type: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
+    readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
+    readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"DataTable", {
         actionDividerColor: string;
         lineHeight: string;
@@ -1990,31 +1970,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly onUpdateCheckedRowKeys: PropType<MaybeArray<OnUpdateCheckedRowKeys>>;
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
-    readonly onPageChange: {
-        readonly type: PropType<MaybeArray<(page: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onPageSizeChange: {
-        readonly type: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onSorterChange: {
-        readonly type: PropType<MaybeArray<OnUpdateSorter> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onFiltersChange: {
-        readonly type: PropType<MaybeArray<OnUpdateFilters> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onCheckedRowKeysChange: {
-        readonly type: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
+    readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
+    readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"DataTable", {
         actionDividerColor: string;
         lineHeight: string;
@@ -3817,45 +3777,45 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--th-padding': string;
-        '--td-padding': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--line-height': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--th-color': string;
-        '--th-color-hover': string;
-        '--th-color-modal': string;
-        '--th-color-hover-modal': string;
-        '--th-color-popover': string;
-        '--th-color-hover-popover': string;
-        '--td-color': string;
-        '--td-color-hover': string;
-        '--td-color-modal': string;
-        '--td-color-hover-modal': string;
-        '--td-color-popover': string;
-        '--td-color-hover-popover': string;
-        '--th-text-color': string;
-        '--td-text-color': string;
-        '--th-font-weight': string;
-        '--th-button-color-hover': string;
-        '--th-icon-color': string;
-        '--th-icon-color-active': string;
-        '--filter-size': string;
-        '--pagination-margin': string;
-        '--empty-padding': string;
-        '--box-shadow-before': string;
-        '--box-shadow-after': string;
-        '--sorter-size': string;
-        '--loading-size': string;
-        '--loading-color': string;
-        '--opacity-loading': string;
-        '--td-color-striped': string;
-        '--td-color-striped-modal': string;
-        '--td-color-striped-popover': string;
+        '--n-font-size': string;
+        '--n-th-padding': string;
+        '--n-td-padding': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-line-height': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-th-color': string;
+        '--n-th-color-hover': string;
+        '--n-th-color-modal': string;
+        '--n-th-color-hover-modal': string;
+        '--n-th-color-popover': string;
+        '--n-th-color-hover-popover': string;
+        '--n-td-color': string;
+        '--n-td-color-hover': string;
+        '--n-td-color-modal': string;
+        '--n-td-color-hover-modal': string;
+        '--n-n-td-color-popover': string;
+        '--n-td-color-hover-popover': string;
+        '--n-th-text-color': string;
+        '--n-td-text-color': string;
+        '--n-th-font-weight': string;
+        '--n-th-button-color-hover': string;
+        '--n-th-icon-color': string;
+        '--n-th-icon-color-active': string;
+        '--n-filter-size': string;
+        '--n-pagination-margin': string;
+        '--n-empty-padding': string;
+        '--n-box-shadow-before': string;
+        '--n-box-shadow-after': string;
+        '--n-sorter-size': string;
+        '--n-loading-size': string;
+        '--n-loading-color': string;
+        '--n-opacity-loading': string;
+        '--n-td-color-striped': string;
+        '--n-td-color-striped-modal': string;
+        '--n-td-color-striped-popover': string;
     }>;
     filter: (filters: import("./interface").FilterState | null) => void;
     filters: (filters: import("./interface").FilterState | null) => void;
@@ -6731,7 +6691,6 @@ declare const _default: import("vue").DefineComponent<{
     virtualScroll: boolean;
     remote: boolean;
     pagination: false | PaginationProps;
-    onPageSizeChange: MaybeArray<(pageSize: number) => void> | undefined;
     bottomBordered: boolean | undefined;
     striped: boolean;
     defaultCheckedRowKeys: RowKey[];
@@ -6742,9 +6701,5 @@ declare const _default: import("vue").DefineComponent<{
     childrenKey: string;
     indent: number;
     flexHeight: boolean;
-    onPageChange: MaybeArray<(page: number) => void> | undefined;
-    onSorterChange: MaybeArray<OnUpdateSorter> | undefined;
-    onFiltersChange: MaybeArray<OnUpdateFilters> | undefined;
-    onCheckedRowKeysChange: MaybeArray<OnUpdateCheckedRowKeys> | undefined;
 }>;
 export default _default;

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

@@ -1,18 +1,18 @@
-import { h, computed, defineComponent, ref, provide, toRef, Transition } from 'vue';
+import { h, computed, defineComponent, ref, provide, toRef, Transition, watchEffect } from 'vue';
 import { createId } from 'seemly';
 import { useConfig, useLocale, useTheme } from '../../_mixins';
 import { NBaseLoading } from '../../_internal';
 import { NPagination } from '../../pagination';
-import { warn, createKey } from '../../_utils';
+import { createKey, warnOnce } from '../../_utils';
 import { dataTableLight } from '../styles';
 import MainTable from './MainTable';
 import { useCheck } from './use-check';
 import { useTableData } from './use-table-data';
 import { useScroll } from './use-scroll';
 import { dataTableInjectionKey } from './interface';
-import style from './styles/index.cssr';
 import { useGroupHeader } from './use-group-header';
 import { useExpand } from './use-expand';
+import style from './styles/index.cssr';
 export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), { pagination: {
         type: [Object, Boolean],
         default: false
@@ -56,57 +56,31 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
         default: 16
     }, flexHeight: Boolean, '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], 
     // deprecated
-    onPageChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('data-table', '`on-page-change` is deprecated, please use `on-update:page` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onPageSizeChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('data-table', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onSorterChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('data-table', '`on-sorter-change` is deprecated, please use `on-update:sorter` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onFiltersChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('data-table', '`on-filters-change` is deprecated, please use `on-update:filters` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, onCheckedRowKeysChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('data-table', '`on-checked-row-keys-change` is deprecated, please use `on-update:checked-row-keys` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 export default defineComponent({
     name: 'DataTable',
     alias: ['AdvancedTable'],
     props: dataTableProps,
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onPageChange !== undefined) {
+                    warnOnce('data-table', '`on-page-change` is deprecated, please use `on-update:page` instead.');
+                }
+                if (props.onPageSizeChange !== undefined) {
+                    warnOnce('data-table', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
+                }
+                if (props.onSorterChange !== undefined) {
+                    warnOnce('data-table', '`on-sorter-change` is deprecated, please use `on-update:sorter` instead.');
+                }
+                if (props.onFiltersChange !== undefined) {
+                    warnOnce('data-table', '`on-filters-change` is deprecated, please use `on-update:filters` instead.');
+                }
+                if (props.onCheckedRowKeysChange !== undefined) {
+                    warnOnce('data-table', '`on-checked-row-keys-change` is deprecated, please use `on-update:checked-row-keys` instead.');
+                }
+            });
+        }
         const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
         const mergedBottomBorderedRef = computed(() => {
             const { bottomBordered } = props;
@@ -200,9 +174,9 @@ export default defineComponent({
                 const { self: { actionDividerColor, actionPadding, actionButtonMargin } } = themeRef.value;
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return {
-                    '--action-padding': actionPadding,
-                    '--action-button-margin': actionButtonMargin,
-                    '--action-divider-color': actionDividerColor
+                    '--n-action-padding': actionPadding,
+                    '--n-action-button-margin': actionButtonMargin,
+                    '--n-action-divider-color': actionDividerColor
                 };
             }),
             mergedTableLayoutRef,
@@ -235,45 +209,45 @@ export default defineComponent({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [createKey('fontSize', size)]: fontSize, [createKey('thPadding', size)]: thPadding, [createKey('tdPadding', size)]: tdPadding } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--th-padding': thPadding,
-                    '--td-padding': tdPadding,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--line-height': lineHeight,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--th-color': thColor,
-                    '--th-color-hover': thColorHover,
-                    '--th-color-modal': thColorModal,
-                    '--th-color-hover-modal': thColorHoverModal,
-                    '--th-color-popover': thColorPopover,
-                    '--th-color-hover-popover': thColorHoverPopover,
-                    '--td-color': tdColor,
-                    '--td-color-hover': tdColorHover,
-                    '--td-color-modal': tdColorModal,
-                    '--td-color-hover-modal': tdColorHoverModal,
-                    '--td-color-popover': tdColorPopover,
-                    '--td-color-hover-popover': tdColorHoverPopover,
-                    '--th-text-color': thTextColor,
-                    '--td-text-color': tdTextColor,
-                    '--th-font-weight': thFontWeight,
-                    '--th-button-color-hover': thButtonColorHover,
-                    '--th-icon-color': thIconColor,
-                    '--th-icon-color-active': thIconColorActive,
-                    '--filter-size': filterSize,
-                    '--pagination-margin': paginationMargin,
-                    '--empty-padding': emptyPadding,
-                    '--box-shadow-before': boxShadowBefore,
-                    '--box-shadow-after': boxShadowAfter,
-                    '--sorter-size': sorterSize,
-                    '--loading-size': loadingSize,
-                    '--loading-color': loadingColor,
-                    '--opacity-loading': opacityLoading,
-                    '--td-color-striped': tdColorStriped,
-                    '--td-color-striped-modal': tdColorStripedModal,
-                    '--td-color-striped-popover': tdColorStripedPopover
+                    '--n-font-size': fontSize,
+                    '--n-th-padding': thPadding,
+                    '--n-td-padding': tdPadding,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-line-height': lineHeight,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-th-color': thColor,
+                    '--n-th-color-hover': thColorHover,
+                    '--n-th-color-modal': thColorModal,
+                    '--n-th-color-hover-modal': thColorHoverModal,
+                    '--n-th-color-popover': thColorPopover,
+                    '--n-th-color-hover-popover': thColorHoverPopover,
+                    '--n-td-color': tdColor,
+                    '--n-td-color-hover': tdColorHover,
+                    '--n-td-color-modal': tdColorModal,
+                    '--n-td-color-hover-modal': tdColorHoverModal,
+                    '--n-n-td-color-popover': tdColorPopover,
+                    '--n-td-color-hover-popover': tdColorHoverPopover,
+                    '--n-th-text-color': thTextColor,
+                    '--n-td-text-color': tdTextColor,
+                    '--n-th-font-weight': thFontWeight,
+                    '--n-th-button-color-hover': thButtonColorHover,
+                    '--n-th-icon-color': thIconColor,
+                    '--n-th-icon-color-active': thIconColorActive,
+                    '--n-filter-size': filterSize,
+                    '--n-pagination-margin': paginationMargin,
+                    '--n-empty-padding': emptyPadding,
+                    '--n-box-shadow-before': boxShadowBefore,
+                    '--n-box-shadow-after': boxShadowAfter,
+                    '--n-sorter-size': sorterSize,
+                    '--n-loading-size': loadingSize,
+                    '--n-loading-color': loadingColor,
+                    '--n-opacity-loading': opacityLoading,
+                    '--n-td-color-striped': tdColorStriped,
+                    '--n-td-color-striped-modal': tdColorStripedModal,
+                    '--n-td-color-striped-popover': tdColorStripedPopover
                 };
             }) });
     },

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

@@ -2,6 +2,8 @@
 import { h, ref, defineComponent, inject, watchEffect, onUnmounted, computed, renderSlot, Fragment } from 'vue';
 import { pxfy, repeat } from 'seemly';
 import { VirtualList, VResizeObserver } from 'vueuc';
+import { useMemo } from 'vooks';
+import { cssrAnchorMetaName } from '../../../_mixins/common';
 import { c } from '../../../_utils/cssr';
 import { NScrollbar } from '../../../_internal';
 import { formatLength } from '../../../_utils';
@@ -12,7 +14,6 @@ import Cell from './Cell';
 import ExpandTrigger from './ExpandTrigger';
 import RenderSafeCheckbox from './BodyCheckbox';
 import TableHeader from './Header';
-import { useMemo } from 'vooks';
 function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
     function traverse(rs) {
@@ -190,12 +191,12 @@ export default defineComponent({
                 const createActiveLeftFixedStyle = (leftActiveFixedColKey) => {
                     if (leftActiveFixedColKey === null)
                         return null;
-                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--box-shadow-after)' });
+                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--n-box-shadow-after)' });
                 };
                 const createActiveRightFixedStyle = (rightActiveFixedColKey) => {
                     if (rightActiveFixedColKey === null)
                         return null;
-                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--box-shadow-before)' });
+                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--n-box-shadow-before)' });
                 };
                 return c([
                     createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
@@ -226,7 +227,8 @@ export default defineComponent({
             style.mount({
                 id: `n-${componentId}`,
                 force: true,
-                props: cProps
+                props: cProps,
+                anchorMetaName: cssrAnchorMetaName
             });
             fixedStyleMounted = true;
         });
@@ -281,7 +283,7 @@ export default defineComponent({
         };
         if (scrollX)
             contentStyle.width = '100%';
-        const tableNode = (h(NScrollbar, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, showScrollbar: !this.bodyShowHeaderOnly, class: `${mergedClsPrefix}-data-table-base-table-body`, style: this.bodyStyle, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }, {
+        const tableNode = (h(NScrollbar, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, style: this.bodyStyle, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }, {
             default: () => {
                 // coordinate to pass if there are cells that cross row & col
                 const cordToPass = {};

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

@@ -36,10 +36,9 @@ export default defineComponent({
                 cell = get(row, key);
             }
         }
-        const tooltip = typeof ellipsis === 'object' ? ellipsis.tooltip : undefined;
-        if (tooltip) {
+        if (ellipsis && typeof ellipsis === 'object') {
             const { mergedTheme } = this;
-            return (h(NEllipsis, { tooltip: tooltip, theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }, { default: () => cell }));
+            return (h(NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), { default: () => cell }));
         }
         return cell;
     }

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

@@ -105,7 +105,7 @@ export default defineComponent({
                     column.type === 'selection' ? (h(Fragment, null,
                         h(NCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
                         checkOptions ? (h(SelectionMenu, { clsPrefix: mergedClsPrefix })) : null)) : ellipsis === true || (ellipsis && !ellipsis.tooltip) ? (h("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-                        : ellipsis && ellipsis.tooltip ? (h(NEllipsis, { tooltip: ellipsis.tooltip, theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }, {
+                        : ellipsis && typeof ellipsis === 'object' ? (h(NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
                             default: () => renderTitle(column)
                         })) : (renderTitle(column)),
                     isColumnSortable(column) ? (h(SortButton, { column: column })) : null,

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

@@ -33,7 +33,7 @@ export declare type SortOrder = 'ascend' | 'descend' | false;
 export declare type Ellipsis = boolean | EllipsisProps;
 export interface CommonColumnInfo {
     fixed?: 'left' | 'right';
-    width?: number;
+    width?: number | string;
     className?: string;
     align?: 'left' | 'center' | 'right';
     ellipsis?: Ellipsis;