npm - @koi-design/uxd-ui - Versions diffs - 14.0.13 → 14.0.14 - Mend

@koi-design/uxd-ui 14.0.13 → 14.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/es/components/Table/hooks/useTableResize.mjs CHANGED Viewed

@@ -18,6 +18,7 @@ function getWidth(width, tableWidth) {
 function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
   const tableWidth = ref(void 0);
   const resizeColumns = shallowRef([]);
+  const columnWidths = ref({});
   const syncColumnsWidth = () => {
     const { bodyTable } = tableRefs;
     if (!bodyTable || bodyTable.getWidth() === void 0) {
@@ -35,6 +36,9 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       tableWidth.value = void 0;
     }
   };
+  const syncColumnWidth = (width, column) => {
+    columnWidths.value[getColumnKey(column)] = width;
+  };
   let syncHeightTimer = null;
   const scrollPosition = ref("left");
   const setScrollPositionClass = () => {
@@ -73,6 +77,7 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       _column.width = width;
     }
     resizeColumns.value = columns;
+    syncColumnWidth(width, _column);
   };
   const isScrollX = computed(() => {
     const { table } = tableRefs;
@@ -106,7 +111,9 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     setScrollPositionClass,
     resetScrollX,
     clearResizeTimer,
-    setResizeWidth
+    setResizeWidth,
+    syncColumnWidth,
+    columnWidths
   };
 }

