@sdata/web-vue 3.2.1 → 3.3.1

package/es/table/table.js

@@ -2,8 +2,7 @@ import { configProviderInjectionKey } from "../config-provider/context.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isArray, isFunction, isNull, isNumber, isObject, isString, isUndefined } from "../_utils/is.js";
-import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
-import virtual_list_default from "../_components/virtual-list/index.js";
+import resize_observer_default from "../_components/resize-observer.js";
 import { omit } from "../_utils/omit.js";
 import { useComponentRef } from "../_hooks/use-component-ref.js";
 import { useScrollbar } from "../_hooks/use-scrollbar.js";
@@ -17,13 +16,14 @@ import IconMinus from "../icon/icon-minus/index.js";
 import IconPlus from "../icon/icon-plus/index.js";
 import { getValueByPath, setValueByPath } from "../_utils/get-value-by-path.js";
 import Pagination from "../pagination/index.js";
+import virtual_list_v2_default from "../_components/virtual-list-v2/index.js";
 import { tableInjectionKey } from "./context.js";
 import { useColumnResize } from "./hooks/use-column-resize.js";
 import { useDrag } from "./hooks/use-drag.js";
 import { useExpand } from "./hooks/use-expand.js";
 import { useFilter } from "./hooks/use-filter.js";
 import { usePagination } from "./hooks/use-pagination.js";
-import { getGroupColumns, mapArrayWithChildren, mapRawTableData } from "./utils.js";
+import { getGroupColumns, getTableGridTemplate, mapArrayWithChildren, mapRawTableData } from "./utils.js";
 import { useRowSelection } from "./hooks/use-row-selection.js";
 import { useSorter } from "./hooks/use-sorter.js";
 import { useSpan } from "./hooks/use-span.js";
@@ -34,22 +34,18 @@ import table_td_default from "./table-td.js";
 import table_th_default from "./table-th.js";
 import table_thead_default from "./table-thead.js";
 import table_tr_default from "./table-tr.js";
-import { Fragment, computed, createVNode, defineComponent, inject, isVNode, mergeProps, nextTick, onMounted, provide, reactive, ref, toRefs, watch, watchEffect } from "vue";
-import { useElementBounding, useElementSize, useResizeObserver, watchThrottled } from "@vueuse/core";
+import { Fragment, computed, createVNode, defineComponent, inject, isVNode, mergeProps, onMounted, provide, reactive, ref, toRefs, watch, watchEffect } from "vue";
 //#region components/table/table.tsx
 var _excluded = [
+	"data",
 	"itemKey",
-	"keyField",
-	"estimatedSize",
-	"scrollbar",
-	"itemSize",
-	"minItemSize",
 	"component",
 	"listAttrs",
 	"contentAttrs",
-	"listStyle",
-	"paddingPosition"
-];
+	"paddingPosition",
+	"isStaticItemHeight",
+	"fixedSize"
+], _excluded2 = ["outerStyle"], _excluded3 = ["outerStyle"];
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -117,6 +113,14 @@ var table_default = /* @__PURE__ */ defineComponent({
 			}
 		},
 		/**
+		* @zh 表格的 table-layout 属性设置为 fixed，设置为 fixed 后，表格的宽度不会被内容撑开超出 100%。
+		* @en The table-layout property of the table is set to fixed. After it is set to fixed, the width of the table will not be stretched beyond 100% by the content.
+		*/
+		tableLayoutFixed: {
+			type: Boolean,
+			default: false
+		},
+		/**
 		* @zh 是否为加载中状态
 		* @en Whether it is loading state
 		*/
