@sdata/web-vue 1.9.0 → 1.11.0

package/es/table/table.js

@@ -2,14 +2,15 @@ import { configProviderInjectionKey } from "../config-provider/context.js";
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isArray, isFunction, isNull, isNumber, isObject, isString, isUndefined } from "../_utils/is.js";
-import resize_observer_default from "../_components/resize-observer.js";
-import virtual_list_v2_default from "../_components/virtual-list-v2/index.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/asyncToGenerator.js";
+import virtual_list_default from "../_components/virtual-list/index.js";
 import { omit } from "../_utils/omit.js";
 import { useComponentRef } from "../_hooks/use-component-ref.js";
 import { useScrollbar } from "../_hooks/use-scrollbar.js";
 import Empty from "../empty/index.js";
 import Scrollbar from "../scrollbar/index.js";
 import Spin from "../spin/index.js";
+import { _objectWithoutProperties } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectWithoutProperties.js";
 import { debounce } from "../_utils/debounce.js";
 import { useChildrenComponents } from "../_hooks/use-children-components.js";
 import IconMinus from "../icon/icon-minus/index.js";
@@ -26,7 +27,6 @@ import { getGroupColumns, mapArrayWithChildren, mapRawTableData } from "./utils.
 import { useRowSelection } from "./hooks/use-row-selection.js";
 import { useSorter } from "./hooks/use-sorter.js";
 import { useSpan } from "./hooks/use-span.js";
-import table_col_group_default from "./table-col-group.js";
 import table_operation_td_default from "./table-operation-td.js";
 import table_operation_th_default from "./table-operation-th.js";
 import table_tbody_default from "./table-tbody.js";
@@ -34,11 +34,26 @@ 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, onMounted, provide, reactive, ref, toRefs, watch, watchEffect } from "vue";
+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";
 //#region components/table/table.tsx