package/es/components/Table/hooks/useTableResize.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTableResize.mjs","sources":["../../../../../src/components/Table/hooks/useTableResize.ts"],"sourcesContent":["import { computed, ref, shallowRef } from 'vue';\nimport type { ComputedRef, Ref } from 'vue';\nimport { getLeafColumns, getColumnKey } from '../utils';\n// import { shallowequal } from '../../../utils/tools';\nimport type { InnerColumn, TableProps, TableRefs } from '../Table.type';\n\nexport function getWidth(width: string \| number, tableWidth: number) {\n let _width = 0;\n if (typeof width === 'number') {\n _width = width;\n } else if (/^\\dpx$/.test(width)) {\n _width = Number(width.replace('px', ''));\n } else if (/^[\\d.]%$/.test(width)) {\n const percent = Number(width.replace('%', ''));\n if (!Number.isNaN(percent)) {\n _width = Math.floor((percent / 100) * tableWidth);\n }\n }\n return _width;\n}\nexport default function useTableResize(\n updatedColumns: Ref<InnerColumn[]>,\n tableRefs: TableRefs,\n prefixCls: Ref<string>,\n isColumnFixed: ComputedRef<boolean>,\n props: TableProps\n) {\n const tableWidth = ref<number \| undefined>(undefined);\n const resizeColumns = shallowRef<InnerColumn[]>([]);\n\n const syncColumnsWidth = () => {\n const { bodyTable } = tableRefs;\n if (!bodyTable \|\| (bodyTable as any).getWidth() === undefined) {\n return;\n }\n // const wrapWidth = props.border ? bodyTable.clientWidth - 1 : bodyTable.clientWidth;\n const wrapWidth = (bodyTable as any).getWidth();\n\n const columns = getLeafColumns(updatedColumns.value);\n\n const totalWidth = columns.reduce((sum, col) => sum + getWidth(col.width ?? col.minWidth, wrapWidth), 0);\n if (totalWidth > wrapWidth) {\n tableWidth.value = totalWidth;\n } else {\n tableWidth.value = undefined;\n }\n };\n\n let syncHeightTimer: any = null;\n const scrollPosition = ref('left');\n\n const setScrollPositionClass = () => {\n const { bodyTable } = tableRefs;\n const bodyDom = (bodyTable as any).wrapRef;\n if (!bodyDom) {\n return;\n }\n\n const scrollToLeft = bodyDom.scrollLeft === 0;\n const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;\n if (scrollToLeft && scrollToRight) {\n scrollPosition.value = 'both';\n } else if (scrollToLeft) {\n scrollPosition.value = 'left';\n } else if (scrollToRight) {\n scrollPosition.value = 'right';\n } else {\n scrollPosition.value = 'middle';\n }\n };\n const handleResize = () => {\n syncColumnsWidth();\n\n if (isColumnFixed.value) {\n syncHeightTimer = setTimeout(() => {\n // syncFixedTableRowHeight();\n setScrollPositionClass();\n }, 0);\n }\n setTimeout(() => {\n (tableRefs.bodyTable as any).update();\n }, 0);\n };\n\n const setResizeWidth = (column: InnerColumn, width: number) => {\n const columns = getLeafColumns(updatedColumns.value);\n const _column = columns.find((c) => c === column \|\| getColumnKey(c) === getColumnKey(column));\n if (_column) {\n _column.width = width;\n }\n resizeColumns.value = columns;\n };\n const isScrollX = computed(() => {\n const { table } = tableRefs;\n if (table) {\n const wrapWidth = props.border ? table.offsetWidth - 1 : table.offsetWidth;\n return tableWidth.value && tableWidth.value > wrapWidth;\n }\n return false;\n });\n\n const resetScrollX = () => {\n const { bodyTable, headTable } = tableRefs;\n if (bodyTable) {\n (bodyTable as any).setScrollLeft(0);\n }\n if (headTable) {\n (headTable as any).setScrollLeft(0);\n }\n };\n const clearResizeTimer = () => {\n if (syncHeightTimer) {\n clearTimeout(syncHeightTimer);\n syncHeightTimer = null;\n }\n };\n return {\n // sizesMap,\n tableWidth,\n isScrollX,\n scrollPosition,\n resizeColumns,\n handleResize,\n setScrollPositionClass,\n resetScrollX,\n clearResizeTimer,\n setResizeWidth\n };\n}\n"],"names":[],"mappings":";;;SAMgB,SAAS,OAAwB,YAAoB;AACnE,MAAI,SAAS;AACb,MAAI,OAAO,UAAU,UAAU;AAC7B,aAAS;AAAA,aACA,UAAU,KAAK,KAAK,GAAG;AAChC,aAAS,OAAO,MAAM,QAAQ,MAAM,EAAE,CAAC;AAAA,aAC9B,YAAY,KAAK,KAAK,GAAG;AAClC,UAAM,UAAU,OAAO,MAAM,QAAQ,KAAK,EAAE,CAAC;AAC7C,QAAI,CAAC,OAAO,MAAM,OAAO,GAAG;AAC1B,eAAS,KAAK,MAAO,UAAU,MAAO,UAAU;AAAA;AAClD;AAEF,SAAO;AACT;SACwB,eACtB,gBACA,WACA,WACA,eACA,OACA;AACA,QAAM,aAAa,IAAwB,MAAS;AACpD,QAAM,gBAAgB,WAA0B,EAAE;~~AAElD~~,QAAM,mBAAmB,MAAM;AAC7B,UAAM,EAAE,cAAc;AACtB,QAAI,CAAC,aAAc,UAAkB,eAAe,QAAW;AAC7D;AAAA;AAGF,UAAM,YAAa,UAAkB;AAErC,UAAM,UAAU,eAAe,eAAe,KAAK;AAEnD,UAAM,aAAa,QAAQ,OAAO,CAAC,KAAK,QAAK;~~AAxCjD~~;~~AAwCoD~~,mBAAM,UAAS,SAAI,UAAJ,YAAa,IAAI,UAAU,SAAS;AAAA,OAAG,CAAC;AACvG,QAAI,aAAa,WAAW;AAC1B,iBAAW,QAAQ;AAAA,WACd;AACL,iBAAW,QAAQ;AAAA;AACrB;AAGF,MAAI,kBAAuB;AAC3B,QAAM,iBAAiB,IAAI,MAAM;AAEjC,QAAM,yBAAyB,MAAM;AACnC,UAAM,EAAE,cAAc;AACtB,UAAM,UAAW,UAAkB;AACnC,QAAI,CAAC,SAAS;AACZ;AAAA;AAGF,UAAM,eAAe,QAAQ,eAAe;AAC5C,UAAM,gBAAgB,QAAQ,aAAa,KAAK,QAAQ,SAAS,GAAG,wBAAwB,QAAQ,QAAQ,wBAAwB;AACpI,QAAI,gBAAgB,eAAe;AACjC,qBAAe,QAAQ;AAAA,eACd,cAAc;AACvB,qBAAe,QAAQ;AAAA,eACd,eAAe;AACxB,qBAAe,QAAQ;AAAA,WAClB;AACL,qBAAe,QAAQ;AAAA;AACzB;AAEF,QAAM,eAAe,MAAM;AACzB;AAEA,QAAI,cAAc,OAAO;AACvB,wBAAkB,WAAW,MAAM;AAEjC;AAAuB,SACtB,CAAC;AAAA;AAEN,eAAW,MAAM;AACf,MAAC,UAAU,UAAkB;AAAO,OACnC,CAAC;AAAA;AAGN,QAAM,iBAAiB,CAAC,QAAqB,UAAkB;AAC7D,UAAM,UAAU,eAAe,eAAe,KAAK;AACnD,UAAM,UAAU,QAAQ,KAAK,CAAC,MAAM,MAAM,UAAU,aAAa,CAAC,MAAM,aAAa,MAAM,CAAC;AAC5F,QAAI,SAAS;AACX,cAAQ,QAAQ;AAAA;AAElB,kBAAc,QAAQ;AAAA;~~AAExB~~,QAAM,YAAY,SAAS,MAAM;AAC/B,UAAM,EAAE,UAAU;AAClB,QAAI,OAAO;AACT,YAAM,YAAY,MAAM,SAAS,MAAM,cAAc,IAAI,MAAM;AAC/D,aAAO,WAAW,SAAS,WAAW,QAAQ;AAAA;AAEhD,WAAO;AAAA,GACR;AAED,QAAM,eAAe,MAAM;AACzB,UAAM,EAAE,WAAW,cAAc;AACjC,QAAI,WAAW;AACb,MAAC,UAAkB,cAAc,CAAC;AAAA;AAEpC,QAAI,WAAW;AACb,MAAC,UAAkB,cAAc,CAAC;AAAA;AACpC;AAEF,QAAM,mBAAmB,MAAM;AAC7B,QAAI,iBAAiB;AACnB,mBAAa,eAAe;AAC5B,wBAAkB;AAAA;AACpB;AAEF,SAAO;AAAA,IAEL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"useTableResize.mjs","sources":["../../../../../src/components/Table/hooks/useTableResize.ts"],"sourcesContent":["import { computed, ref, shallowRef } from 'vue';\nimport type { ComputedRef, Ref } from 'vue';\nimport { getLeafColumns, getColumnKey } from '../utils';\n// import { shallowequal } from '../../../utils/tools';\nimport type { InnerColumn, TableProps, TableRefs } from '../Table.type';\n\nexport function getWidth(width: string \| number, tableWidth: number) {\n let _width = 0;\n if (typeof width === 'number') {\n _width = width;\n } else if (/^\\dpx$/.test(width)) {\n _width = Number(width.replace('px', ''));\n } else if (/^[\\d.]%$/.test(width)) {\n const percent = Number(width.replace('%', ''));\n if (!Number.isNaN(percent)) {\n _width = Math.floor((percent / 100) * tableWidth);\n }\n }\n return _width;\n}\nexport default function useTableResize(\n updatedColumns: Ref<InnerColumn[]>,\n tableRefs: TableRefs,\n prefixCls: Ref<string>,\n isColumnFixed: ComputedRef<boolean>,\n props: TableProps\n) {\n const tableWidth = ref<number \| undefined>(undefined);\n const resizeColumns = shallowRef<InnerColumn[]>([]);\n const columnWidths = ref<Record<string, number>>({});\n\n const syncColumnsWidth = () => {\n const { bodyTable } = tableRefs;\n if (!bodyTable \|\| (bodyTable as any).getWidth() === undefined) {\n return;\n }\n // const wrapWidth = props.border ? bodyTable.clientWidth - 1 : bodyTable.clientWidth;\n const wrapWidth = (bodyTable as any).getWidth();\n\n const columns = getLeafColumns(updatedColumns.value);\n\n const totalWidth = columns.reduce((sum, col) => sum + getWidth(col.width ?? col.minWidth, wrapWidth), 0);\n if (totalWidth > wrapWidth) {\n tableWidth.value = totalWidth;\n } else {\n tableWidth.value = undefined;\n }\n };\n\n const syncColumnWidth = (width: number, column: InnerColumn) => {\n columnWidths.value[getColumnKey(column)] = width;\n };\n\n let syncHeightTimer: any = null;\n const scrollPosition = ref('left');\n\n const setScrollPositionClass = () => {\n const { bodyTable } = tableRefs;\n const bodyDom = (bodyTable as any).wrapRef;\n if (!bodyDom) {\n return;\n }\n\n const scrollToLeft = bodyDom.scrollLeft === 0;\n const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;\n if (scrollToLeft && scrollToRight) {\n scrollPosition.value = 'both';\n } else if (scrollToLeft) {\n scrollPosition.value = 'left';\n } else if (scrollToRight) {\n scrollPosition.value = 'right';\n } else {\n scrollPosition.value = 'middle';\n }\n };\n const handleResize = () => {\n syncColumnsWidth();\n\n if (isColumnFixed.value) {\n syncHeightTimer = setTimeout(() => {\n // syncFixedTableRowHeight();\n setScrollPositionClass();\n }, 0);\n }\n setTimeout(() => {\n (tableRefs.bodyTable as any).update();\n }, 0);\n };\n\n const setResizeWidth = (column: InnerColumn, width: number) => {\n const columns = getLeafColumns(updatedColumns.value);\n const _column = columns.find((c) => c === column \|\| getColumnKey(c) === getColumnKey(column));\n if (_column) {\n _column.width = width;\n }\n resizeColumns.value = columns;\n syncColumnWidth(width, _column);\n };\n const isScrollX = computed(() => {\n const { table } = tableRefs;\n if (table) {\n const wrapWidth = props.border ? table.offsetWidth - 1 : table.offsetWidth;\n return tableWidth.value && tableWidth.value > wrapWidth;\n }\n return false;\n });\n\n const resetScrollX = () => {\n const { bodyTable, headTable } = tableRefs;\n if (bodyTable) {\n (bodyTable as any).setScrollLeft(0);\n }\n if (headTable) {\n (headTable as any).setScrollLeft(0);\n }\n };\n const clearResizeTimer = () => {\n if (syncHeightTimer) {\n clearTimeout(syncHeightTimer);\n syncHeightTimer = null;\n }\n };\n return {\n // sizesMap,\n tableWidth,\n isScrollX,\n scrollPosition,\n resizeColumns,\n handleResize,\n setScrollPositionClass,\n resetScrollX,\n clearResizeTimer,\n setResizeWidth,\n syncColumnWidth,\n columnWidths\n };\n}\n"],"names":[],"mappings":"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"}

package/es/components/Table/tableUnits/ColGroup.mjs CHANGED Viewed

@@ -8,11 +8,15 @@ const _sfc_main = defineComponent({
     columns: {
       type: Array,
       default: () => []
+    },
+    isHeadTable: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
     const {
-      size: { resizeColumns }
+      size: { resizeColumns, columnWidths }
     } = inject("tableContext", {});
     const cols = computed(() => {
       let rst = [];
@@ -33,8 +37,15 @@ const _sfc_main = defineComponent({
       );
       return rst;
     });
+    const getWidth = (col) => {
+      if (props.isHeadTable) {
+        return `${columnWidths.value[col.key]}px`;
+      }
+      return col.resizeWidth ? col.resizeWidth : col.width;
+    };
     return {
-      cols
+      cols,
+      getWidth
     };
   }
 });
@@ -43,7 +54,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.cols, (col) => {
       return openBlock(), createElementBlock("col", {
         key: col.key,
-        style: normalizeStyle({ width: col.resizeWidth ? col.resizeWidth : col.width, minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
+        style: normalizeStyle({ width: _ctx.getWidth(col), minWidth: col.minWidth, maxWidth: col.fixed ? col.width : "" })
       }, null, 4);
     }), 128))
   ]);