@@ -322,10 +326,6 @@ var table_default = /* @__PURE__ */ defineComponent({
 			type: [Object, Boolean],
 			default: true
 		},
-		debug: {
-			type: Boolean,
-			default: false
-		},
 		/**
 		* @zh 是否展示空子树
 		* @en Whether to display empty subtrees
@@ -563,11 +563,6 @@ var table_default = /* @__PURE__ */ defineComponent({
 	* @slot empty
 	*/
 	/**
-	* @zh 插入至表格最后一行之后的内容
-	* @en Content inserted after the last table row
-	* @slot append
-	*/
-	/**
 	* @zh 自定义 thead 元素
 	* @en Custom thead element
 	* @slot thead
@@ -594,12 +589,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 			return (_rowSelection$value$c = (_rowSelection$value = rowSelection.value) === null || _rowSelection$value === void 0 ? void 0 : _rowSelection$value.checkStrictly) !== null && _rowSelection$value$c !== void 0 ? _rowSelection$value$c : true;
 		});
 		const { scrollbarProps } = useScrollbar(scrollbar);
-		const containerClientWidth = ref(0);
-		const containerScrollWidth = ref(0);
-		const autoScrollX = ref(false);
-		const debugLog = (_phase, _payload) => {
-			if (!props.debug) return;
-		};
+		const displayScrollbar = computed(() => scrollbar.value !== false);
 		const isScroll = computed(() => {
 			var _props$scroll, _props$scroll2, _props$scroll3, _props$scroll4;
 			return {
@@ -607,53 +597,20 @@ var table_default = /* @__PURE__ */ defineComponent({
 				y: Boolean(((_props$scroll3 = props.scroll) === null || _props$scroll3 === void 0 ? void 0 : _props$scroll3.y) || ((_props$scroll4 = props.scroll) === null || _props$scroll4 === void 0 ? void 0 : _props$scroll4.maxHeight))
 			};
 		});
-		const resolvedScroll = computed(() => ({
-			x: isScroll.value.x || autoScrollX.value,
-			y: isScroll.value.y
-		}));
 		const summaryRef = ref();
 		const thRefs = ref({});
 		const { componentRef: contentComRef, elementRef: contentRef } = useComponentRef("containerRef");
 		const { componentRef: tbodyComRef, elementRef: tbodyRef } = useComponentRef("containerRef");
-		const { componentRef: _virtualComRef, elementRef: virtualRef } = useComponentRef("viewportRef");
-		const getVirtualListInstance = () => _virtualComRef.value;
-		const theadRef = ref();
-		const isVirtualList = computed(() => Boolean(props.virtualListProps));
-		const splitTable = computed(() => {
-			var _props$data$length, _props$data;
-			return resolvedScroll.value.y || props.stickyHeader || isVirtualList.value || resolvedScroll.value.x && ((_props$data$length = (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) !== null && _props$data$length !== void 0 ? _props$data$length : 0) === 0;
-		});
-		const containerScrollLeft = ref(0);
-		const alignLeft = ref(true);
-		const alignRight = ref(true);
-		const getScrollbarScrollElement = (component) => {
-			var _ref, _scrollbar$elements$s, _scrollbar$elements, _scrollbar$elements2;
-			if (component instanceof HTMLElement) return component;
-			const scrollbar = component;
-			return (_ref = (_scrollbar$elements$s = scrollbar === null || scrollbar === void 0 || (_scrollbar$elements = scrollbar.elements) === null || _scrollbar$elements === void 0 || (_scrollbar$elements = _scrollbar$elements.call(scrollbar)) === null || _scrollbar$elements === void 0 ? void 0 : _scrollbar$elements.scrollOffsetElement) !== null && _scrollbar$elements$s !== void 0 ? _scrollbar$elements$s : scrollbar === null || scrollbar === void 0 || (_scrollbar$elements2 = scrollbar.elements) === null || _scrollbar$elements2 === void 0 || (_scrollbar$elements2 = _scrollbar$elements2.call(scrollbar)) === null || _scrollbar$elements2 === void 0 ? void 0 : _scrollbar$elements2.viewport) !== null && _ref !== void 0 ? _ref : null;
-		};
-		const getScrollContainer = () => {
-			var _ref3, _getScrollbarScrollEl2;
+		const { elementRef: virtualRef } = useComponentRef("viewportRef");
+		const { componentRef: theadComRef, elementRef: theadRef } = useComponentRef("containerRef");
+		const containerElement = computed(() => {
 			if (splitTable.value) {
-				var _ref2, _getScrollbarScrollEl;
-				if (isVirtualList.value) {
-					var _virtualRef$value;
-					return (_virtualRef$value = virtualRef.value) !== null && _virtualRef$value !== void 0 ? _virtualRef$value : null;
-				}
-				return (_ref2 = (_getScrollbarScrollEl = getScrollbarScrollElement(tbodyComRef.value)) !== null && _getScrollbarScrollEl !== void 0 ? _getScrollbarScrollEl : tbodyRef.value) !== null && _ref2 !== void 0 ? _ref2 : null;
+				if (isVirtualList.value) return virtualRef.value;
+				return tbodyRef.value;
 			}
-			return (_ref3 = (_getScrollbarScrollEl2 = getScrollbarScrollElement(contentComRef.value)) !== null && _getScrollbarScrollEl2 !== void 0 ? _getScrollbarScrollEl2 : contentRef.value) !== null && _ref3 !== void 0 ? _ref3 : null;
-		};
-		const { width: containerElementWidth } = useElementSize(computed(() => getScrollContainer()));
-		const getContainerMetrics = () => {
-			var _element$scrollWidth;
-			const element = getScrollContainer();
-			return {
-				element,
-				clientWidth: containerElementWidth.value || (element === null || element === void 0 ? void 0 : element.clientWidth) || containerClientWidth.value,
-				scrollWidth: (_element$scrollWidth = element === null || element === void 0 ? void 0 : element.scrollWidth) !== null && _element$scrollWidth !== void 0 ? _element$scrollWidth : containerScrollWidth.value
-			};
-		};
+			return contentRef.value;
+		});
+		const splitTable = computed(() => isScroll.value.y || props.stickyHeader || isVirtualList.value || isScroll.value.x && flattenData.value.length === 0);
 		const slotColumnMap = reactive(/* @__PURE__ */ new Map());
 		const slotColumns = ref();
 		watch([components, slotColumnMap], ([components, slotColumnMap]) => {
@@ -669,17 +626,14 @@ var table_default = /* @__PURE__ */ defineComponent({
 		const dataColumnMap = /* @__PURE__ */ new Map();
 		const dataColumns = ref([]);
 		const groupColumns = ref([]);
-		const { resizingColumn, columnWidth, handleThMouseDown } = useColumnResize(thRefs, emit, (dataIndex) => {
-			var _dataColumnMap$get;
-			return (_dataColumnMap$get = dataColumnMap.get(dataIndex)) === null || _dataColumnMap$get === void 0 ? void 0 : _dataColumnMap$get.width;
-		});
+		const { resizingColumn, columnWidth, handleThMouseDown } = useColumnResize(thRefs, emit);
 		watch([
 			columns,
 			slotColumns,
 			columnWidth
 		], ([columns, slotColumns]) => {
-			var _ref4;
-			const result = getGroupColumns((_ref4 = slotColumns !== null && slotColumns !== void 0 ? slotColumns : columns) !== null && _ref4 !== void 0 ? _ref4 : [], dataColumnMap, columnWidth);
+			var _ref;
+			const result = getGroupColumns((_ref = slotColumns !== null && slotColumns !== void 0 ? slotColumns : columns) !== null && _ref !== void 0 ? _ref : [], dataColumnMap, columnWidth);
 			dataColumns.value = result.dataColumns;
 			groupColumns.value = result.groupColumns;
 		}, {
@@ -708,6 +662,10 @@ var table_default = /* @__PURE__ */ defineComponent({
 			if (_hasRightFixedColumn !== hasRightFixedColumn.value) hasRightFixedColumn.value = _hasRightFixedColumn;
 			if (_hasLeftFixedDataColumns !== hasLeftFixedDataColumns.value) hasLeftFixedDataColumns.value = _hasLeftFixedDataColumns;
 		});
+		const hasEllipsis = computed(() => {
+			for (const col of dataColumns.value) if (col.ellipsis) return true;
+			return false;
+		});
 		const handleChange = (type) => {
 			const extra = {
 				type,
@@ -746,9 +704,8 @@ var table_default = /* @__PURE__ */ defineComponent({
 			disabledKeys.clear();
 			const travelData = (data) => {
 				if (isArray(data) && data.length > 0) for (const record of data) {
-					const recordKey = getRecordKey(record, rowKey.value);
-					allRowKeys.push(recordKey);
-					if (record.disabled) disabledKeys.add(recordKey);
+					allRowKeys.push(getRecordKey(record, rowKey.value));
+					if (record.disabled) disabledKeys.add(getRecordKey(record, rowKey.value));
 					if (record.children) travelData(record.children);
 				}
 			};
@@ -812,7 +769,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 		};
 		const { dragType, dragState, handleDragStart, handleDragEnter, handleDragover, handleDragEnd, handleDrop } = useDrag(draggable);
 		const processedData = computed(() => {
-			var _props$data2;
+			var _props$data;
 			const travel = (data) => {
 				const result = [];
 				for (const _record of data) {
@@ -835,7 +792,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 				}
 				return result;
 			};
-			return travel((_props$data2 = props.data) !== null && _props$data2 !== void 0 ? _props$data2 : []);
+			return travel((_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : []);
 		});
 		const validData = computed(() => {
 			const travel = (data) => data.filter((record) => {
@@ -864,7 +821,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 								dataIndex: field,
 								direction
 							});
-							if (valueA == null || valueB == null) return 0;
+							if (valueA === void 0 || valueB === void 0) return 0;
 							const result = valueA > valueB ? 1 : -1;
 							return direction === "descend" ? -result : result;
 						});
@@ -946,16 +903,19 @@ var table_default = /* @__PURE__ */ defineComponent({
 			}
 			return [];
 		});
-		const setAlignPosition = (element = getScrollContainer()) => {
-			if (!element) {
-				alignLeft.value = true;
-				alignRight.value = true;
-				return;
+		const containerScrollLeft = ref(0);
+		const alignLeft = ref(true);
+		const alignRight = ref(true);
+		const setAlignPosition = () => {
+			let _alignLeft = true;
+			let _alignRight = true;
+			const scrollContainer = containerElement.value;
+			if (scrollContainer) {
+				_alignLeft = containerScrollLeft.value === 0;
+				_alignRight = Math.ceil(containerScrollLeft.value + scrollContainer.offsetWidth) >= scrollContainer.scrollWidth;
 			}
-			const nextAlignLeft = containerScrollLeft.value === 0;
-			const nextAlignRight = Math.ceil(containerScrollLeft.value + element.clientWidth) >= element.scrollWidth;
-			if (nextAlignLeft !== alignLeft.value) alignLeft.value = nextAlignLeft;
-			if (nextAlignRight !== alignRight.value) alignRight.value = nextAlignRight;
+			if (_alignLeft !== alignLeft.value) alignLeft.value = _alignLeft;
+			if (_alignRight !== alignRight.value) alignRight.value = _alignRight;
 		};
 		const getTableScrollCls = () => {
 			if (alignLeft.value && alignRight.value) return `${prefixCls}-scroll-position-both`;
@@ -969,26 +929,13 @@ var table_default = /* @__PURE__ */ defineComponent({
 			if (hasRightFixedColumn.value) cls.push(`${prefixCls}-has-fixed-col-right`);
 			return cls;
 		};
-		const handleScroll = (event) => {
-			const element = event.target;
-			if (!element) return;
-			if (element.scrollLeft !== containerScrollLeft.value) containerScrollLeft.value = element.scrollLeft;
-			containerClientWidth.value = element.clientWidth;
-			containerScrollWidth.value = element.scrollWidth;
-			debugLog("scroll:x", {
-				scrollLeft: element.scrollLeft,
-				clientWidth: element.clientWidth,
-				scrollWidth: element.scrollWidth,
-				autoScrollX: autoScrollX.value,
-				calculatedTableWidth: getCalculatedTableWidth()
-			});
-			setAlignPosition(element);
+		const handleScroll = (e) => {
+			if (e.target.scrollLeft !== containerScrollLeft.value) containerScrollLeft.value = e.target.scrollLeft;
+			setAlignPosition();
 		};
-		const onTbodyScroll = (event) => {
-			handleScroll(event);
-			const element = event.target;
-			if (!element) return;
-			const scrollLeft = element.scrollLeft;
+		const onTbodyScroll = (e) => {
+			handleScroll(e);
+			const { scrollLeft } = e.target;
 			if (theadRef.value) theadRef.value.scrollLeft = scrollLeft;
 			if (summaryRef.value) summaryRef.value.scrollLeft = scrollLeft;
 		};
@@ -1061,7 +1008,26 @@ var table_default = /* @__PURE__ */ defineComponent({
 				selection
 			}) : operations;
 		});
-		const hasResizedColumns = computed(() => Object.keys(columnWidth).length > 0);
+		const tableGridTemplate = computed(() => getTableGridTemplate(dataColumns.value, operations.value, columnWidth));
+		const getTableElementStyle = (base) => _objectSpread2(_objectSpread2({}, base), {}, { "--sd-table-grid-template": tableGridTemplate.value });
+		const headerStyle = computed(() => {
+			if (isScroll.value.x) {
+				var _props$scroll5, _props$scroll6, _props$scroll7, _props$scroll8;
+				const style = { width: isNumber((_props$scroll5 = props.scroll) === null || _props$scroll5 === void 0 ? void 0 : _props$scroll5.x) ? `${(_props$scroll6 = props.scroll) === null || _props$scroll6 === void 0 ? void 0 : _props$scroll6.x}px` : (_props$scroll7 = props.scroll) === null || _props$scroll7 === void 0 ? void 0 : _props$scroll7.x };
+				if ((_props$scroll8 = props.scroll) === null || _props$scroll8 === void 0 ? void 0 : _props$scroll8.minWidth) style.minWidth = isNumber(props.scroll.minWidth) ? `${props.scroll.minWidth}px` : props.scroll.minWidth;
+				return getTableElementStyle(style);
+			}
+			return getTableElementStyle();
+		});
+		const contentStyle = computed(() => {
+			if (isScroll.value.x && flattenData.value.length > 0) {
+				var _props$scroll9, _props$scroll10, _props$scroll11, _props$scroll12;
+				const style = { width: isNumber((_props$scroll9 = props.scroll) === null || _props$scroll9 === void 0 ? void 0 : _props$scroll9.x) ? `${(_props$scroll10 = props.scroll) === null || _props$scroll10 === void 0 ? void 0 : _props$scroll10.x}px` : (_props$scroll11 = props.scroll) === null || _props$scroll11 === void 0 ? void 0 : _props$scroll11.x };
+				if ((_props$scroll12 = props.scroll) === null || _props$scroll12 === void 0 ? void 0 : _props$scroll12.minWidth) style.minWidth = isNumber(props.scroll.minWidth) ? `${props.scroll.minWidth}px` : props.scroll.minWidth;
+				return getTableElementStyle(style);
+			}
+			return getTableElementStyle();
+		});
 		const addColumn = (id, column) => {
 			slotColumnMap.set(id, column);
 		};
@@ -1100,7 +1066,8 @@ var table_default = /* @__PURE__ */ defineComponent({
 				[`${prefixCls}-hover`]: props.hoverable,
 				[`${prefixCls}-dragging`]: dragState.dragging,
 				[`${prefixCls}-type-selection`]: Boolean(props.rowSelection),
-				[`${prefixCls}-empty`]: props.data && flattenData.value.length === 0
+				[`${prefixCls}-empty`]: props.data && flattenData.value.length === 0,
+				[`${prefixCls}-layout-fixed`]: props.tableLayoutFixed || isScroll.value.x || splitTable.value || hasEllipsis.value
 			}
 		]);
 		const paginationCls = computed(() => [`${prefixCls}-pagination`, {
@@ -1111,244 +1078,44 @@ var table_default = /* @__PURE__ */ defineComponent({
 		}]);
 		const tableCls = computed(() => {
 			const cls = getTableFixedCls();
-			if (resolvedScroll.value.x) cls.push(getTableScrollCls());
+			if (isScroll.value.x) cls.push(getTableScrollCls());
 			if (splitTable.value) cls.push(`${prefixCls}-scroll-y`);
 			return cls;
 		});
-		const resolvedVirtualListProps = computed(() => {
-			var _ref5;
-			if (!props.virtualListProps) return;
-			const _props$virtualListPro = props.virtualListProps, { itemKey, keyField, estimatedSize, scrollbar: virtualScrollbar, itemSize, minItemSize, component: _component, listAttrs: _listAttrs, contentAttrs: _contentAttrs, listStyle: _listStyle, paddingPosition: _paddingPosition } = _props$virtualListPro;
-			return _objectSpread2(_objectSpread2({}, _objectWithoutProperties(_props$virtualListPro, _excluded)), {}, {
-				itemSize,
-				minItemSize: minItemSize !== null && minItemSize !== void 0 ? minItemSize : itemSize === void 0 ? estimatedSize : void 0,
-				keyField: (_ref5 = keyField !== null && keyField !== void 0 ? keyField : itemKey) !== null && _ref5 !== void 0 ? _ref5 : "key",
-				estimatedSize,
-				scrollbar: virtualScrollbar !== null && virtualScrollbar !== void 0 ? virtualScrollbar : props.scrollbar
-			});
-		});
 		const tableVirtualListProps = computed(() => {
-			var _ref6, _ref7, _ref8, _props$scroll5, _props$scroll$y, _props$scroll6;
-			if (!resolvedVirtualListProps.value) return;
-			if ("prerender" in resolvedVirtualListProps.value && resolvedVirtualListProps.value.prerender !== void 0) return resolvedVirtualListProps.value;
-			const rowHeightSource = (_ref6 = (_ref7 = (_ref8 = typeof resolvedVirtualListProps.value.itemSize === "number" ? resolvedVirtualListProps.value.itemSize : void 0) !== null && _ref8 !== void 0 ? _ref8 : typeof resolvedVirtualListProps.value.minItemSize === "number" ? resolvedVirtualListProps.value.minItemSize : void 0) !== null && _ref7 !== void 0 ? _ref7 : resolvedVirtualListProps.value.estimatedSize) !== null && _ref6 !== void 0 ? _ref6 : 32;
-			const scrollY = typeof ((_props$scroll5 = props.scroll) === null || _props$scroll5 === void 0 ? void 0 : _props$scroll5.y) === "number" ? props.scroll.y : Number.parseFloat((_props$scroll$y = (_props$scroll6 = props.scroll) === null || _props$scroll6 === void 0 ? void 0 : _props$scroll6.y) !== null && _props$scroll$y !== void 0 ? _props$scroll$y : "") || rowHeightSource * 8;
-			const prerender = Math.max(Math.ceil(scrollY / Math.max(rowHeightSource, 1)), 8);
-			return _objectSpread2(_objectSpread2({}, resolvedVirtualListProps.value), {}, { prerender });
+			if (!props.virtualListProps) return {};
+			const _props$virtualListPro = props.virtualListProps, { data: _data, itemKey: _itemKey, component: _component, listAttrs: _listAttrs, contentAttrs: _contentAttrs, paddingPosition: _paddingPosition, isStaticItemHeight, fixedSize } = _props$virtualListPro;
+			return _objectSpread2(_objectSpread2({}, _objectWithoutProperties(_props$virtualListPro, _excluded)), {}, { fixedSize: fixedSize !== null && fixedSize !== void 0 ? fixedSize : isStaticItemHeight });
 		});
+		const isVirtualList = computed(() => Boolean(props.virtualListProps));
 		const thWidth = ref({});
 		const getThWidth = () => {
 			const width = {};
 			for (const key of Object.keys(thRefs.value)) width[key] = thRefs.value[key].offsetWidth;
 			thWidth.value = width;
 		};
-		const getCalculatedTableWidth = () => {
-			return operations.value.reduce((sum, item) => {
-				var _item$width;
-				return sum + ((_item$width = item.width) !== null && _item$width !== void 0 ? _item$width : 40);
-			}, 0) + dataColumns.value.reduce((sum, item) => {
-				const resizedWidth = item.dataIndex ? columnWidth[item.dataIndex] : void 0;
-				if (resizedWidth) return sum + resizedWidth;
-				if (item.width) return sum + item.width;
-				if (item.minWidth) return sum + item.minWidth;
-				const measuredWidth = item.dataIndex ? thWidth.value[item.dataIndex] : void 0;
-				return sum + (measuredWidth !== null && measuredWidth !== void 0 ? measuredWidth : 0);
-			}, 0);
-		};
-		const resolvedColumnWidth = computed(() => {
-			var _props$scroll7, _props$scroll8;
-			if (Boolean(((_props$scroll7 = props.scroll) === null || _props$scroll7 === void 0 ? void 0 : _props$scroll7.x) || ((_props$scroll8 = props.scroll) === null || _props$scroll8 === void 0 ? void 0 : _props$scroll8.minWidth)) || autoScrollX.value || containerClientWidth.value <= 0) return _objectSpread2({}, columnWidth);
-			const operationWidth = operations.value.reduce((sum, item) => {
-				var _item$width2;
-				return sum + ((_item$width2 = item.width) !== null && _item$width2 !== void 0 ? _item$width2 : 40);
-			}, 0);
-			const availableDataWidth = containerClientWidth.value - operationWidth;
-			if (availableDataWidth <= 0) return columnWidth;
-			const nextColumnWidth = {};
-			const flexColumns = [];
-			let frozenWidth = 0;
-			for (const item of dataColumns.value) {
-				var _item$minWidth, _thWidth$value$key;
-				if (!item.dataIndex) continue;
-				const key = item.dataIndex;
-				const min = Math.max((_item$minWidth = item.minWidth) !== null && _item$minWidth !== void 0 ? _item$minWidth : 40, 40);
-				const resizedWidth = columnWidth[key];
-				const declaredWidth = item.width;
-				if (resizedWidth != null || declaredWidth != null) {
-					var _ref9;
-					const width = Math.max((_ref9 = resizedWidth !== null && resizedWidth !== void 0 ? resizedWidth : declaredWidth) !== null && _ref9 !== void 0 ? _ref9 : min, min);
-					nextColumnWidth[key] = width;
-					frozenWidth += width;
-					continue;
-				}
-				const measuredWidth = (_thWidth$value$key = thWidth.value[key]) !== null && _thWidth$value$key !== void 0 ? _thWidth$value$key : min;
-				flexColumns.push({
-					key,
-					min,
-					base: Math.max(measuredWidth, min)
-				});
-			}
-			if (flexColumns.length === 0) return nextColumnWidth;
-			let remaining = availableDataWidth - frozenWidth;
-			if (remaining <= 0) {
-				for (const item of flexColumns) nextColumnWidth[item.key] = item.base;
-				return nextColumnWidth;
-			}
-			let unfrozen = [...flexColumns];
-			while (unfrozen.length > 0) {
-				const ideal = remaining / unfrozen.length;
-				const idealRounded = Math.round(ideal);
-				const violated = unfrozen.filter((item) => idealRounded < item.min);
-				if (violated.length === 0) {
-					let assigned = 0;
-					unfrozen.forEach((item, index) => {
-						const width = index === unfrozen.length - 1 ? Math.max(Math.round(remaining - assigned), item.min) : idealRounded;
-						nextColumnWidth[item.key] = width;
-						assigned += width;
-					});
-					break;
-				}
-				for (const item of violated) {
-					nextColumnWidth[item.key] = item.min;
-					remaining -= item.min;
-				}
-				unfrozen = unfrozen.filter((item) => idealRounded >= item.min);
-				if (remaining <= 0) {
-					for (const item of unfrozen) nextColumnWidth[item.key] = item.min;
-					break;
-				}
-			}
-			return nextColumnWidth;
-		});
-		const collectColumnMetrics = () => dataColumns.value.map((item) => ({
-			dataIndex: item.dataIndex,
-			width: item.width,
-			minWidth: item.minWidth,
-			resizedWidth: item.dataIndex ? columnWidth[item.dataIndex] : void 0,
-			measuredThWidth: item.dataIndex ? thWidth.value[item.dataIndex] : void 0
-		}));
-		const resolvedTableMinWidth = computed(() => {
-			const totalWidth = getCalculatedTableWidth();
-			if (!autoScrollX.value) return;
-			return totalWidth > 0 ? `${totalWidth}px` : void 0;
-		});
-		const mergeMinWidth = (style = {}) => {
-			if (!resolvedTableMinWidth.value) return Object.keys(style).length > 0 ? style : void 0;
-			return _objectSpread2(_objectSpread2({}, style), {}, { minWidth: style.minWidth ? `max(${style.minWidth}, ${resolvedTableMinWidth.value})` : resolvedTableMinWidth.value });
-		};
-		const tableStyle = computed(() => {
-			if (resolvedScroll.value.x) {
-				var _props$scroll9, _props$scroll10, _props$scroll11, _props$scroll12;
-				const resolvedScrollWidth = isNumber((_props$scroll9 = props.scroll) === null || _props$scroll9 === void 0 ? void 0 : _props$scroll9.x) ? `${(_props$scroll10 = props.scroll) === null || _props$scroll10 === void 0 ? void 0 : _props$scroll10.x}px` : (_props$scroll11 = props.scroll) === null || _props$scroll11 === void 0 ? void 0 : _props$scroll11.x;
-				const style = { width: resolvedScrollWidth };
-				if ((_props$scroll12 = props.scroll) === null || _props$scroll12 === void 0 ? void 0 : _props$scroll12.minWidth) style.minWidth = isNumber(props.scroll.minWidth) ? `${props.scroll.minWidth}px` : props.scroll.minWidth;
-				else if (resolvedScrollWidth) style.minWidth = resolvedScrollWidth;
-				return mergeMinWidth(style);
-			}
-			return mergeMinWidth();
-		});
-		const gridTemplateColumns = computed(() => {
-			const operationTracks = operations.value.map((item) => {
-				var _item$width3;
-				return `${(_item$width3 = item.width) !== null && _item$width3 !== void 0 ? _item$width3 : 40}px`;
-			});
-			const dataTracks = dataColumns.value.map((item) => {
-				var _item$minWidth2;
-				const key = item.dataIndex;
-				const resizedWidth = key ? resolvedColumnWidth.value[key] : void 0;
-				const width = resizedWidth !== null && resizedWidth !== void 0 ? resizedWidth : item.width;
-				const minWidth = (_item$minWidth2 = item.minWidth) !== null && _item$minWidth2 !== void 0 ? _item$minWidth2 : 40;
-				if (width != null) return `${Math.max(width, minWidth)}px`;
-				return `minmax(${minWidth}px, 1fr)`;
-			});
-			return operationTracks.concat(dataTracks).join(" ");
-		});
-		const elementStyle = computed(() => {
-			return _objectSpread2(_objectSpread2({}, tableStyle.value ? _objectSpread2({}, tableStyle.value) : {}), {}, { "--sd-table-grid-template": gridTemplateColumns.value });
-		});
-		const syncContainerMetrics = (reason) => {
-			var _props$scroll13, _props$scroll14;
-			const { element, clientWidth, scrollWidth } = getContainerMetrics();
-			if (!element) return;
-			containerClientWidth.value = clientWidth;
-			containerScrollWidth.value = scrollWidth;
-			containerScrollLeft.value = element.scrollLeft;
-			const explicitScrollX = Boolean(((_props$scroll13 = props.scroll) === null || _props$scroll13 === void 0 ? void 0 : _props$scroll13.x) || ((_props$scroll14 = props.scroll) === null || _props$scroll14 === void 0 ? void 0 : _props$scroll14.minWidth));
-			const calculatedTableWidth = getCalculatedTableWidth();
-			autoScrollX.value = !explicitScrollX && containerClientWidth.value > 0 && calculatedTableWidth > containerClientWidth.value;
-			debugLog(`layout:${reason}`, {
-				explicitScroll: props.scroll,
-				resolvedScroll: resolvedScroll.value,
-				autoScrollX: autoScrollX.value,
-				calculatedTableWidth,
-				resolvedTableMinWidth: resolvedTableMinWidth.value,
-				container: {
-					clientWidth: containerClientWidth.value,
-					scrollWidth: containerScrollWidth.value,
-					scrollLeft: element.scrollLeft
-				},
-				splitTable: splitTable.value,
-				hasResizedColumns: hasResizedColumns.value,
-				columns: collectColumnMetrics()
-			});
-			setAlignPosition(element);
-		};
 		const hasScrollBar = ref(false);
-		const { width: tbodyBorderWidth } = useElementBounding(tbodyRef);
-		const { width: tbodyContentWidth } = useElementSize(tbodyRef);
 		const isTbodyHasScrollBar = () => {
-			if (tbodyRef.value) return tbodyBorderWidth.value > tbodyContentWidth.value + 1;
+			if (tbodyRef.value) return tbodyRef.value.offsetWidth > tbodyRef.value.clientWidth;
 			return false;
 		};
 		const handleTbodyResize = () => {
 			const _hasScrollBar = isTbodyHasScrollBar();
 			if (hasScrollBar.value !== _hasScrollBar) hasScrollBar.value = _hasScrollBar;
+			setAlignPosition();
 			getThWidth();
-			syncContainerMetrics("tbody-resize");
 		};
-		useResizeObserver(tbodyRef, () => {
-			handleTbodyResize();
-		});
-		useResizeObserver(virtualRef, () => {
-			handleTbodyResize();
-		});
-		useResizeObserver(contentRef, () => {
-			getThWidth();
-			syncContainerMetrics("content-resize");
-		});
 		onMounted(() => {
 			hasScrollBar.value = isTbodyHasScrollBar();
 			getThWidth();
-			syncContainerMetrics("mounted");
-		});
-		watch([
-			thWidth,
-			columnWidth,
-			dataColumns
-		], _asyncToGenerator(function* () {
-			yield nextTick();
-			syncContainerMetrics("state-change");
-		}), { deep: true });
-		watchThrottled(columnWidth, _asyncToGenerator(function* () {
-			var _getVirtualListInstan, _getVirtualListInstan2;
-			if (!isVirtualList.value) return;
-			yield nextTick();
-			(_getVirtualListInstan = getVirtualListInstance()) === null || _getVirtualListInstan === void 0 || (_getVirtualListInstan2 = _getVirtualListInstan.forceUpdate) === null || _getVirtualListInstan2 === void 0 || _getVirtualListInstan2.call(_getVirtualListInstan, true);
-		}), {
-			deep: true,
-			throttle: 400
 		});
 		const spinProps = computed(() => isObject(props.loading) ? props.loading : { loading: props.loading });
 		const renderEmpty = () => {
 			return createVNode(table_tr_default, { "empty": true }, { default: () => [createVNode(table_td_default, { "colSpan": dataColumns.value.length + operations.value.length }, { default: () => {
-				var _ref10, _slots$empty, _slots$empty2, _configCtx$slots, _configCtx$slots$empt;
-				return [(_ref10 = (_slots$empty = (_slots$empty2 = slots.empty) === null || _slots$empty2 === void 0 ? void 0 : _slots$empty2.call(slots)) !== null && _slots$empty !== void 0 ? _slots$empty : configCtx === null || configCtx === void 0 || (_configCtx$slots$empt = (_configCtx$slots = configCtx.slots).empty) === null || _configCtx$slots$empt === void 0 ? void 0 : _configCtx$slots$empt.call(_configCtx$slots, { component: "table" })) !== null && _ref10 !== void 0 ? _ref10 : createVNode(Empty, null, null)];
+				var _ref2, _slots$empty, _slots$empty2, _configCtx$slots, _configCtx$slots$empt;
+				return [(_ref2 = (_slots$empty = (_slots$empty2 = slots.empty) === null || _slots$empty2 === void 0 ? void 0 : _slots$empty2.call(slots)) !== null && _slots$empty !== void 0 ? _slots$empty : configCtx === null || configCtx === void 0 || (_configCtx$slots$empt = (_configCtx$slots = configCtx.slots).empty) === null || _configCtx$slots$empt === void 0 ? void 0 : _configCtx$slots$empt.call(_configCtx$slots, { component: "table" })) !== null && _ref2 !== void 0 ? _ref2 : createVNode(Empty, null, null)];
 			} })] });
 		};
-		const renderAppend = () => {
-			if (!slots.append) return null;
-			return createVNode("div", { "class": `${prefixCls}-append` }, [slots.append()]);
-		};
 		const renderExpandContent = (record) => {
 			var _props$expandable2;
 			if (record.expand) return isFunction(record.expand) ? record.expand() : record.expand;
@@ -1366,17 +1133,23 @@ var table_default = /* @__PURE__ */ defineComponent({
 			data: summaryData,
 			columns: allColumns
 		});
+		const getVirtualColumnStyle = (name) => {
+			if (!isVirtualList.value || !name || !thWidth.value[name]) return;
+			return { width: `${thWidth.value[name]}px` };
+		};
 		const renderSummaryRow = (record, rowIndex) => {
-			return createVNode(table_tr_default, mergeProps({
+			return createVNode(table_tr_default, {
 				"key": `table-summary-${rowIndex}`,
-				"class": [`${prefixCls}-tr-summary`, isFunction(props.rowClass) ? props.rowClass(record.raw, rowIndex) : props.rowClass]
-			}, { onClick: (ev) => handleRowClick(record, ev) }), {
+				"class": [`${prefixCls}-tr-summary`, isFunction(props.rowClass) ? props.rowClass(record.raw, rowIndex) : props.rowClass],
+				"onClick": (ev) => handleRowClick(record, ev)
+			}, {
 				default: () => [operations.value.map((operation, index) => {
 					var _tableSummarySpan$val;
 					const cellId = `${rowIndex}-${index}-${record.key}`;
 					const [rowspan, colspan] = (_tableSummarySpan$val = tableSummarySpan.value[cellId]) !== null && _tableSummarySpan$val !== void 0 ? _tableSummarySpan$val : [1, 1];
 					if (removedSummaryCells.value.includes(cellId)) return null;
 					return createVNode(table_operation_td_default, {
+						"style": getVirtualColumnStyle(operation.name),
 						"operationColumn": operation,
 						"operations": operations.value,
 						"record": record,
@@ -1389,8 +1162,10 @@ var table_default = /* @__PURE__ */ defineComponent({
 					const cellId = `${rowIndex}-${operations.value.length + index}-${record.key}`;
 					const [rowspan, colspan] = (_tableSummarySpan$val2 = tableSummarySpan.value[cellId]) !== null && _tableSummarySpan$val2 !== void 0 ? _tableSummarySpan$val2 : [1, 1];
 					if (removedSummaryCells.value.includes(cellId)) return null;
-					return createVNode(table_td_default, mergeProps({
+					const style = getVirtualColumnStyle(column.dataIndex);
+					return createVNode(table_td_default, {
 						"key": `td-${cellId}`,
+						"style": style,
 						"rowIndex": rowIndex,
 						"record": record,
 						"column": column,
@@ -1398,14 +1173,13 @@ var table_default = /* @__PURE__ */ defineComponent({
 						"dataColumns": dataColumns.value,
 						"rowSpan": rowspan,
 						"colSpan": colspan,
-						"summary": true
+						"summary": true,
+						"onClick": (ev) => handleCellClick(record, column, ev),
+						"onDblclick": (ev) => handleCellDblclick(record, column, ev),
+						"onMouseenter": (ev) => handleCellMouseEnter(record, column, ev),
+						"onMouseleave": (ev) => handleCellMouseLeave(record, column, ev),
+						"onContextmenu": (ev) => handleCellContextmenu(record, column, ev)
 					}, {
-						onClick: (ev) => handleCellClick(record, column, ev),
-						onDblclick: (ev) => handleCellDblclick(record, column, ev),
-						onMouseenter: (ev) => handleCellMouseEnter(record, column, ev),
-						onMouseleave: (ev) => handleCellMouseLeave(record, column, ev),
-						onContextmenu: (ev) => handleCellContextmenu(record, column, ev)
-					}), {
 						td: slots.td,
 						cell: slots["summary-cell"]
 					});
@@ -1418,7 +1192,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 			return null;
 		};
 		const renderExpandBtn = (record, stopPropagation = true) => {
-			var _ref11, _slots$expandIcon, _slots$expandIcon2, _props$expandable3, _props$expandable3$ic;
+			var _ref3, _slots$expandIcon, _slots$expandIcon2, _props$expandable3, _props$expandable3$ic;
 			const currentKey = record.key;
 			const expanded = expandedRowKeys.value.includes(currentKey);
 			return createVNode("button", {
@@ -1428,10 +1202,10 @@ var table_default = /* @__PURE__ */ defineComponent({
 					handleExpand(currentKey, record.raw);
 					if (stopPropagation) ev.stopPropagation();
 				}
-			}, [(_ref11 = (_slots$expandIcon = (_slots$expandIcon2 = slots["expand-icon"]) === null || _slots$expandIcon2 === void 0 ? void 0 : _slots$expandIcon2.call(slots, {
+			}, [(_ref3 = (_slots$expandIcon = (_slots$expandIcon2 = slots["expand-icon"]) === null || _slots$expandIcon2 === void 0 ? void 0 : _slots$expandIcon2.call(slots, {
 				expanded,
 				record: record.raw
-			})) !== null && _slots$expandIcon !== void 0 ? _slots$expandIcon : (_props$expandable3 = props.expandable) === null || _props$expandable3 === void 0 || (_props$expandable3$ic = _props$expandable3.icon) === null || _props$expandable3$ic === void 0 ? void 0 : _props$expandable3$ic.call(_props$expandable3, expanded, record.raw)) !== null && _ref11 !== void 0 ? _ref11 : expanded ? createVNode(IconMinus, null, null) : createVNode(IconPlus, null, null)]);
+			})) !== null && _slots$expandIcon !== void 0 ? _slots$expandIcon : (_props$expandable3 = props.expandable) === null || _props$expandable3 === void 0 || (_props$expandable3$ic = _props$expandable3.icon) === null || _props$expandable3$ic === void 0 ? void 0 : _props$expandable3$ic.call(_props$expandable3, expanded, record.raw)) !== null && _ref3 !== void 0 ? _ref3 : expanded ? createVNode(IconMinus, null, null) : createVNode(IconPlus, null, null)]);
 		};
 		const renderExpand = (record, { indentSize, indexPath, allowDrag, expandContent }) => {
 			if (record.hasSubtree) {
@@ -1443,14 +1217,17 @@ var table_default = /* @__PURE__ */ defineComponent({
 					allowDrag
 				}));
 			}
-			if (expandContent) return createVNode(table_tr_default, {
-				"key": `${record.key}-expand`,
-				"expand": true
-			}, { default: () => [createVNode(table_td_default, {
-				"isFixedExpand": hasLeftFixedColumn.value || hasRightFixedColumn.value,
-				"containerWidth": containerClientWidth.value,
-				"colSpan": dataColumns.value.length + operations.value.length
-			}, _isSlot(expandContent) ? expandContent : { default: () => [expandContent] })] });
+			if (expandContent) {
+				const scrollContainer = containerElement.value;
+				return createVNode(table_tr_default, {
+					"key": `${record.key}-expand`,
+					"expand": true
+				}, { default: () => [createVNode(table_td_default, {
+					"isFixedExpand": hasLeftFixedColumn.value || hasRightFixedColumn.value,
+					"containerWidth": scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientWidth,
+					"colSpan": dataColumns.value.length + operations.value.length
+				}, _isSlot(expandContent) ? expandContent : { default: () => [expandContent] })] });
+			}
 			return null;
 		};
 		const renderRecord = (record, rowIndex, { indentSize = 0, indexPath, allowDrag = true } = {}) => {
@@ -1460,7 +1237,6 @@ var table_default = /* @__PURE__ */ defineComponent({
 			const expandContent = renderExpandContent(record);
 			const showExpand = expandedRowKeys.value.includes(currentKey);
 			const isDragTarget = dragState.sourceKey === record.key;
-			const isDropTarget = dragState.dragging && dragState.dropIndicatorPath.toString() === currentPath.toString() && !isDragTarget;
 			const dragSourceEvent = dragType.value ? {
 				draggable: allowDrag,
 				onDragstart: (ev) => {
@@ -1491,24 +1267,24 @@ var table_default = /* @__PURE__ */ defineComponent({
 				"key": currentKey,
 				"class": [{
 					[`${prefixCls}-tr-draggable`]: dragType.value === "row",
-					[`${prefixCls}-tr-drag`]: isDragTarget,
-					[`${prefixCls}-tr-drop-target`]: isDropTarget
+					[`${prefixCls}-tr-drag`]: isDragTarget
 				}, isFunction(props.rowClass) ? props.rowClass(record.raw, rowIndex) : props.rowClass],
 				"rowIndex": rowIndex,
 				"record": record,
-				"checked": props.rowSelection && ((_selectedRowKeys$valu = selectedRowKeys.value) === null || _selectedRowKeys$valu === void 0 ? void 0 : _selectedRowKeys$valu.includes(currentKey))
-			}, {
-				onClick: (ev) => handleRowClick(record, ev),
-				onDblclick: (ev) => handleRowDblclick(record, ev),
-				onContextmenu: (ev) => handleRowContextMenu(record, ev)
+				"checked": props.rowSelection && ((_selectedRowKeys$valu = selectedRowKeys.value) === null || _selectedRowKeys$valu === void 0 ? void 0 : _selectedRowKeys$valu.includes(currentKey)),
+				"onClick": (ev) => handleRowClick(record, ev),
+				"onDblclick": (ev) => handleRowDblclick(record, ev),
+				"onContextmenu": (ev) => handleRowContextMenu(record, ev)
 			}, dragType.value === "row" ? dragSourceEvent : {}, dragTargetEvent), {
 				default: () => [operations.value.map((operation, index) => {
 					var _tableSpan$value$cell;
 					const cellId = `${rowIndex}-${index}-${record.key}`;
 					const [rowspan, colspan] = props.spanAll ? (_tableSpan$value$cell = tableSpan.value[cellId]) !== null && _tableSpan$value$cell !== void 0 ? _tableSpan$value$cell : [1, 1] : [1, 1];
 					if (props.spanAll && removedCells.value.includes(cellId)) return null;
+					const style = getVirtualColumnStyle(operation.name);
 					return createVNode(table_operation_td_default, mergeProps({
 						"key": `operation-td-${index}`,
+						"style": style,
 						"operationColumn": operation,
 						"operations": operations.value,
 						"record": record,
@@ -1527,8 +1303,10 @@ var table_default = /* @__PURE__ */ defineComponent({
 						showExpandBtn: record.hasSubtree,
 						indentSize: record.hasSubtree ? indentSize - 20 : indentSize
 					} : {};
+					const style = getVirtualColumnStyle(column.dataIndex);
 					return createVNode(table_td_default, mergeProps({
 						"key": `td-${index}`,
+						"style": style,
 						"rowIndex": rowIndex,
 						"record": record,
 						"column": column,
@@ -1538,11 +1316,11 @@ var table_default = /* @__PURE__ */ defineComponent({
 						"renderExpandBtn": renderExpandBtn,
 						"colSpan": colspan
 					}, extraProps, {
-						onClick: (ev) => handleCellClick(record, column, ev),
-						onDblclick: (ev) => handleCellDblclick(record, column, ev),
-						onMouseenter: (ev) => handleCellMouseEnter(record, column, ev),
-						onMouseleave: (ev) => handleCellMouseLeave(record, column, ev),
-						onContextmenu: (ev) => handleCellContextmenu(record, column, ev)
+						"onClick": (ev) => handleCellClick(record, column, ev),
+						"onDblclick": (ev) => handleCellDblclick(record, column, ev),
+						"onMouseenter": (ev) => handleCellMouseEnter(record, column, ev),
+						"onMouseleave": (ev) => handleCellMouseLeave(record, column, ev),
+						"onContextmenu": (ev) => handleCellContextmenu(record, column, ev)
 					}), { td: slots.td });
 				})],
 				tr: slots.tr
@@ -1560,112 +1338,115 @@ var table_default = /* @__PURE__ */ defineComponent({
 				tbody: slots.tbody
 			});
 		};
-		const renderVirtualRecord = (record, index) => {
-			const hasSubData = flattenData.value.some((item) => Boolean(item.hasSubtree));
-			return createVNode("div", { "class": `${prefixCls}-virtual-item` }, [renderRecord(record, index, { indentSize: hasSubData ? 20 : 0 })]);
-		};
 		const renderHeader = () => createVNode(table_thead_default, null, {
 			default: () => [groupColumns.value.map((row, index) => createVNode(table_tr_default, { "key": `header-row-${index}` }, { default: () => [index === 0 && operations.value.map((operation, index) => {
 				var _props$rowSelection2;
-				return createVNode(table_operation_th_default, mergeProps({ "key": `operation-th-${index}` }, { ref: (ins) => {
-					const instance = ins;
-					if ((instance === null || instance === void 0 ? void 0 : instance.$el) && operation.name) thRefs.value[operation.name] = instance.$el;
-				} }, {
+				return createVNode(table_operation_th_default, {
+					"key": `operation-th-${index}`,
+					"ref": (ins) => {
+						if ((ins === null || ins === void 0 ? void 0 : ins.$el) && operation.name) thRefs.value[operation.name] = ins.$el;
+					},
 					"operationColumn": operation,
 					"operations": operations.value,
 					"selectAll": Boolean(operation.name === "selection-checkbox" && ((_props$rowSelection2 = props.rowSelection) === null || _props$rowSelection2 === void 0 ? void 0 : _props$rowSelection2.showCheckedAll)),
 					"rowSpan": groupColumns.value.length
-				}), null);
+				}, null);
 			}), row.map((column, index) => {
 				const resizable = props.columnResizable && Boolean(column.dataIndex) && index < row.length - 1;
-				return createVNode(table_th_default, mergeProps({ "key": `th-${index}` }, { ref: (ins) => {
-					const instance = ins;
-					if ((instance === null || instance === void 0 ? void 0 : instance.$el) && column.dataIndex) thRefs.value[column.dataIndex] = instance.$el;
-				} }, {
+				return createVNode(table_th_default, {
+					"key": `th-${index}`,
+					"ref": (ins) => {
+						if ((ins === null || ins === void 0 ? void 0 : ins.$el) && column.dataIndex) thRefs.value[column.dataIndex] = ins.$el;
+					},
 					"column": column,
 					"operations": operations.value,
 					"dataColumns": dataColumns.value,
-					"resizable": resizable
-				}, { onClick: (ev) => handleHeaderClick(column, ev) }), { th: slots.th });
+					"resizable": resizable,
+					"onClick": (ev) => handleHeaderClick(column, ev)
+				}, { th: slots.th });
 			})] }))],
 			thead: slots.thead
 		});
 		const renderContent = () => {
 			if (splitTable.value) {
-				var _props$scroll15, _props$scroll16;
+				var _props$scroll13, _props$scroll14;
 				const top = isNumber(props.stickyHeader) ? `${props.stickyHeader}px` : void 0;
-				const bodyContent = isVirtualList.value && flattenData.value.length ? createVNode("div", {
-					"class": `${prefixCls}-element`,
-					"style": elementStyle.value
-				}, [createVNode("div", { "class": `${prefixCls}-tbody` }, [createVNode(virtual_list_default, mergeProps({
-					"ref": (ins) => {
-						var _ins$scrollerRef;
-						_virtualComRef.value = ins;
-						if (ins === null || ins === void 0 ? void 0 : ins.$el) tbodyRef.value = ins.$el;
-						if ((ins === null || ins === void 0 || (_ins$scrollerRef = ins.scrollerRef) === null || _ins$scrollerRef === void 0 ? void 0 : _ins$scrollerRef.$el) instanceof HTMLElement) virtualRef.value = ins.scrollerRef.$el;
-						else if (ins === null || ins === void 0 ? void 0 : ins.viewportRef) virtualRef.value = ins.viewportRef;
-					},
-					"class": `${prefixCls}-body`,
-					"items": flattenData.value,
-					"keyField": "key",
-					"height": "auto",
-					"onScroll": onTbodyScroll
-				}, tableVirtualListProps.value), { item: ({ item, index }) => renderVirtualRecord(item, index) })])]) : createVNode(Scrollbar, mergeProps({
-					"ref": tbodyComRef,
-					"class": `${prefixCls}-body`,
-					"style": { maxHeight: isNumber((_props$scroll15 = props.scroll) === null || _props$scroll15 === void 0 ? void 0 : _props$scroll15.y) ? `${(_props$scroll16 = props.scroll) === null || _props$scroll16 === void 0 ? void 0 : _props$scroll16.y}px` : "100%" }
-				}, _objectSpread2(_objectSpread2({}, scrollbarProps.value), {}, { outerStyle: _objectSpread2({
-					display: "flex",
-					minHeight: "0"
-				}, Array.isArray(scrollbarProps.value.outerStyle) ? Object.assign({}, ...scrollbarProps.value.outerStyle) : scrollbarProps.value.outerStyle) }), { "onScroll": onTbodyScroll }), { default: () => [createVNode("div", {
-					"class": `${prefixCls}-element`,
-					"style": elementStyle.value
-				}, [renderBody()])] });
+				const bodyMaxHeight = isNumber((_props$scroll13 = props.scroll) === null || _props$scroll13 === void 0 ? void 0 : _props$scroll13.y) ? `${(_props$scroll14 = props.scroll) === null || _props$scroll14 === void 0 ? void 0 : _props$scroll14.y}px` : "100%";
+				const _scrollbarProps$value = scrollbarProps.value, { outerStyle: bodyOuterStyle } = _scrollbarProps$value, bodyScrollbarRestProps = _objectWithoutProperties(_scrollbarProps$value, _excluded2);
+				const bodyOuterBaseStyle = {
+					maxHeight: bodyMaxHeight,
+					minHeight: 0
+				};
+				const bodyScrollbarOuterStyle = Array.isArray(bodyOuterStyle) ? [bodyOuterBaseStyle, ...bodyOuterStyle] : bodyOuterStyle ? [bodyOuterBaseStyle, bodyOuterStyle] : bodyOuterBaseStyle;
+				const BodyComponent = displayScrollbar.value ? Scrollbar : "div";
 				return createVNode(Fragment, null, [
 					props.showHeader && createVNode("div", {
-						"ref": theadRef,
+						"ref": theadComRef,
 						"class": [`${prefixCls}-header`, { [`${prefixCls}-header-sticky`]: props.stickyHeader }],
-						"style": {
-							overflowX: "hidden",
-							overflowY: "hidden",
-							top
-						}
+						"style": { top }
 					}, [createVNode("div", {
 						"class": `${prefixCls}-element`,
-						"style": elementStyle.value
+						"style": headerStyle.value
 					}, [renderHeader()])]),
-					bodyContent,
+					createVNode(resize_observer_default, { "onResize": handleTbodyResize }, { default: () => [isVirtualList.value && flattenData.value.length ? createVNode(virtual_list_v2_default, mergeProps({
+						"ref": (ins) => {
+							if (ins === null || ins === void 0 ? void 0 : ins.$el) tbodyRef.value = ins.$el;
+						},
+						"class": `${prefixCls}-body`,
+						"data": flattenData.value,
+						"itemKey": "_key",
+						"component": {
+							list: "div",
+							content: "div"
+						},
+						"listAttrs": {
+							class: `${prefixCls}-element`,
+							style: contentStyle.value
+						},
+						"contentAttrs": { class: `${prefixCls}-tbody` },
+						"paddingPosition": "list",
+						"height": bodyMaxHeight
+					}, tableVirtualListProps.value, {
+						"scrollbar": displayScrollbar.value ? scrollbarProps.value : false,
+						"onScroll": onTbodyScroll
+					}), { item: ({ item, index }) => renderRecord(item, index) }) : createVNode(BodyComponent, mergeProps({
+						"ref": tbodyComRef,
+						"class": `${prefixCls}-body`,
+						"style": { maxHeight: bodyMaxHeight }
+					}, displayScrollbar.value ? _objectSpread2({ outerStyle: bodyScrollbarOuterStyle }, bodyScrollbarRestProps) : void 0, { "onScroll": onTbodyScroll }), { default: () => [createVNode("div", {
+						"class": `${prefixCls}-element`,
+						"style": contentStyle.value
+					}, [renderBody()])] })] }),
 					summaryData.value && summaryData.value.length > 0 && createVNode("div", {
 						"ref": summaryRef,
 						"class": `${prefixCls}-tfoot`,
-						"style": { overflowY: "hidden" }
+						"style": { overflow: "hidden" }
 					}, [createVNode("div", {
 						"class": `${prefixCls}-element`,
-						"style": elementStyle.value
-					}, [renderSummary()])]),
-					renderAppend()
+						"style": contentStyle.value
+					}, [renderSummary()])])
 				]);
 			}
-			return createVNode(Fragment, null, [createVNode("div", {
+			return createVNode(resize_observer_default, { "onResize": () => setAlignPosition() }, { default: () => [createVNode("div", {
 				"class": `${prefixCls}-element`,
-				"style": elementStyle.value
+				"style": contentStyle.value
 			}, [
 				props.showHeader && renderHeader(),
 				renderBody(),
 				summaryData.value && summaryData.value.length > 0 && renderSummary()
-			]), renderAppend()]);
+			])] });
 		};
 		const renderTable = (content) => {
-			var _props$scroll17;
-			const style = ((_props$scroll17 = props.scroll) === null || _props$scroll17 === void 0 ? void 0 : _props$scroll17.maxHeight) ? { maxHeight: props.scroll.maxHeight } : void 0;
-			return createVNode(Fragment, null, [createVNode("div", { "class": [`${prefixCls}-container`, tableCls.value] }, [createVNode(Scrollbar, mergeProps({
+			var _props$scroll15;
+			const style = ((_props$scroll15 = props.scroll) === null || _props$scroll15 === void 0 ? void 0 : _props$scroll15.maxHeight) ? { maxHeight: props.scroll.maxHeight } : void 0;
+			const Component = displayScrollbar.value && !splitTable.value ? Scrollbar : "div";
+			const _scrollbarProps$value2 = scrollbarProps.value, { outerStyle: contentOuterStyle } = _scrollbarProps$value2, contentScrollbarRestProps = _objectWithoutProperties(_scrollbarProps$value2, _excluded3);
+			const contentScrollbarOuterStyle = Array.isArray(contentOuterStyle) ? [{ height: "100%" }, ...contentOuterStyle] : contentOuterStyle ? [{ height: "100%" }, contentOuterStyle] : { height: "100%" };
+			return createVNode(Fragment, null, [createVNode("div", { "class": [`${prefixCls}-container`, tableCls.value] }, [createVNode(Component, mergeProps({
 				"ref": contentComRef,
 				"class": [`${prefixCls}-content`, { [`${prefixCls}-content-scroll-x`]: !splitTable.value }],
 				"style": style
-			}, _objectSpread2(_objectSpread2({}, scrollbarProps.value), {}, { outerStyle: { height: "100%" } }), { "onScroll": handleScroll }), { default: () => [content ? createVNode("div", {
-				"class": `${prefixCls}-element`,
-				"style": elementStyle.value
-			}, [content()]) : renderContent()] })]), slots.footer && createVNode("div", { "class": `${prefixCls}-footer` }, [slots.footer()])]);
+			}, scrollbar.value && !splitTable.value ? _objectSpread2({ outerStyle: contentScrollbarOuterStyle }, contentScrollbarRestProps) : void 0, { "onScroll": handleScroll }), { default: () => [content ? createVNode("div", { "class": `${prefixCls}-element` }, [content()]) : renderContent()] })]), slots.footer && createVNode("div", { "class": `${prefixCls}-footer` }, [slots.footer()])]);
 		};
 		const renderPagination = () => {
 			var _slots$paginationLef, _slots$paginationRig;
@@ -1694,10 +1475,10 @@ var table_default = /* @__PURE__ */ defineComponent({
 			]);
 		};
 		const style = computed(() => {
-			var _props$scroll18;
-			if (isString((_props$scroll18 = props.scroll) === null || _props$scroll18 === void 0 ? void 0 : _props$scroll18.y)) {
-				var _props$scroll19;
-				return { height: (_props$scroll19 = props.scroll) === null || _props$scroll19 === void 0 ? void 0 : _props$scroll19.y };
+			var _props$scroll16;
+			if (isString((_props$scroll16 = props.scroll) === null || _props$scroll16 === void 0 ? void 0 : _props$scroll16.y)) {
+				var _props$scroll17;
+				return { height: (_props$scroll17 = props.scroll) === null || _props$scroll17 === void 0 ? void 0 : _props$scroll17.y };
 			}
 		});
 		const render = () => {