+var _excluded = [
+	"itemKey",
+	"keyField",
+	"estimatedSize",
+	"scrollbar",
+	"itemSize",
+	"minItemSize",
+	"component",
+	"listAttrs",
+	"contentAttrs",
+	"listStyle",
+	"paddingPosition"
+];
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
+var getRecordKey = (record, rowKey) => isFunction(rowKey) ? rowKey(record) : record[rowKey];
 var DEFAULT_BORDERED = {
 	wrapper: true,
 	cell: false,
@@ -75,10 +90,6 @@ var table_default = /* @__PURE__ */ defineComponent({
 				return (_inject$size = (_inject = inject(configProviderInjectionKey, void 0)) === null || _inject === void 0 ? void 0 : _inject.size) !== null && _inject$size !== void 0 ? _inject$size : "large";
 			}
 		},
-		tableLayoutFixed: {
-			type: Boolean,
-			default: false
-		},
 		loading: {
 			type: [Boolean, Object],
 			default: false
@@ -99,7 +110,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 			default: 16
 		},
 		rowKey: {
-			type: String,
+			type: [String, Function],
 			default: "key"
 		},
 		showHeader: {
@@ -153,6 +164,10 @@ var table_default = /* @__PURE__ */ defineComponent({
 			type: [Object, Boolean],
 			default: true
 		},
+		debug: {
+			type: Boolean,
+			default: false
+		},
 		showEmptyTree: {
 			type: Boolean,
 			default: false
@@ -196,6 +211,12 @@ 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 { displayScrollbar, scrollbarProps } = useScrollbar(scrollbar);
+		const containerClientWidth = ref(0);
+		const containerScrollWidth = ref(0);
+		const autoScrollX = ref(false);
+		const debugLog = (_phase, _payload) => {
+			if (!props.debug) return;
+		};
 		const isScroll = computed(() => {
 			var _props$scroll, _props$scroll2, _props$scroll3, _props$scroll4;
 			return {
@@ -203,20 +224,53 @@ 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 { componentRef: theadComRef, elementRef: theadRef } = useComponentRef("containerRef");
-		const containerElement = computed(() => {
+		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;
 			if (splitTable.value) {
-				if (isVirtualList.value) return virtualRef.value;
-				return tbodyRef.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;
 			}
-			return contentRef.value;
-		});
-		const splitTable = computed(() => isScroll.value.y || props.stickyHeader || isVirtualList.value || isScroll.value.x && flattenData.value.length === 0);
+			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
+			};
+		};
 		const slotColumnMap = reactive(/* @__PURE__ */ new Map());
 		const slotColumns = ref();
 		watch([components, slotColumnMap], ([components, slotColumnMap]) => {
@@ -232,14 +286,17 @@ var table_default = /* @__PURE__ */ defineComponent({
 		const dataColumnMap = /* @__PURE__ */ new Map();
 		const dataColumns = ref([]);
 		const groupColumns = ref([]);
-		const { resizingColumn, columnWidth, handleThMouseDown } = useColumnResize(thRefs, emit);
+		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;
+		});
 		watch([
 			columns,
 			slotColumns,
 			columnWidth
 		], ([columns, slotColumns]) => {
-			var _ref;
-			const result = getGroupColumns((_ref = slotColumns !== null && slotColumns !== void 0 ? slotColumns : columns) !== null && _ref !== void 0 ? _ref : [], dataColumnMap, columnWidth);
+			var _ref4;
+			const result = getGroupColumns((_ref4 = slotColumns !== null && slotColumns !== void 0 ? slotColumns : columns) !== null && _ref4 !== void 0 ? _ref4 : [], dataColumnMap, columnWidth);
 			dataColumns.value = result.dataColumns;
 			groupColumns.value = result.groupColumns;
 		}, {
@@ -268,10 +325,6 @@ 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,
@@ -310,8 +363,9 @@ var table_default = /* @__PURE__ */ defineComponent({
 			disabledKeys.clear();
 			const travelData = (data) => {
 				if (isArray(data) && data.length > 0) for (const record of data) {
-					allRowKeys.push(record[rowKey.value]);
-					if (record.disabled) disabledKeys.add(record[rowKey.value]);
+					const recordKey = getRecordKey(record, rowKey.value);
+					allRowKeys.push(recordKey);
+					if (record.disabled) disabledKeys.add(recordKey);
 					if (record.children) travelData(record.children);
 				}
 			};
@@ -375,13 +429,13 @@ var table_default = /* @__PURE__ */ defineComponent({
 		};
 		const { dragType, dragState, handleDragStart, handleDragEnter, handleDragover, handleDragEnd, handleDrop } = useDrag(draggable);
 		const processedData = computed(() => {
-			var _props$data;
+			var _props$data2;
 			const travel = (data) => {
 				const result = [];
 				for (const _record of data) {
 					const record = {
 						raw: _record,
-						key: _record[props.rowKey],
+						key: getRecordKey(_record, props.rowKey),
 						disabled: _record.disabled,
 						expand: _record.expand,
 						isLeaf: _record.isLeaf
@@ -398,7 +452,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 				}
 				return result;
 			};
-			return travel((_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : []);
+			return travel((_props$data2 = props.data) !== null && _props$data2 !== void 0 ? _props$data2 : []);
 		});
 		const validData = computed(() => {
 			const travel = (data) => data.filter((record) => {
@@ -493,7 +547,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 			if (data && data.length > 0) return data.map((raw) => {
 				return {
 					raw,
-					key: raw[props.rowKey]
+					key: getRecordKey(raw, props.rowKey)
 				};
 			});
 			return [];
@@ -508,19 +562,16 @@ var table_default = /* @__PURE__ */ defineComponent({
 			}
 			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 setAlignPosition = (element = getScrollContainer()) => {
+			if (!element) {
+				alignLeft.value = true;
+				alignRight.value = true;
+				return;
 			}
-			if (_alignLeft !== alignLeft.value) alignLeft.value = _alignLeft;
-			if (_alignRight !== alignRight.value) alignRight.value = _alignRight;
+			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;
 		};
 		const getTableScrollCls = () => {
 			if (alignLeft.value && alignRight.value) return `${prefixCls}-scroll-position-both`;
@@ -534,13 +585,26 @@ var table_default = /* @__PURE__ */ defineComponent({
 			if (hasRightFixedColumn.value) cls.push(`${prefixCls}-has-fixed-col-right`);
 			return cls;
 		};
-		const handleScroll = (e) => {
-			if (e.target.scrollLeft !== containerScrollLeft.value) containerScrollLeft.value = e.target.scrollLeft;
-			setAlignPosition();
+		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 onTbodyScroll = (e) => {
-			handleScroll(e);
-			const { scrollLeft } = e.target;
+		const onTbodyScroll = (event) => {
+			handleScroll(event);
+			const element = event.target;
+			if (!element) return;
+			const scrollLeft = element.scrollLeft;
 			if (theadRef.value) theadRef.value.scrollLeft = scrollLeft;
 			if (summaryRef.value) summaryRef.value.scrollLeft = scrollLeft;
 		};
@@ -613,22 +677,7 @@ var table_default = /* @__PURE__ */ defineComponent({
 				selection
 			}) : operations;
 		});
-		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 style;
-			}
-		});
-		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 style;
-			}
-		});
+		const hasResizedColumns = computed(() => Object.keys(columnWidth).length > 0);
 		const addColumn = (id, column) => {
 			slotColumnMap.set(id, column);
 		};
@@ -667,8 +716,7 @@ 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}-layout-fixed`]: props.tableLayoutFixed || isScroll.value.x || splitTable.value || hasEllipsis.value
+				[`${prefixCls}-empty`]: props.data && flattenData.value.length === 0
 			}
 		]);
 		const paginationCls = computed(() => [`${prefixCls}-pagination`, {
@@ -679,39 +727,244 @@ var table_default = /* @__PURE__ */ defineComponent({
 		}]);
 		const tableCls = computed(() => {
 			const cls = getTableFixedCls();
-			if (isScroll.value.x) cls.push(getTableScrollCls());
+			if (resolvedScroll.value.x) cls.push(getTableScrollCls());
 			if (splitTable.value) cls.push(`${prefixCls}-scroll-y`);
 			return cls;
 		});
-		const isVirtualList = computed(() => Boolean(props.virtualListProps));
+		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 });
+		});
 		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 tbodyRef.value.offsetWidth > tbodyRef.value.clientWidth;
+			if (tbodyRef.value) return tbodyBorderWidth.value > tbodyContentWidth.value + 1;
 			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 _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)];
+				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)];
 			} })] });
 		};
+		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;
@@ -729,10 +982,6 @@ 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, {
 				"key": `table-summary-${rowIndex}`,
@@ -745,7 +994,6 @@ var table_default = /* @__PURE__ */ defineComponent({
 					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,
@@ -758,10 +1006,8 @@ 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;
-					const style = getVirtualColumnStyle(column.dataIndex);
 					return createVNode(table_td_default, {
 						"key": `td-${cellId}`,
-						"style": style,
 						"rowIndex": rowIndex,
 						"record": record,
 						"column": column,
@@ -784,11 +1030,11 @@ var table_default = /* @__PURE__ */ defineComponent({
 			});
 		};
 		const renderSummary = () => {
-			if (summaryData.value && summaryData.value.length > 0) return createVNode("tfoot", null, [summaryData.value.map((data, index) => renderSummaryRow(data, index))]);
+			if (summaryData.value && summaryData.value.length > 0) return createVNode("div", { "class": `${prefixCls}-tfoot-content` }, [summaryData.value.map((data, index) => renderSummaryRow(data, index))]);
 			return null;
 		};
 		const renderExpandBtn = (record, stopPropagation = true) => {
-			var _ref3, _slots$expandIcon, _slots$expandIcon2, _props$expandable3, _props$expandable3$ic;
+			var _ref11, _slots$expandIcon, _slots$expandIcon2, _props$expandable3, _props$expandable3$ic;
 			const currentKey = record.key;
 			const expanded = expandedRowKeys.value.includes(currentKey);
 			return createVNode("button", {
@@ -798,10 +1044,10 @@ var table_default = /* @__PURE__ */ defineComponent({
 					handleExpand(currentKey, record.raw);
 					if (stopPropagation) ev.stopPropagation();
 				}
-			}, [(_ref3 = (_slots$expandIcon = (_slots$expandIcon2 = slots["expand-icon"]) === null || _slots$expandIcon2 === void 0 ? void 0 : _slots$expandIcon2.call(slots, {
+			}, [(_ref11 = (_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 && _ref3 !== void 0 ? _ref3 : 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 && _ref11 !== void 0 ? _ref11 : expanded ? createVNode(IconMinus, null, null) : createVNode(IconPlus, null, null)]);
 		};
 		const renderExpand = (record, { indentSize, indexPath, allowDrag, expandContent }) => {
 			if (record.hasSubtree) {
@@ -813,17 +1059,14 @@ var table_default = /* @__PURE__ */ defineComponent({
 					allowDrag
 				}));
 			}
-			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] })] });
-			}
+			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] })] });
 			return null;
 		};
 		const renderRecord = (record, rowIndex, { indentSize = 0, indexPath, allowDrag = true } = {}) => {
@@ -833,6 +1076,7 @@ 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) => {
@@ -863,7 +1107,8 @@ var table_default = /* @__PURE__ */ defineComponent({
 				"key": currentKey,
 				"class": [{
 					[`${prefixCls}-tr-draggable`]: dragType.value === "row",
-					[`${prefixCls}-tr-drag`]: isDragTarget
+					[`${prefixCls}-tr-drag`]: isDragTarget,
+					[`${prefixCls}-tr-drop-target`]: isDropTarget
 				}, isFunction(props.rowClass) ? props.rowClass(record.raw, rowIndex) : props.rowClass],
 				"rowIndex": rowIndex,
 				"record": record,
@@ -877,10 +1122,8 @@ var table_default = /* @__PURE__ */ defineComponent({
 					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,
@@ -899,10 +1142,8 @@ 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,
@@ -934,6 +1175,10 @@ 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;
@@ -965,117 +1210,81 @@ var table_default = /* @__PURE__ */ defineComponent({
 		});
 		const renderContent = () => {
 			if (splitTable.value) {
-				var _scrollbarProps$value, _scrollbarProps$value2;
+				var _props$scroll15, _props$scroll16;
 				const top = isNumber(props.stickyHeader) ? `${props.stickyHeader}px` : void 0;
-				const mergeOuterClass = [(_scrollbarProps$value = scrollbarProps.value) === null || _scrollbarProps$value === void 0 ? void 0 : _scrollbarProps$value.outerClass];
-				if (props.stickyHeader) mergeOuterClass.push(`${prefixCls}-header-sticky`);
-				const mergeOuterStyle = _objectSpread2({ top }, (_scrollbarProps$value2 = scrollbarProps.value) === null || _scrollbarProps$value2 === void 0 ? void 0 : _scrollbarProps$value2.outerStyle);
-				const Component = displayScrollbar.value ? Scrollbar : "div";
+				const BodyComponent = displayScrollbar.value ? Scrollbar : "div";
+				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(BodyComponent, 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%" }
+				}, scrollbar.value ? _objectSpread2({ outerStyle: {
+					display: "flex",
+					minHeight: "0"
+				} }, scrollbarProps.value) : void 0, { "onScroll": onTbodyScroll }), { default: () => [createVNode("div", {
+					"class": `${prefixCls}-element`,
+					"style": elementStyle.value
+				}, [renderBody()])] });
 				return createVNode(Fragment, null, [
-					props.showHeader && createVNode(Component, mergeProps({
-						"ref": theadComRef,
-						"class": [`${prefixCls}-header`, { [`${prefixCls}-header-sticky`]: props.stickyHeader && !displayScrollbar.value }],
+					props.showHeader && createVNode("div", {
+						"ref": theadRef,
+						"class": [`${prefixCls}-header`, { [`${prefixCls}-header-sticky`]: props.stickyHeader }],
 						"style": {
-							overflowY: hasScrollBar.value ? "scroll" : void 0,
-							top: !displayScrollbar.value ? top : void 0
+							overflowX: "hidden",
+							overflowY: hasScrollBar.value && !displayScrollbar.value ? "scroll" : "hidden",
+							top
 						}
-					}, scrollbar.value ? _objectSpread2(_objectSpread2({
-						hide: flattenData.value.length !== 0,
-						disableVertical: true
-					}, scrollbarProps.value), {}, {
-						outerClass: mergeOuterClass,
-						outerStyle: mergeOuterStyle
-					}) : void 0), { default: () => [createVNode("table", {
+					}, [createVNode("div", {
 						"class": `${prefixCls}-element`,
-						"style": headerStyle.value,
-						"cellpadding": 0,
-						"cellspacing": 0
-					}, [createVNode(table_col_group_default, {
-						"dataColumns": dataColumns.value,
-						"operations": operations.value,
-						"columnWidth": columnWidth
-					}, null), renderHeader()])] }),
-					createVNode(resize_observer_default, { "onResize": handleTbodyResize }, { default: () => {
-						var _props$scroll13, _props$scroll14;
-						return [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: "table",
-								content: "tbody"
-							},
-							"listAttrs": {
-								class: `${prefixCls}-element`,
-								style: contentStyle.value
-							},
-							"paddingPosition": "list",
-							"height": "auto"
-						}, props.virtualListProps, { "onScroll": onTbodyScroll }), { item: ({ item, index }) => renderRecord(item, index) }) : createVNode(Component, mergeProps({
-							"ref": tbodyComRef,
-							"class": `${prefixCls}-body`,
-							"style": { maxHeight: 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%" }
-						}, scrollbar.value ? _objectSpread2({ outerStyle: {
-							display: "flex",
-							minHeight: "0"
-						} }, scrollbarProps.value) : void 0, { "onScroll": onTbodyScroll }), { default: () => [createVNode("table", {
-							"class": `${prefixCls}-element`,
-							"style": contentStyle.value,
-							"cellpadding": 0,
-							"cellspacing": 0
-						}, [flattenData.value.length !== 0 && createVNode(table_col_group_default, {
-							"dataColumns": dataColumns.value,
-							"operations": operations.value,
-							"columnWidth": columnWidth
-						}, null), renderBody()])] })];
-					} }),
+						"style": elementStyle.value
+					}, [renderHeader()])]),
+					bodyContent,
 					summaryData.value && summaryData.value.length > 0 && createVNode("div", {
 						"ref": summaryRef,
 						"class": `${prefixCls}-tfoot`,
 						"style": { overflowY: hasScrollBar.value ? "scroll" : "hidden" }
-					}, [createVNode("table", {
+					}, [createVNode("div", {
 						"class": `${prefixCls}-element`,
-						"style": contentStyle.value,
-						"cellpadding": 0,
-						"cellspacing": 0
-					}, [createVNode(table_col_group_default, {
-						"dataColumns": dataColumns.value,
-						"operations": operations.value,
-						"columnWidth": columnWidth
-					}, null), renderSummary()])])
+						"style": elementStyle.value
+					}, [renderSummary()])]),
+					renderAppend()
 				]);
 			}
-			return createVNode(resize_observer_default, { "onResize": () => setAlignPosition() }, { default: () => [createVNode("table", {
+			return createVNode(Fragment, null, [createVNode("div", {
 				"class": `${prefixCls}-element`,
-				"cellpadding": 0,
-				"cellspacing": 0,
-				"style": contentStyle.value
+				"style": elementStyle.value
 			}, [
-				createVNode(table_col_group_default, {
-					"dataColumns": dataColumns.value,
-					"operations": operations.value,
-					"columnWidth": columnWidth
-				}, null),
 				props.showHeader && renderHeader(),
 				renderBody(),
 				summaryData.value && summaryData.value.length > 0 && renderSummary()
-			])] });
+			]), renderAppend()]);
 		};
 		const renderTable = (content) => {
-			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 ? Scrollbar : "div";
-			return createVNode(Fragment, null, [createVNode("div", { "class": [`${prefixCls}-container`, tableCls.value] }, [createVNode(Component, mergeProps({
+			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;
+			const ContentComponent = !splitTable.value && displayScrollbar.value ? Scrollbar : "div";
+			return createVNode(Fragment, null, [createVNode("div", { "class": [`${prefixCls}-container`, tableCls.value] }, [createVNode(ContentComponent, mergeProps({
 				"ref": contentComRef,
 				"class": [`${prefixCls}-content`, { [`${prefixCls}-content-scroll-x`]: !splitTable.value }],
 				"style": style
-			}, scrollbar.value ? _objectSpread2({ outerStyle: { height: "100%" } }, scrollbarProps.value) : void 0, { "onScroll": handleScroll }), { default: () => [content ? createVNode("table", {
+			}, !splitTable.value && scrollbar.value ? _objectSpread2({ outerStyle: { height: "100%" } }, scrollbarProps.value) : void 0, { "onScroll": handleScroll }), { default: () => [content ? createVNode("div", {
 				"class": `${prefixCls}-element`,
-				"cellpadding": 0,
-				"cellspacing": 0
+				"style": elementStyle.value
 			}, [content()]) : renderContent()] })]), slots.footer && createVNode("div", { "class": `${prefixCls}-footer` }, [slots.footer()])]);
 		};
 		const renderPagination = () => {
@@ -1105,10 +1314,10 @@ var table_default = /* @__PURE__ */ defineComponent({
 			]);
 		};
 		const style = computed(() => {
-			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 };
+			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 };
 			}
 		});
 		const render = () => {