package/es/components/Table/tableUnits/ColGroup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColGroup.mjs","sources":["../../../../../src/components/Table/tableUnits/ColGroup.vue"],"sourcesContent":["<template>\n <colgroup>\n <col\n v-for=\"col in cols\"\n :key=\"col.key\"\n :style=\"{ width: col~~.resizeWidth ? col.resizeWidth : col.width~~, minWidth: col.minWidth, maxWidth: col.fixed ? col.width : '' }\"\n />\n </colgroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, inject } from 'vue';\nimport type { PropType } from 'vue';\nimport type { TableColProps, InnerColumn, TableContext } from '../Table.type';\nimport { getColumnKey, getLeafColumns } from '../utils';\n\nexport default defineComponent({\n name: 'TableColGroup',\n props: {\n columns: {\n type: Array as PropType<InnerColumn[]>,\n default: () => [] as InnerColumn[]\n }\n },\n setup(props) {\n const {\n size: { resizeColumns }\n } = inject<TableContext>('tableContext', {} as TableContext);\n\n const cols = computed(() => {\n let rst: TableColProps[] = [];\n rst = rst.concat(\n getLeafColumns(props.columns).map((col) => {\n const { fixed } = col;\n const colKey = getColumnKey(col);\n const resizeWidth = resizeColumns.value.find((x) => x.key === colKey)?.width;\n return {\n width: typeof col.width === 'number' ? `${col.width}px` : col.width,\n minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth,\n key: colKey,\n fixed: !!fixed,\n resizeWidth: resizeWidth ? `${resizeWidth}px` : undefined\n } as any;\n })\n );\n return rst;\n });\n return {\n cols\n };\n }\n});\n</script>\n"],"names":["_createElementBlock","_Fragment","_normalizeStyle"],"mappings":";;;;~~AAgBA~~,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,MAAM;AAAC;AAClB;AACF,EACA,MAAM,OAAO;UACL;AAAA,MACJ,MAAM,EAAE;~~AAAc~~,~~QACpB~~,OAAqB,gBAAgB,EAAkB;UAErD,OAAO,SAAS,MAAM;UACtB,MAAuB;YACrB,IAAI;AAAA,QACR,eAAe,MAAM,OAAO,EAAE,IAAI,CAAC,QAAQ;~~AArBnD~~;~~gBAsBgB~~,EAAE,UAAU;gBACZ,SAAS,aAAa,GAAG;gBACzB,eAAc,mBAAc,MAAM,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,MAAhD,mBAAmD;iBAChE;AAAA,YACL,OAAO,OAAO,IAAI,UAAU,WAAW,GAAG,IAAI,YAAY,IAAI;AAAA,YAC9D,UAAU,OAAO,IAAI,aAAa,WAAW,GAAG,IAAI,eAAe,IAAI;AAAA,YACvE,KAAK;AAAA,YACL,OAAO,CAAC,CAAC;AAAA,YACT,aAAa,cAAc,GAAG,kBAAkB;AAAA;AAClD,SACD;AAAA;aAEI;AAAA,KACR;~~WACM~~;AAAA,MACL;AAAA;AACF;AAEJ,CAAC;;~~sBAlDCA~~,~~mBAMW~~;~~sBALTA~~,~~mBAIEC~~,~~2BAHc~~,WAAI,CAAX,QAAG;~~0BADZD~~,~~mBAIE~~;~~QAFC~~,KAAK,IAAI;AAAA,~~QACT~~,OAAKE,wBAAW,~~IAAI~~,~~cAAc~~,~~IAAI~~,~~cAAc,~~IAAI,~~OAAK,UAAY,IAAI,~~UAAQ,UAAY,IAAI,QAAQ,IAAI,QAAK;;;;;;;;;"}
1	+ {"version":3,"file":"ColGroup.mjs","sources":["../../../../../src/components/Table/tableUnits/ColGroup.vue"],"sourcesContent":["<template>\n <colgroup>\n <col v-for=\"col in cols\" :key=\"col.key\" :style=\"{ width: getWidth(col), minWidth: col.minWidth, maxWidth: col.fixed ? col.width : '' }\" />\n </colgroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, inject } from 'vue';\nimport type { PropType } from 'vue';\nimport type { TableColProps, InnerColumn, TableContext } from '../Table.type';\nimport { getColumnKey, getLeafColumns } from '../utils';\n\nexport default defineComponent({\n name: 'TableColGroup',\n props: {\n columns: {\n type: Array as PropType<InnerColumn[]>,\n default: () => [] as InnerColumn[]\n },\n isHeadTable: {\n type: Boolean,\n default: false\n }\n },\n setup(props) {\n const {\n size: { resizeColumns, columnWidths }\n } = inject<TableContext>('tableContext', {} as TableContext);\n\n const cols = computed(() => {\n let rst: TableColProps[] = [];\n rst = rst.concat(\n getLeafColumns(props.columns).map((col) => {\n const { fixed } = col;\n const colKey = getColumnKey(col);\n const resizeWidth = resizeColumns.value.find((x) => x.key === colKey)?.width;\n return {\n width: typeof col.width === 'number' ? `${col.width}px` : col.width,\n minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth,\n key: colKey,\n fixed: !!fixed,\n resizeWidth: resizeWidth ? `${resizeWidth}px` : undefined\n } as any;\n })\n );\n return rst;\n });\n\n const getWidth = (col: TableColProps) => {\n if (props.isHeadTable) {\n return `${columnWidths.value[col.key]}px`;\n }\n return col.resizeWidth ? col.resizeWidth : col.width;\n };\n\n return {\n cols,\n getWidth\n };\n }\n});\n</script>\n"],"names":["_createElementBlock","_Fragment","_normalizeStyle"],"mappings":";;;;AAYA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,MAAM;AAAC;AAClB,IACA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AACX;AACF,EACA,MAAM,OAAO;UACL;AAAA,MACJ,MAAM,EAAE,eAAe;AAAa,QAClC,OAAqB,gBAAgB,EAAkB;UAErD,OAAO,SAAS,MAAM;UACtB,MAAuB;YACrB,IAAI;AAAA,QACR,eAAe,MAAM,OAAO,EAAE,IAAI,CAAC,QAAQ;AAzBnD;gBA0BgB,EAAE,UAAU;gBACZ,SAAS,aAAa,GAAG;gBACzB,eAAc,mBAAc,MAAM,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,MAAhD,mBAAmD;iBAChE;AAAA,YACL,OAAO,OAAO,IAAI,UAAU,WAAW,GAAG,IAAI,YAAY,IAAI;AAAA,YAC9D,UAAU,OAAO,IAAI,aAAa,WAAW,GAAG,IAAI,eAAe,IAAI;AAAA,YACvE,KAAK;AAAA,YACL,OAAO,CAAC,CAAC;AAAA,YACT,aAAa,cAAc,GAAG,kBAAkB;AAAA;AAClD,SACD;AAAA;aAEI;AAAA,KACR;UAEK,WAAW,CAAC,QAAuB;UACnC,MAAM,aAAa;eACd,GAAG,aAAa,MAAM,IAAI;AAAA;aAE5B,IAAI,cAAc,IAAI,cAAc,IAAI;AAAA;WAG1C;AAAA,MACL;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;sBA3DCA,mBAEW;sBADTA,mBAA0IC,2BAAvH,WAAI,CAAX,QAAG;0BAAfD,mBAA0I;QAAhH,KAAK,IAAI;AAAA,QAAM,OAAKE,wBAAW,cAAS,GAAG,aAAa,IAAI,UAAQ,UAAY,IAAI,QAAQ,IAAI,QAAK;;;;;;;;;"}

package/es/components/Table/tableUnits/ColGroup.vue.d.ts CHANGED Viewed

@@ -5,14 +5,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<InnerColumn[]>;
         default: () => InnerColumn[];
     };
+    isHeadTable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     cols: import("vue").ComputedRef<TableColProps[]>;
+    getWidth: (col: TableColProps) => string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     columns: {
         type: PropType<InnerColumn[]>;
         default: () => InnerColumn[];
     };
+    isHeadTable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     columns: InnerColumn[];
+    isHeadTable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/components/Table/tableUnits/ExpandRows.vue.d.ts CHANGED Viewed

@@ -205,7 +205,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             cellRef: import("vue").Ref<any, any>;
             ellipsisSpanRef: import("vue").Ref<any, any>;
             isOverflow: import("vue").Ref<boolean, boolean>;
-            debouncedHandleResize: import("../../../utils").DebounceReturn;
+            checkWidth: ({ target, width }: {
+                target: HTMLElement;
+                width: number;
+            }) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             prefixCls: {
                 type: StringConstructor;

package/es/components/Table/tableUnits/TableBody.vue.d.ts CHANGED Viewed

@@ -170,7 +170,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             cellRef: import("vue").Ref<any, any>;
             ellipsisSpanRef: import("vue").Ref<any, any>;
             isOverflow: import("vue").Ref<boolean, boolean>;
-            debouncedHandleResize: import("../../../utils").DebounceReturn;
+            checkWidth: ({ target, width }: {
+                target: HTMLElement;
+                width: number;
+            }) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             prefixCls: {
                 type: StringConstructor;
@@ -1469,7 +1472,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 cellRef: import("vue").Ref<any, any>;
                 ellipsisSpanRef: import("vue").Ref<any, any>;
                 isOverflow: import("vue").Ref<boolean, boolean>;
-                debouncedHandleResize: import("../../../utils").DebounceReturn;
+                checkWidth: ({ target, width }: {
+                    target: HTMLElement;
+                    width: number;
+                }) => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 prefixCls: {
                     type: StringConstructor;

package/es/components/Table/tableUnits/TableCell.mjs CHANGED Viewed

@@ -8,7 +8,6 @@ import '../../../utils/index.mjs';
 import ResizeObserver from '../../base/ResizeObserver.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { getStyle } from '../../../utils/dom.mjs';
-import { debounce } from '../../../utils/tools.mjs';
 const USkeletonItem = USkeleton.Item;
 const _sfc_main = defineComponent({
@@ -60,6 +59,7 @@ const _sfc_main = defineComponent({
       props: { indentSize },
       expand: { handleExpandChange, isRowExpanded },
       filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },
+      size: { syncColumnWidth },
       pagination
     } = inject("tableContext", {});
     const cellRef = ref();
@@ -147,8 +147,10 @@ const _sfc_main = defineComponent({
           }
         }
       });
+      if (props.index === 0) {
+        syncColumnWidth(width, props.column);
+      }
     };
-    const debouncedHandleResize = debounce((args) => checkWidth(args), 100);
     return {
       tablePrefixCls,
       isRender,
@@ -169,7 +171,7 @@ const _sfc_main = defineComponent({
       cellRef,
       ellipsisSpanRef,
       isOverflow,
-      debouncedHandleResize
+      checkWidth
     };
   }
 });
@@ -180,7 +182,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Render = resolveComponent("Render");
   const _component_UTooltip = resolveComponent("UTooltip");
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
-  return openBlock(), createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
+  return openBlock(), createBlock(_component_ResizeObserver, { onResize: _ctx.checkWidth }, {
     default: withCtx(() => {
       var _a;
       return [

package/es/components/Table/tableUnits/TableCell.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableCell.mjs","sources":["../../../../../src/components/Table/tableUnits/TableCell.vue"],"sourcesContent":["<template>\n <ResizeObserver @resize=\"debouncedHandleResize\">\n <td\n v-if=\"showCell\"\n ref=\"cellRef\"\n v-bind=\"tdProps\"\n :class=\"{\n [`${prefixCls}-cell-custom`]: !!(tdProps as any)?.class,\n [`${column.className}`]: !!column.className,\n [`${prefixCls}-cell-ellipsis`]: !!column.ellipsis,\n [`${prefixCls}-cell-break-word`]: !!column.width,\n [`${tablePrefixCls}-column-has-actions`]: hasAction(column),\n [`${tablePrefixCls}-column-has-sorters`]: hasSorters(column),\n [`${tablePrefixCls}-column-has-filters`]: hasFilters(column),\n [`${tablePrefixCls}-column-sort`]: isSortColumn(column)\n }\"\n :style=\"tdStyle\"\n >\n <USkeleton v-if=\"skeleton\" :class=\"`${prefixCls}-skeleton-wrap`\" active>\n <template v-if=\"column.skeleton\">\n <USkeletonItem\n v-for=\"(_, ski) in Array(column.skeleton.length)\"\n :key=\"ski\"\n :type=\"column.skeleton[ski].type\"\n :style=\"column.skeleton[ski].style\"\n />\n </template>\n <USkeletonItem v-else type=\"text\" style=\"width: 50%\" />\n </USkeleton>\n <template v-else>\n <template v-if=\"expandIcon\">\n <span :class=\"`${prefixCls}-indent indent-level-${indent}`\" :style=\"{ paddingLeft: `${indentSize * indent}px` }\" />\n <ExpandIcon\n need-indent-spaced\n :expandable=\"!!(data as any).children\"\n :need-loading=\"(data as any).children === true\"\n :row-key=\"rowKey\"\n :expanded=\"isRowExpanded(rowKey, true)\"\n @expand=\"handleExpand\"\n @async-expand=\"handleAsyncExpand\"\n />\n </template>\n <Render\n v-if=\"isRender\"\n :render=\"\n () => {\n return renderFn?.({\n row: data,\n index,\n rowKey,\n pagination,\n column\n });\n }\n \"\n />\n <template v-else>\n <template v-if=\"column.ellipsis && displayCell\">\n <UTooltip :title=\"displayCell.toString()\" :disabled=\"!isOverflow\" :mouse-enter-delay=\"0.5\">\n <span ref=\"ellipsisSpanRef\">\n {{ displayCell }}\n </span>\n </UTooltip>\n </template>\n <template v-else>\n {{ displayCell }}\n </template>\n </template>\n </template>\n </td>\n </ResizeObserver>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, watch, ref, nextTick } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport { get } from 'lodash-unified';\nimport UTooltip from '@uxd-ui/components/Tooltip';\nimport USkeleton from '@uxd-ui/components/Skeleton';\nimport Render from '../../base/Render';\nimport ExpandIcon from './ExpandIcon.vue';\nimport type { InnerColumn, TableContext } from '../Table.type';\nimport { debounce, getStyle } from '../../../utils';\nimport ResizeObserver from '../../base/ResizeObserver';\n\nconst USkeletonItem = USkeleton.Item;\n\nexport default defineComponent({\n name: 'TableCell',\n components: {\n Render,\n ExpandIcon,\n UTooltip,\n USkeleton,\n USkeletonItem,\n ResizeObserver\n },\n props: {\n prefixCls: {\n type: String\n },\n column: {\n type: Object as PropType<InnerColumn>,\n required: true\n },\n data: {\n type: Object as PropType<Record<string, any>>,\n required: true\n },\n rowKey: {\n type: [String, Number],\n required: true\n },\n index: {\n type: Number,\n required: true\n },\n indent: {\n type: Number,\n default: 20\n },\n expandIcon: {\n type: Boolean,\n default: false\n },\n skeleton: {\n type: Boolean,\n default: false\n }\n },\n setup(props) {\n const {\n prefixCls: tablePrefixCls,\n props: { indentSize },\n expand: { handleExpandChange, isRowExpanded },\n filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },\n // size: { sizesMap },\n pagination\n } = inject<TableContext>('tableContext', {} as TableContext);\n\n const cellRef = ref();\n const ellipsisSpanRef = ref();\n const isOverflow = ref(false);\n const isMinWidth = ref(false);\n\n const renderFn = computed(() => {\n const { render } = props.column;\n return render \|\| null;\n });\n\n const isRender = computed(() => {\n return renderFn.value !== null;\n });\n\n const displayCell = computed(() => {\n const { key, dataIndex } = props.column;\n const record = props.data;\n return get(record, dataIndex \|\| key);\n });\n\n const tdProps = ref({});\n const showCell = ref(true);\n\n watch(\n () => [props.column, props.data, props.index],\n () => {\n const { customCell } = props.column;\n const attrs = {} as Record<string, any>;\n // if (ellipsis && !render) {\n // attrs.title = displayCell.value;\n // }\n if (customCell) {\n const { data, index } = props;\n const _props = customCell(data, index);\n const { colSpan, rowSpan } = _props;\n showCell.value = colSpan !== 0 && rowSpan !== 0;\n Object.keys(_props).forEach((key) => {\n attrs[key] = _props[key];\n });\n }\n tdProps.value = attrs;\n },\n { immediate: true }\n );\n\n const tdStyle = computed(() => {\n const style = {} as CSSProperties;\n const { align, left, right } = props.column;\n if (align) {\n style.textAlign = align;\n }\n if (left !== undefined) {\n style.left = `${left}px`;\n }\n if (right !== undefined) {\n style.right = `${right}px`;\n }\n if (isMinWidth.value) {\n style.width = `${props.column.minWidth}px`;\n }\n return style;\n });\n\n const handleExpand = (e: any) => {\n handleExpandChange({ row: props.data, rowKey: props.rowKey, tree: true }, e);\n };\n\n const handleAsyncExpand = (e: any, done: () => void) => {\n handleExpandChange(\n {\n row: props.data,\n rowKey: props.rowKey,\n async: true,\n tree: true,\n done\n },\n e\n );\n };\n\n const checkWidth = ({ target, width }: { target: HTMLElement; width: number }) => {\n nextTick(() => {\n if (ellipsisSpanRef.value) {\n const cell = target;\n const padding = (Number.parseInt(getStyle(cell, 'paddingLeft')) \|\| 0) + (Number.parseInt(getStyle(cell, 'paddingRight')) \|\| 0);\n const span = ellipsisSpanRef.value;\n const range = document.createRange();\n range.setStart(span, 0);\n range.setEnd(span, span.childNodes.length);\n const rangeWidth = range.getBoundingClientRect().width;\n\n // const cellWidth = Number(getStyle(cell, 'width'));\n if (rangeWidth + padding > width) {\n isOverflow.value = true;\n } else {\n isOverflow.value = false;\n }\n }\n });\n };\n\n // onMounted(() => {\n // checkOverflow(cellRef.value);\n // });\n\n const debouncedHandleResize = debounce((args: any) => checkWidth(args), 100);\n\n return {\n tablePrefixCls,\n isRender,\n renderFn,\n displayCell,\n tdProps,\n tdStyle,\n indentSize,\n handleExpand,\n handleAsyncExpand,\n isRowExpanded,\n showCell,\n hasAction,\n hasSorters,\n hasFilters,\n isSortColumn,\n pagination,\n cellRef,\n ellipsisSpanRef,\n isOverflow,\n debouncedHandleResize\n };\n }\n});\n</script>\n"],"names":["_createBlock","_createElementBlock","_mergeProps","_normalizeClass","_Fragment","_normalizeStyle","_createElementVNode","_createVNode","_a"],"mappings":"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"}
1	+ {"version":3,"file":"TableCell.mjs","sources":["../../../../../src/components/Table/tableUnits/TableCell.vue"],"sourcesContent":["<template>\n <ResizeObserver @resize=\"checkWidth\">\n <td\n v-if=\"showCell\"\n ref=\"cellRef\"\n v-bind=\"tdProps\"\n :class=\"{\n [`${prefixCls}-cell-custom`]: !!(tdProps as any)?.class,\n [`${column.className}`]: !!column.className,\n [`${prefixCls}-cell-ellipsis`]: !!column.ellipsis,\n [`${prefixCls}-cell-break-word`]: !!column.width,\n [`${tablePrefixCls}-column-has-actions`]: hasAction(column),\n [`${tablePrefixCls}-column-has-sorters`]: hasSorters(column),\n [`${tablePrefixCls}-column-has-filters`]: hasFilters(column),\n [`${tablePrefixCls}-column-sort`]: isSortColumn(column)\n }\"\n :style=\"tdStyle\"\n >\n <USkeleton v-if=\"skeleton\" :class=\"`${prefixCls}-skeleton-wrap`\" active>\n <template v-if=\"column.skeleton\">\n <USkeletonItem\n v-for=\"(_, ski) in Array(column.skeleton.length)\"\n :key=\"ski\"\n :type=\"column.skeleton[ski].type\"\n :style=\"column.skeleton[ski].style\"\n />\n </template>\n <USkeletonItem v-else type=\"text\" style=\"width: 50%\" />\n </USkeleton>\n <template v-else>\n <template v-if=\"expandIcon\">\n <span :class=\"`${prefixCls}-indent indent-level-${indent}`\" :style=\"{ paddingLeft: `${indentSize * indent}px` }\" />\n <ExpandIcon\n need-indent-spaced\n :expandable=\"!!(data as any).children\"\n :need-loading=\"(data as any).children === true\"\n :row-key=\"rowKey\"\n :expanded=\"isRowExpanded(rowKey, true)\"\n @expand=\"handleExpand\"\n @async-expand=\"handleAsyncExpand\"\n />\n </template>\n <Render\n v-if=\"isRender\"\n :render=\"\n () => {\n return renderFn?.({\n row: data,\n index,\n rowKey,\n pagination,\n column\n });\n }\n \"\n />\n <template v-else>\n <template v-if=\"column.ellipsis && displayCell\">\n <UTooltip :title=\"displayCell.toString()\" :disabled=\"!isOverflow\" :mouse-enter-delay=\"0.5\">\n <span ref=\"ellipsisSpanRef\">\n {{ displayCell }}\n </span>\n </UTooltip>\n </template>\n <template v-else>\n {{ displayCell }}\n </template>\n </template>\n </template>\n </td>\n </ResizeObserver>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, watch, ref, nextTick } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport { get } from 'lodash-unified';\nimport UTooltip from '@uxd-ui/components/Tooltip';\nimport USkeleton from '@uxd-ui/components/Skeleton';\nimport Render from '../../base/Render';\nimport ExpandIcon from './ExpandIcon.vue';\nimport type { InnerColumn, TableContext } from '../Table.type';\nimport { getStyle } from '../../../utils';\nimport ResizeObserver from '../../base/ResizeObserver';\n\nconst USkeletonItem = USkeleton.Item;\n\nexport default defineComponent({\n name: 'TableCell',\n components: {\n Render,\n ExpandIcon,\n UTooltip,\n USkeleton,\n USkeletonItem,\n ResizeObserver\n },\n props: {\n prefixCls: {\n type: String\n },\n column: {\n type: Object as PropType<InnerColumn>,\n required: true\n },\n data: {\n type: Object as PropType<Record<string, any>>,\n required: true\n },\n rowKey: {\n type: [String, Number],\n required: true\n },\n index: {\n type: Number,\n required: true\n },\n indent: {\n type: Number,\n default: 20\n },\n expandIcon: {\n type: Boolean,\n default: false\n },\n skeleton: {\n type: Boolean,\n default: false\n }\n },\n setup(props) {\n const {\n prefixCls: tablePrefixCls,\n props: { indentSize },\n expand: { handleExpandChange, isRowExpanded },\n filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },\n // size: { sizesMap },\n size: { syncColumnWidth },\n pagination\n } = inject<TableContext>('tableContext', {} as TableContext);\n\n const cellRef = ref();\n const ellipsisSpanRef = ref();\n const isOverflow = ref(false);\n const isMinWidth = ref(false);\n\n const renderFn = computed(() => {\n const { render } = props.column;\n return render \|\| null;\n });\n\n const isRender = computed(() => {\n return renderFn.value !== null;\n });\n\n const displayCell = computed(() => {\n const { key, dataIndex } = props.column;\n const record = props.data;\n return get(record, dataIndex \|\| key);\n });\n\n const tdProps = ref({});\n const showCell = ref(true);\n\n watch(\n () => [props.column, props.data, props.index],\n () => {\n const { customCell } = props.column;\n const attrs = {} as Record<string, any>;\n // if (ellipsis && !render) {\n // attrs.title = displayCell.value;\n // }\n if (customCell) {\n const { data, index } = props;\n const _props = customCell(data, index);\n const { colSpan, rowSpan } = _props;\n showCell.value = colSpan !== 0 && rowSpan !== 0;\n Object.keys(_props).forEach((key) => {\n attrs[key] = _props[key];\n });\n }\n tdProps.value = attrs;\n },\n { immediate: true }\n );\n\n const tdStyle = computed(() => {\n const style = {} as CSSProperties;\n const { align, left, right } = props.column;\n if (align) {\n style.textAlign = align;\n }\n if (left !== undefined) {\n style.left = `${left}px`;\n }\n if (right !== undefined) {\n style.right = `${right}px`;\n }\n if (isMinWidth.value) {\n style.width = `${props.column.minWidth}px`;\n }\n return style;\n });\n\n const handleExpand = (e: any) => {\n handleExpandChange({ row: props.data, rowKey: props.rowKey, tree: true }, e);\n };\n\n const handleAsyncExpand = (e: any, done: () => void) => {\n handleExpandChange(\n {\n row: props.data,\n rowKey: props.rowKey,\n async: true,\n tree: true,\n done\n },\n e\n );\n };\n\n const checkWidth = ({ target, width }: { target: HTMLElement; width: number }) => {\n nextTick(() => {\n if (ellipsisSpanRef.value) {\n const cell = target;\n const padding = (Number.parseInt(getStyle(cell, 'paddingLeft')) \|\| 0) + (Number.parseInt(getStyle(cell, 'paddingRight')) \|\| 0);\n const span = ellipsisSpanRef.value;\n const range = document.createRange();\n range.setStart(span, 0);\n range.setEnd(span, span.childNodes.length);\n const rangeWidth = range.getBoundingClientRect().width;\n\n // const cellWidth = Number(getStyle(cell, 'width'));\n if (rangeWidth + padding > width) {\n isOverflow.value = true;\n } else {\n isOverflow.value = false;\n }\n }\n });\n if (props.index === 0) {\n syncColumnWidth(width, props.column);\n }\n };\n\n // onMounted(() => {\n // checkOverflow(cellRef.value);\n // });\n\n return {\n tablePrefixCls,\n isRender,\n renderFn,\n displayCell,\n tdProps,\n tdStyle,\n indentSize,\n handleExpand,\n handleAsyncExpand,\n isRowExpanded,\n showCell,\n hasAction,\n hasSorters,\n hasFilters,\n isSortColumn,\n pagination,\n cellRef,\n ellipsisSpanRef,\n isOverflow,\n checkWidth\n };\n }\n});\n</script>\n"],"names":["_createBlock","_createElementBlock","_mergeProps","_normalizeClass","_Fragment","_normalizeStyle","_createElementVNode","_createVNode","_a"],"mappings":"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"}

package/es/components/Table/tableUnits/TableCell.vue.d.ts CHANGED Viewed

@@ -52,7 +52,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     cellRef: import("vue").Ref<any, any>;
     ellipsisSpanRef: import("vue").Ref<any, any>;
     isOverflow: import("vue").Ref<boolean, boolean>;
-    debouncedHandleResize: import("../../../utils").DebounceReturn;
+    checkWidth: ({ target, width }: {
+        target: HTMLElement;
+        width: number;
+    }) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     prefixCls: {
         type: StringConstructor;

package/es/components/Table/tableUnits/TableRow.vue.d.ts CHANGED Viewed

@@ -151,7 +151,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         cellRef: import("vue").Ref<any, any>;
         ellipsisSpanRef: import("vue").Ref<any, any>;
         isOverflow: import("vue").Ref<boolean, boolean>;
-        debouncedHandleResize: import("../../../utils").DebounceReturn;
+        checkWidth: ({ target, width }: {
+            target: HTMLElement;
+            width: number;
+        }) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         prefixCls: {
             type: StringConstructor;

package/lib/components/Table/BaseTable.js CHANGED Viewed

@@ -100,7 +100,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "tableRef",
     style: vue.normalizeStyle(_ctx.tableStyle)
   }, [
-    vue.createVNode(_component_ColGroup, { columns: _ctx.columns }, null, 8, ["columns"]),
+    vue.createVNode(_component_ColGroup, {
+      columns: _ctx.columns,
+      "is-head-table": !_ctx.showBody
+    }, null, 8, ["columns", "is-head-table"]),
     _ctx.showHeader ? (vue.openBlock(), vue.createBlock(_component_TableHeader, {
       key: 0,
       columns: _ctx.getColumns()

package/lib/components/Table/BaseTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTable.js","sources":["../../../../src/components/Table/BaseTable.vue"],"sourcesContent":["<template>\n <table ref=\"tableRef\" :style=\"tableStyle\">\n <ColGroup :columns=\"columns\" />\n <TableHeader v-if=\"showHeader\" :columns=\"getColumns()\" />\n <TableBody v-if=\"showBody\" :columns=\"getColumns()\" />\n </table>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, inject, ref } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport ColGroup from './tableUnits/ColGroup.vue';\nimport TableHeader from './tableUnits/TableHeader.vue';\nimport TableBody from './tableUnits/TableBody.vue';\n// import useResizeObserver from '../base/hooks/useResizeObserver';\nimport type { InnerColumn, TableContext } from './Table.type';\nimport { getWidth } from './hooks/useTableResize';\n// import { debounce } from '../../utils/tools';\n\nexport default defineComponent({\n name: 'BaseTable',\n components: {\n ColGroup,\n TableHeader,\n TableBody\n },\n props: {\n showHeader: {\n type: Boolean,\n default: false\n },\n showBody: {\n type: Boolean,\n default: false\n },\n columns: {\n type: Array as PropType<InnerColumn[]>,\n default: () => [] as InnerColumn[]\n }\n },\n setup(props) {\n const {\n prefixCls,\n props: { width },\n size: { tableWidth }\n } = inject<TableContext>('tableContext', {} as TableContext);\n const tableRef = ref<HTMLElement \| null>(null);\n\n const tableStyle = computed(() => {\n const style = {} as CSSProperties;\n if (width.value) {\n style.width = typeof width.value === 'number' ? `${width.value}px` : width.value;\n } else if (props.columns.some((x) => x.fixed)) {\n style.width = 'max-content';\n style.minWidth = '100%';\n }\n if (props.columns.some((x) => x.ellipsis) \|\| props.columns.some((x) => x.resizable)) {\n style.tableLayout = 'fixed';\n } else {\n style.tableLayout = 'auto';\n }\n\n return style;\n });\n\n const getColumns = () => {\n let left = 0;\n let right = props.columns\n .filter((x) => x.fixed === 'right')\n .reduce((sum, column) => {\n const w = getWidth(column.width ?? column.minWidth, tableWidth.value);\n return sum + w;\n }, 0);\n return props.columns.map((column) => {\n const rst = {\n ...column,\n className: column.fixed\n ? `${column.className \|\| ''} ${prefixCls.value}-fixed-column ${prefixCls.value}-fixed-column-${column.fixed}`\n : column.className\n };\n if (column.fixed === 'left') {\n rst.left = left;\n const w = getWidth(column.width ?? column.minWidth, tableWidth.value);\n left += w;\n if (column.lastLeft) {\n rst.className = `${rst.className \|\| ''} ${prefixCls.value}-fixed-column-${column.fixed}-last`;\n }\n }\n if (column.fixed === 'right') {\n const w = getWidth(column.width ?? column.minWidth, tableWidth.value);\n right -= w;\n rst.right = right;\n if (column.firstRight) {\n rst.className = `${rst.className \|\| ''} ${prefixCls.value}-fixed-column-${column.fixed}-first`;\n }\n }\n\n return rst;\n });\n };\n\n // const debouncedHandleResize = debounce(syncFixedTableRowHeight, 150);\n // useResizeObserver(tableRef, debouncedHandleResize);\n\n return {\n tableRef,\n prefixCls,\n tableStyle,\n getColumns\n };\n }\n});\n</script>\n"],"names":["defineComponent","ColGroup","TableHeader","TableBody","inject","ref","computed","getWidth","_createElementBlock","_normalizeStyle","_createVNode","_createBlock"],"mappings":";;;;;;;;;;;AAmBA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVC;AAAA,iBACAC;AAAA,eACAC;AAAA;AACF,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,MAAM;AAAC;AAClB;AACF,EACA,MAAM,OAAO;UACL;AAAA,MACJ;AAAA,MACA,OAAO,EAAE;AAAM,MACf,MAAM,EAAE;AAAW,QACjBC,WAAqB,gBAAgB,EAAkB;UACrD,WAAWC,QAAwB,IAAI;UAEvC,aAAaC,aAAS,MAAM;YAC1B,QAAQ;UACV,MAAM,OAAO;cACT,QAAQ,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,YAAY,MAAM;AAAA,iBAClE,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,KAAK,GAAG;cACvC,QAAQ;cACR,WAAW;AAAA;UAEf,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,QAAQ,KAAK,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,GAAG;cAC7E,cAAc;AAAA,aACf;cACC,cAAc;AAAA;aAGf;AAAA,KACR;UAEK,aAAa,MAAM;UACnB,OAAO;UACP,QAAQ,MAAM,QACf,OAAO,CAAC,MAAM,EAAE,UAAU,OAAO,EACjC,OAAO,CAAC,KAAK,WAAW;AA5DjC;cA6DgB,IAAIC,yBAAS,YAAO,UAAP,YAAgB,OAAO,UAAU,WAAW,KAAK;eAC7D,MAAM;AAAA,SACZ,CAAC;aACC,MAAM,QAAQ,IAAI,CAAC,WAAW;AAhE3C;cAiEc,MAAM;AAAA,UACV,GAAG;AAAA,UACH,WAAW,OAAO,QACd,GAAG,OAAO,aAAa,MAAM,UAAU,sBAAsB,UAAU,sBAAsB,OAAO,UACpG,OAAO;AAAA;YAET,OAAO,UAAU,QAAQ;cACvB,OAAO;gBACL,IAAIA,yBAAS,YAAO,UAAP,YAAgB,OAAO,UAAU,WAAW,KAAK;kBAC5D;cACJ,OAAO,UAAU;gBACf,YAAY,GAAG,IAAI,aAAa,MAAM,UAAU,sBAAsB,OAAO;AAAA;AACnF;YAEE,OAAO,UAAU,SAAS;gBACtB,IAAIA,yBAAS,YAAO,UAAP,YAAgB,OAAO,UAAU,WAAW,KAAK;mBAC3D;cACL,QAAQ;cACR,OAAO,YAAY;gBACjB,YAAY,GAAG,IAAI,aAAa,MAAM,UAAU,sBAAsB,OAAO;AAAA;AACnF;eAGK;AAAA,OACR;AAAA;WAMI;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;;;;0BA9GCC,uBAIQ;IAJD,KAAI;AAAA,IAAY,OAAKC,mBAAE,eAAU;AAAA;IACtCC,~~gBAA+B~~,~~uBAApB,~~SAAS;~~IACD~~,oCAAnBC,gBAAyD;;MAAzB,SAAS;AAAU;IAClC,kCAAjBA,gBAAqD;;MAAzB,SAAS;AAAU;;;;;;;"}
1	+ {"version":3,"file":"BaseTable.js","sources":["../../../../src/components/Table/BaseTable.vue"],"sourcesContent":["<template>\n <table ref=\"tableRef\" :style=\"tableStyle\">\n <ColGroup :columns=\"columns\" :is-head-table=\"!showBody\" />\n <TableHeader v-if=\"showHeader\" :columns=\"getColumns()\" />\n <TableBody v-if=\"showBody\" :columns=\"getColumns()\" />\n </table>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, inject, ref } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport ColGroup from './tableUnits/ColGroup.vue';\nimport TableHeader from './tableUnits/TableHeader.vue';\nimport TableBody from './tableUnits/TableBody.vue';\n// import useResizeObserver from '../base/hooks/useResizeObserver';\nimport type { InnerColumn, TableContext } from './Table.type';\nimport { getWidth } from './hooks/useTableResize';\n// import { debounce } from '../../utils/tools';\n\nexport default defineComponent({\n name: 'BaseTable',\n components: {\n ColGroup,\n TableHeader,\n TableBody\n },\n props: {\n showHeader: {\n type: Boolean,\n default: false\n },\n showBody: {\n type: Boolean,\n default: false\n },\n columns: {\n type: Array as PropType<InnerColumn[]>,\n default: () => [] as InnerColumn[]\n }\n },\n setup(props) {\n const {\n prefixCls,\n props: { width },\n size: { tableWidth }\n } = inject<TableContext>('tableContext', {} as TableContext);\n const tableRef = ref<HTMLElement \| null>(null);\n\n const tableStyle = computed(() => {\n const style = {} as CSSProperties;\n if (width.value) {\n style.width = typeof width.value === 'number' ? `${width.value}px` : width.value;\n } else if (props.columns.some((x) => x.fixed)) {\n style.width = 'max-content';\n style.minWidth = '100%';\n }\n if (props.columns.some((x) => x.ellipsis) \|\| props.columns.some((x) => x.resizable)) {\n style.tableLayout = 'fixed';\n } else {\n style.tableLayout = 'auto';\n }\n\n return style;\n });\n\n const getColumns = () => {\n let left = 0;\n let right = props.columns\n .filter((x) => x.fixed === 'right')\n .reduce((sum, column) => {\n const w = getWidth(column.width ?? column.minWidth, tableWidth.value);\n return sum + w;\n }, 0);\n return props.columns.map((column) => {\n const rst = {\n ...column,\n className: column.fixed\n ? `${column.className \|\| ''} ${prefixCls.value}-fixed-column ${prefixCls.value}-fixed-column-${column.fixed}`\n : column.className\n };\n if (column.fixed === 'left') {\n rst.left = left;\n const w = getWidth(column.width ?? column.minWidth, tableWidth.value);\n left += w;\n if (column.lastLeft) {\n rst.className = `${rst.className \|\| ''} ${prefixCls.value}-fixed-column-${column.fixed}-last`;\n }\n }\n if (column.fixed === 'right') {\n const w = getWidth(column.width ?? column.minWidth, tableWidth.value);\n right -= w;\n rst.right = right;\n if (column.firstRight) {\n rst.className = `${rst.className \|\| ''} ${prefixCls.value}-fixed-column-${column.fixed}-first`;\n }\n }\n\n return rst;\n });\n };\n\n // const debouncedHandleResize = debounce(syncFixedTableRowHeight, 150);\n // useResizeObserver(tableRef, debouncedHandleResize);\n\n return {\n tableRef,\n prefixCls,\n tableStyle,\n getColumns\n };\n }\n});\n</script>\n"],"names":["defineComponent","ColGroup","TableHeader","TableBody","inject","ref","computed","getWidth","_createElementBlock","_normalizeStyle","_createVNode","_createBlock"],"mappings":";;;;;;;;;;;AAmBA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVC;AAAA,iBACAC;AAAA,eACAC;AAAA;AACF,EACA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,MAAM;AAAC;AAClB;AACF,EACA,MAAM,OAAO;UACL;AAAA,MACJ;AAAA,MACA,OAAO,EAAE;AAAM,MACf,MAAM,EAAE;AAAW,QACjBC,WAAqB,gBAAgB,EAAkB;UACrD,WAAWC,QAAwB,IAAI;UAEvC,aAAaC,aAAS,MAAM;YAC1B,QAAQ;UACV,MAAM,OAAO;cACT,QAAQ,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,YAAY,MAAM;AAAA,iBAClE,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,KAAK,GAAG;cACvC,QAAQ;cACR,WAAW;AAAA;UAEf,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,QAAQ,KAAK,MAAM,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,GAAG;cAC7E,cAAc;AAAA,aACf;cACC,cAAc;AAAA;aAGf;AAAA,KACR;UAEK,aAAa,MAAM;UACnB,OAAO;UACP,QAAQ,MAAM,QACf,OAAO,CAAC,MAAM,EAAE,UAAU,OAAO,EACjC,OAAO,CAAC,KAAK,WAAW;AA5DjC;cA6DgB,IAAIC,yBAAS,YAAO,UAAP,YAAgB,OAAO,UAAU,WAAW,KAAK;eAC7D,MAAM;AAAA,SACZ,CAAC;aACC,MAAM,QAAQ,IAAI,CAAC,WAAW;AAhE3C;cAiEc,MAAM;AAAA,UACV,GAAG;AAAA,UACH,WAAW,OAAO,QACd,GAAG,OAAO,aAAa,MAAM,UAAU,sBAAsB,UAAU,sBAAsB,OAAO,UACpG,OAAO;AAAA;YAET,OAAO,UAAU,QAAQ;cACvB,OAAO;gBACL,IAAIA,yBAAS,YAAO,UAAP,YAAgB,OAAO,UAAU,WAAW,KAAK;kBAC5D;cACJ,OAAO,UAAU;gBACf,YAAY,GAAG,IAAI,aAAa,MAAM,UAAU,sBAAsB,OAAO;AAAA;AACnF;YAEE,OAAO,UAAU,SAAS;gBACtB,IAAIA,yBAAS,YAAO,UAAP,YAAgB,OAAO,UAAU,WAAW,KAAK;mBAC3D;cACL,QAAQ;cACR,OAAO,YAAY;gBACjB,YAAY,GAAG,IAAI,aAAa,MAAM,UAAU,sBAAsB,OAAO;AAAA;AACnF;eAGK;AAAA,OACR;AAAA;WAMI;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;;;;0BA9GCC,uBAIQ;IAJD,KAAI;AAAA,IAAY,OAAKC,mBAAE,eAAU;AAAA;IACtCC,gBAA0D;MAA/C,SAAS;MAAU,iBAAa,CAAG;;IAC3B,oCAAnBC,gBAAyD;;MAAzB,SAAS;AAAU;IAClC,kCAAjBA,gBAAqD;;MAAzB,SAAS;AAAU;;;;;;;"}

package/lib/components/Table/BaseTable.vue.d.ts CHANGED Viewed

@@ -88,15 +88,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: PropType<InnerColumn[]>;
             default: () => InnerColumn[];
         };
+        isHeadTable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>, {
         cols: import("vue").ComputedRef<import("./Table.type").TableColProps[]>;
+        getWidth: (col: import("./Table.type").TableColProps) => string;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         columns: {
             type: PropType<InnerColumn[]>;
             default: () => InnerColumn[];
         };
+        isHeadTable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{}>, {
         columns: InnerColumn[];
+        isHeadTable: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     TableHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         columns: {
@@ -4417,7 +4427,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 cellRef: import("vue").Ref<any, any>;
                 ellipsisSpanRef: import("vue").Ref<any, any>;
                 isOverflow: import("vue").Ref<boolean, boolean>;
-                debouncedHandleResize: import("../../utils").DebounceReturn;
+                checkWidth: ({ target, width }: {
+                    target: HTMLElement;
+                    width: number;
+                }) => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 prefixCls: {
                     type: StringConstructor;
@@ -5716,7 +5729,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     cellRef: import("vue").Ref<any, any>;
                     ellipsisSpanRef: import("vue").Ref<any, any>;
                     isOverflow: import("vue").Ref<boolean, boolean>;
-                    debouncedHandleResize: import("../../utils").DebounceReturn;
+                    checkWidth: ({ target, width }: {
+                        target: HTMLElement;
+                        width: number;
+                    }) => void;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     prefixCls: {
                         type: StringConstructor;

package/lib/components/Table/BodyTable.vue.d.ts CHANGED Viewed

@@ -107,15 +107,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: PropType<InnerColumn[]>;
                 default: () => InnerColumn[];
             };
+            isHeadTable: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>, {
             cols: import("vue").ComputedRef<import("./Table.type").TableColProps[]>;
+            getWidth: (col: import("./Table.type").TableColProps) => string;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             columns: {
                 type: PropType<InnerColumn[]>;
                 default: () => InnerColumn[];
             };
+            isHeadTable: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>> & Readonly<{}>, {
             columns: InnerColumn[];
+            isHeadTable: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         TableHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             columns: {
@@ -4436,7 +4446,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     cellRef: import("vue").Ref<any, any>;
                     ellipsisSpanRef: import("vue").Ref<any, any>;
                     isOverflow: import("vue").Ref<boolean, boolean>;
-                    debouncedHandleResize: import("../../utils").DebounceReturn;
+                    checkWidth: ({ target, width }: {
+                        target: HTMLElement;
+                        width: number;
+                    }) => void;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     prefixCls: {
                         type: StringConstructor;
@@ -5735,7 +5748,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         cellRef: import("vue").Ref<any, any>;
                         ellipsisSpanRef: import("vue").Ref<any, any>;
                         isOverflow: import("vue").Ref<boolean, boolean>;
-                        debouncedHandleResize: import("../../utils").DebounceReturn;
+                        checkWidth: ({ target, width }: {
+                            target: HTMLElement;
+                            width: number;
+                        }) => void;
                     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                         prefixCls: {
                             type: StringConstructor;

package/lib/components/Table/HeadTable.vue.d.ts CHANGED Viewed

@@ -104,15 +104,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: PropType<InnerColumn[]>;
                 default: () => InnerColumn[];
             };
+            isHeadTable: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>, {
             cols: import("vue").ComputedRef<import("./Table.type").TableColProps[]>;
+            getWidth: (col: import("./Table.type").TableColProps) => string;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             columns: {
                 type: PropType<InnerColumn[]>;
                 default: () => InnerColumn[];
             };
+            isHeadTable: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>> & Readonly<{}>, {
             columns: InnerColumn[];
+            isHeadTable: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         TableHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             columns: {
@@ -4433,7 +4443,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     cellRef: import("vue").Ref<any, any>;
                     ellipsisSpanRef: import("vue").Ref<any, any>;
                     isOverflow: import("vue").Ref<boolean, boolean>;
-                    debouncedHandleResize: import("../../utils").DebounceReturn;
+                    checkWidth: ({ target, width }: {
+                        target: HTMLElement;
+                        width: number;
+                    }) => void;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     prefixCls: {
                         type: StringConstructor;
@@ -5732,7 +5745,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         cellRef: import("vue").Ref<any, any>;
                         ellipsisSpanRef: import("vue").Ref<any, any>;
                         isOverflow: import("vue").Ref<boolean, boolean>;
-                        debouncedHandleResize: import("../../utils").DebounceReturn;
+                        checkWidth: ({ target, width }: {
+                            target: HTMLElement;
+                            width: number;
+                        }) => void;
                     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                         prefixCls: {
                             type: StringConstructor;

package/lib/components/Table/Table.js CHANGED Viewed

@@ -89,7 +89,9 @@ const _sfc_main = vue.defineComponent({
       tableWidth,
       resizeColumns,
       clearResizeTimer,
-      setResizeWidth
+      setResizeWidth,
+      syncColumnWidth,
+      columnWidths
     } = useTableResize["default"](updatedColumns, tableRefs, prefixCls, isColumnFixed, props);
     const debouncedHandleResize = tools.debounce(handleResize, 150);
     vue.onMounted(() => {
@@ -207,7 +209,9 @@ const _sfc_main = vue.defineComponent({
         isScrollX,
         setResizeWidth,
         handleColumnResize,
-        debouncedHandleResize
+        debouncedHandleResize,
+        syncColumnWidth,
+        columnWidths
       },
       fixed: {
         isColumnFixed,