stk-table-vue 1.0.0-beta.2 → 1.0.0-beta.4

package/lib/{Dropdown-BIGxWVTR.js → Dropdown-CtiuG-7-.js}

@@ -1,19 +1,19 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0-beta.2
+ * version: v1.0.0-beta.4
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { t as StkTable_default } from "./StkTable-BugG7a1E.js";
+import { t as StkTable_default } from "./StkTable-Bz-71TiQ.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, h, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, ref, withModifiers } from "vue";
-//#region src/StkTable/custom-cells/Filter/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
+//#region src/StkTable/custom-cells/FilterCell/Dropdown/index.vue?vue&type=script&setup=true&lang.ts
 var DROPDOWN_DEFAULT_WIDTH = 300;
 var DROPDOWN_DEFAULT_HEIGHT = 400;
 var PADDING = 6;
 //#endregion
-//#region src/StkTable/custom-cells/Filter/Dropdown/index.vue
+//#region src/StkTable/custom-cells/FilterCell/Dropdown/index.vue
 var Dropdown_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	setup(__props, { expose: __expose }) {
@@ -30,8 +30,7 @@ var Dropdown_default = /* @__PURE__ */ defineComponent({
 			})
 		}, {
 			title: "",
-			dataIndex: "label",
-			customCell: ({ row }) => h("span", [row.label])
+			dataIndex: "label"
 		}]);
 		const visible = ref(false);
 		const position = ref({

package/lib/{StkTable-BugG7a1E.js → StkTable-Bz-71TiQ.js}

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0-beta.2
+ * version: v1.0.0-beta.4
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -352,6 +352,7 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 	const CELL_RANGE_BOTTOM = "cell-range-b";
 	const CELL_RANGE_LEFT = "cell-range-l";
 	const CELL_RANGE_RIGHT = "cell-range-r";
+	const ROW_RANGE_SELECTED = "row-range-selected";
 	const selectionRanges = ref([]);
 	const isSelecting = ref(false);
 	/** start cell */
@@ -441,10 +442,15 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 			return [leftWidths[colIndex] ?? 0, rightWidths[colIndex + 1] ?? 0];
 		};
 	});
-	/** 根据 selectionRanges 计算所有选区内 cellKey 的并集 */
-	const selectedCellKeys = computed(() => {
+	/** 根据 selectionRanges 计算所有选区内 cellKey 的并集（非响应式，用于 DOM 操作） */
+	let selectedCellKeys = /* @__PURE__ */ new Set();
+	/** 重新计算 selectedCellKeys */
+	function recomputeSelectedCellKeys() {
 		const ranges = selectionRanges.value;
-		if (!ranges.length) return /* @__PURE__ */ new Set();
+		if (!ranges.length) {
+			selectedCellKeys = /* @__PURE__ */ new Set();
+			return;
+		}
 		const keys = /* @__PURE__ */ new Set();
 		const cols = tableHeaderLast.value;
 		const data = dataSourceCopy.value;
@@ -461,8 +467,92 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 				}
 			}
 		}
-		return keys;
-	});
+		selectedCellKeys = keys;
+	}
+	/**
+	* 直接操作 DOM 更新选区样式（不触发 Vue re-render）
+	* 用于替代在渲染函数中读取响应式选区数据，避免拖选时频繁触发整个表格重渲染
+	*/
+	function updateSelectionDOM() {
+		const container = tableContainerRef.value;
+		if (!container) return;
+		const cellHighlight = highlightCellEnabled.value;
+		const rowHighlight = highlightRowEnabled.value;
+		const oldSelectedCells = container.querySelectorAll(`.${CELL_RANGE_SELECTED}`);
+		for (let i = 0; i < oldSelectedCells.length; i++) oldSelectedCells[i].classList.remove(CELL_RANGE_SELECTED, CELL_RANGE_TOP, CELL_RANGE_BOTTOM, CELL_RANGE_LEFT, CELL_RANGE_RIGHT);
+		const oldSelectedRows = container.querySelectorAll(`.${ROW_RANGE_SELECTED}`);
+		for (let i = 0; i < oldSelectedRows.length; i++) oldSelectedRows[i].classList.remove(ROW_RANGE_SELECTED);
+		recomputeSelectedCellKeys();
+		const ranges = selectionRanges.value;
+		if (!ranges.length) return;
+		const tbody = container.querySelector(".stk-tbody-main");
+		if (!tbody) return;
+		if (rowHighlight) for (const range of ranges) {
+			const { minRow, maxRow } = normalizeRange(range);
+			for (let r = minRow; r <= maxRow; r++) {
+				const tr = tbody.querySelector(`tr[data-row-i="${r}"]`);
+				if (tr) tr.classList.add(ROW_RANGE_SELECTED);
+			}
+		}
+		if (cellHighlight) {
+			const lastRange = ranges[ranges.length - 1];
+			const { minRow: lrMinRow, maxRow: lrMaxRow, minCol: lrMinCol, maxCol: lrMaxCol } = normalizeRange(lastRange);
+			const trs = tbody.querySelectorAll("tr[data-row-i]");
+			for (let t = 0; t < trs.length; t++) {
+				const tr = trs[t];
+				const rowIndex = parseInt(tr.getAttribute("data-row-i"), 10);
+				let inAnyRange = false;
+				for (const range of ranges) {
+					const { minRow, maxRow } = normalizeRange(range);
+					if (rowIndex >= minRow && rowIndex <= maxRow) {
+						inAnyRange = true;
+						break;
+					}
+				}
+				if (!inAnyRange) continue;
+				const tds = tr.querySelectorAll("td[data-col-key]");
+				for (let d = 0; d < tds.length; d++) {
+					const td = tds[d];
+					const colKey = td.getAttribute("data-col-key");
+					const colIndex = colKeyToIndexMap.value.get(colKey);
+					if (colIndex === void 0 || colIndex < 0) continue;
+					const row = dataSourceCopy.value[rowIndex];
+					const cols = tableHeaderLast.value;
+					if (!row || !cols[colIndex]) continue;
+					const ck = cellKeyGen(row, cols[colIndex]);
+					if (!selectedCellKeys.has(ck)) continue;
+					td.classList.add(CELL_RANGE_SELECTED);
+					if (rowIndex >= lrMinRow && rowIndex <= lrMaxRow && colIndex >= lrMinCol && colIndex <= lrMaxCol) {
+						if (rowIndex === lrMinRow) td.classList.add(CELL_RANGE_TOP);
+						if (rowIndex === lrMaxRow) td.classList.add(CELL_RANGE_BOTTOM);
+						if (colIndex === lrMinCol) td.classList.add(CELL_RANGE_LEFT);
+						if (colIndex === lrMaxCol) td.classList.add(CELL_RANGE_RIGHT);
+					}
+				}
+			}
+		}
+	}
+	/**
+	* 监听 selectionRanges 变化，在 DOM 更新后直接操作选区 class
+	* 同时在虚拟滚动等导致 DOM 重建时也能重新应用选区样式
+	*/
+	watch(() => {
+		const ranges = selectionRanges.value;
+		const vs = virtualScroll.value;
+		const vsx = virtualScrollX.value;
+		return [
+			ranges.length,
+			ranges.length > 0 ? JSON.stringify(ranges.map((r) => r.index)) : "",
+			vs.startIndex,
+			vs.endIndex,
+			vsx.startIndex,
+			vsx.endIndex,
+			dataSourceCopy.value.length,
+			tableHeaderLast.value.length
+		];
+	}, () => {
+		nextTick(updateSelectionDOM);
+	}, { flush: "post" });
 	onMounted(() => {
 		addListener();
 	});
@@ -907,40 +997,11 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 	* @param colKey 列唯一键
 	* @returns 样式类名数组
 	*/
-	function getAreaSelectionClasses(cellKey, absoluteRowIndex, colKey) {
-		if (!highlightCellEnabled.value) return [];
-		if (!selectedCellKeys.value.has(cellKey)) return [];
-		const colIndex = colKeyToIndexMap.value.get(colKey);
-		if (colIndex === void 0 || colIndex < 0) return [];
-		const classes = [CELL_RANGE_SELECTED];
-		const ranges = selectionRanges.value;
-		if (!ranges.length) return classes;
-		const lastRange = ranges[ranges.length - 1];
-		const { minRow, maxRow, minCol, maxCol } = normalizeRange(lastRange);
-		if (absoluteRowIndex >= minRow && absoluteRowIndex <= maxRow && colIndex >= minCol && colIndex <= maxCol) {
-			if (absoluteRowIndex === minRow) classes.push(CELL_RANGE_TOP);
-			if (absoluteRowIndex === maxRow) classes.push(CELL_RANGE_BOTTOM);
-			if (colIndex === minCol) classes.push(CELL_RANGE_LEFT);
-			if (colIndex === maxCol) classes.push(CELL_RANGE_RIGHT);
-		}
-		return classes;
-	}
 	/**
 	* 判断一行的选区样式类名（行高亮）
 	* @param absoluteRowIndex 行在 dataSourceCopy 中的绝对索引
 	* @returns 样式类名数组
 	*/
-	function getAreaSelectionRowClasses(absoluteRowIndex) {
-		if (!highlightRowEnabled.value) return [];
-		const ranges = selectionRanges.value;
-		if (!ranges.length) return [];
-		for (const range of ranges) {
-			const { begin: { row: r1 }, end: { row: r2 } } = range.index;
-			const [minRow, maxRow] = r1 < r2 ? [r1, r2] : [r2, r1];
-			if (absoluteRowIndex >= minRow && absoluteRowIndex <= maxRow) return ["row-range-selected"];
-		}
-		return [];
-	}
 	/** 获取选中的单元格信息 */
 	function getSelectedArea() {
 		const ranges = selectionRanges.value;
@@ -1018,8 +1079,6 @@ function useAreaSelection(props, emits, tableContainerRef, dataSourceCopy, table
 	return {
 		config,
 		isSelecting,
-		getClass: getAreaSelectionClasses,
-		getRowClass: getAreaSelectionRowClasses,
 		get: getSelectedArea,
 		set: setAreaSelection,
 		clear: clearSelectedArea,
@@ -1037,8 +1096,6 @@ var ON_DEMAND_FEATURE = { [useAreaSelectionName]: ((props) => {
 		config: computed(() => ({ enabled: false })),
 		isSelecting: ref(false),
 		onMD: () => {},
-		getClass: () => [],
-		getRowClass: () => [],
 		get: () => ({
 			rows: [],
 			cols: [],
@@ -2528,7 +2585,7 @@ function useTableColumns(virtualX, isRelativeMode) {
 				const col = arr[i];
 				if (col.hidden) continue;
 				col.__P__ = parent;
-				col.__LEAF_START__ = leafIndex;
+				col.__LF_S__ = leafIndex;
 				/** 一列中的子节点数量 */
 				let colChildrenLen = 1;
 				/** 多级表头的父节点宽度，通过叶子节点宽度计算得到 */
@@ -2543,7 +2600,7 @@ function useTableColumns(virtualX, isRelativeMode) {
 					leafIndex++;
 					for (let j = depth; j <= maxDeep; j++) tableHeadersForCalcTemp[j].push(col);
 				}
-				col.__LEAF_END__ = leafIndex;
+				col.__LF_E__ = leafIndex;
 				col.__W__ = colWidth;
 				tableHeadersTemp[depth].push(col);
 				const rowSpan = col.children ? 1 : maxDeep - depth + 1;
@@ -2985,11 +3042,11 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
 			const groupRight = cumLeft + groupWidth;
 			if (!foundStart && groupRight > scrollLeft) {
 				foundStart = true;
-				theadStartIndex = col.__LEAF_START__ ?? 0;
+				theadStartIndex = col.__LF_S__ ?? 0;
 				theadOffsetLeft = cumLeft;
 			}
 			cumLeft = groupRight;
-			theadEndIndex = col.__LEAF_END__ ?? totalLeafCount;
+			theadEndIndex = col.__LF_E__ ?? totalLeafCount;
 			if (foundStart && groupRight >= scrollLeft + containerWidth) break;
 		}
 		if (!foundStart) {
@@ -3023,19 +3080,11 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
 				result.push(...leftFixedCols);
 				const theadStart = theadVirtualX.value.startIndex;
 				const leftSpacerColspan = Math.max(0, startIndex - theadStart);
-				if (leftSpacerColspan) result.push({
-					type: "spacer",
-					__COLSPAN__: leftSpacerColspan
-				});
+				if (leftSpacerColspan) result.push({ __VT_C_SP__: leftSpacerColspan });
 				result.push(...visibleCols);
-				if (rightFixedCols.length) {
-					const rightSpacerColspan = Math.max(0, theadVirtualX.value.endIndex - endIndex);
-					result.push({
-						type: "spacer",
-						__COLSPAN__: rightSpacerColspan
-					});
-					result.push(...rightFixedCols);
-				}
+				const rightSpacerColspan = Math.max(0, theadVirtualX.value.endIndex - endIndex);
+				if (rightSpacerColspan) result.push({ __VT_C_SP__: rightSpacerColspan });
+				result.push(...rightFixedCols);
 				return result;
 			}
 			const leftCols = [];
@@ -3065,8 +3114,8 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
 			return tableHeaders.value.map((row) => {
 				return row.filter((col) => {
 					if (col.fixed === "left" || col.fixed === "right") return true;
-					const leafStart = col.__LEAF_START__ ?? 0;
-					return (col.__LEAF_END__ ?? leafStart + 1) > startIndex && leafStart < endIndex;
+					const leafStart = col.__LF_S__ ?? 0;
+					return (col.__LF_E__ ?? leafStart + 1) > startIndex && leafStart < endIndex;
 				});
 			});
 		}
@@ -3076,8 +3125,8 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
 	/** 展开行 colspan：虚拟滚动时等于所有 td 元素数量（含 spacer）之和 */
 	const expandRowColspan = computed(() => {
 		if (!virtualX_on.value) return tableHeaderLast.value.length;
-		const spacers = virtualX_columnPart.value.filter((c) => c.type === "spacer");
-		return 2 + virtualX_columnPart.value.length + spacers.reduce((sum, s) => sum + Math.max(0, (s.__COLSPAN__ ?? 0) - 1), 0);
+		const spacers = virtualX_columnPart.value.filter((c) => c.__VT_C_SP__);
+		return 2 + virtualX_columnPart.value.length + spacers.reduce((sum, s) => sum + Math.max(0, (s.__VT_C_SP__ ?? 0) - 1), 0);
 	});
 	const virtualX_offsetRight = computed(() => {
 		if (!virtualX_on.value) return 0;
@@ -3314,7 +3363,6 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
 			offsetLeft = idx > 0 ? nonFixedCols[idx - 1].cumWidth : 0;
 			leftFirstColRestWidth = nonFixedCols[idx].cumWidth - sLeft;
 		} else if (nonFixedCols.length > 0) startIndex = nonFixedCols[0].index;
-		let endColWidthSum = leftFirstColRestWidth;
 		let actualLeftColWidthSum = 0;
 		for (const leftCol of leftFixedCols) {
 			if (leftCol.index >= startIndex) break;
@@ -3322,7 +3370,12 @@ function useVirtualScroll(props, tableContainerRef, trRef, dataSourceCopy, table
 		}
 		const containerW = containerWidth - actualLeftColWidthSum;
 		let endIndex = headerLength;
-		for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
+		let endColWidthSum = leftFirstColRestWidth;
+		/**
+		* 这里根据 leftFirstColRestWidth 如果为0 说明开始位置恰好在单元格边界，则计算endIndex 需要从当前单元格开始。
+		* 如果有值，则说明开始位置的单元格已经切了一半，需要从下一个单元格开始计算 因此startIndex + 1。
+		*/
+		for (let colIndex = leftFirstColRestWidth ? startIndex + 1 : startIndex; colIndex < headerLength; colIndex++) {
 			const col = tableHeaderLastValue[colIndex];
 			endColWidthSum += getCalculatedColWidth(col);
 			if (endColWidthSum >= containerW) {
@@ -3745,7 +3798,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 			const targetKey = colKeyGen.value(column);
 			return tableHeaderLast.value.findIndex((item) => colKeyGen.value(item) === targetKey);
 		}
-		const { config: areaSelectionConfig, isSelecting: isAreaSelecting, onMD: onSelectionMouseDown, getClass: getAreaSelectionClasses, getRowClass: getAreaSelectionRowClass, get: getSelectedArea, set: setAreaSelection, clear: clearSelectedArea, copy: copySelectedArea } = ON_DEMAND_FEATURE[useAreaSelectionName](props, emits, tableContainerRef, dataSourceCopy, tableHeaderLast, colKeyGen, cellKeyGen, scrollTo, virtualScroll, virtualScrollX, getRowIndex, getColumnIndex);
+		const { config: areaSelectionConfig, isSelecting: isAreaSelecting, onMD: onSelectionMouseDown, get: getSelectedArea, set: setAreaSelection, clear: clearSelectedArea, copy: copySelectedArea } = ON_DEMAND_FEATURE[useAreaSelectionName](props, emits, tableContainerRef, dataSourceCopy, tableHeaderLast, colKeyGen, cellKeyGen, scrollTo, virtualScroll, virtualScrollX, getRowIndex, getColumnIndex);
 		/** 键盘箭头滚动 */
 		useKeyboardArrowScroll(tableContainerRef, props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on, areaSelectionConfig);
 		/** 固定列处理 */
@@ -3917,7 +3970,6 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 				(row === null || row === void 0 ? void 0 : row.__EXP__) ? "expanded" : "",
 				(row === null || row === void 0 ? void 0 : row.__EXP_R__) ? "expanded-row" : ""
 			];
-			if (areaSelectionConfig.value.enabled) classList.push(...getAreaSelectionRowClass(rowIndex));
 			if (currentRowKey.value === rowKey || row === currentRow.value) classList.push("active");
 			if (props.showTrHoverClass && (rowKey === currentHoverRowKey.value || row === currentHoverRow)) classList.push("hover");
 			const result = {
@@ -3978,10 +4030,6 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 				if (activeMergedCells.value.has(cellKey)) classList.push("cell-active");
 			}
 			if (props.cellActive && currentSelectedCellKey.value === cellKey) classList.push("active");
-			if (areaSelectionConfig.value.enabled) {
-				const absRowIndex = getAbsoluteRowIndex(rowIndex);
-				classList.push(...getAreaSelectionClasses(cellKey, absRowIndex, colKey));
-			}
 			if (col.type === "seq") classList.push("seq-column");
 			else if (col.type === "expand" && (row.__EXP__ ? colKeyGen.value(row.__EXP__) === colKey : false)) classList.push("expanded");
 			else if (row.__T_EXP__ && col.type === "tree-node") classList.push("tree-expanded");
@@ -3990,7 +4038,7 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 				"data-col-key": colKey,
 				style: cellStyleMap.value[TagType.TD].get(colKey),
 				class: classList,
-				...mergeCellsWrapper(row, col, rowIndex, col.__LEAF_START__ ?? 0)
+				...mergeCellsWrapper(row, col, rowIndex, col.__LF_S__ ?? 0)
 			};
 		}
 		function onRowClick(e) {
@@ -4584,11 +4632,11 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 									style: normalizeStyle(`min-width:${unref(theadVirtualX).offsetLeft}px;width:${unref(theadVirtualX).offsetLeft}px`)
 								}, null, 4)) : createCommentVNode("", true),
 								(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
-									return openBlock(), createElementBlock(Fragment, { key: col.type === "spacer" ? "spacer" : colKeyGen.value(col) }, [col.type === "spacer" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [col.__COLSPAN__ ? (openBlock(), createElementBlock("td", {
+									return openBlock(), createElementBlock(Fragment, { key: col.__VT_C_SP__ ? "spacer" : colKeyGen.value(col) }, [col.__VT_C_SP__ ? (openBlock(), createElementBlock("td", {
 										key: 0,
 										class: "vt-x-spacer",
-										colspan: col.__COLSPAN__
-									}, null, 8, _hoisted_8)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("td", mergeProps({
+										colspan: col.__VT_C_SP__
+									}, null, 8, _hoisted_8)) : (openBlock(), createElementBlock("td", mergeProps({
 										key: 1,
 										ref_for: true
 									}, getTFProps(col)), [col.customFooterCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customFooterCell), {
@@ -4639,11 +4687,11 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 								style: normalizeStyle(`min-width:${unref(theadVirtualX).offsetLeft}px;width:${unref(theadVirtualX).offsetLeft}px`)
 							}, null, 4)) : createCommentVNode("", true),
 							(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
-								return openBlock(), createElementBlock(Fragment, { key: col.type === "spacer" ? "spacer" : colKeyGen.value(col) }, [col.type === "spacer" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [col.__COLSPAN__ ? (openBlock(), createElementBlock("td", {
+								return openBlock(), createElementBlock(Fragment, { key: col.__VT_C_SP__ ? "spacer" : colKeyGen.value(col) }, [col.__VT_C_SP__ ? (openBlock(), createElementBlock("td", {
 									key: 0,
 									class: "vt-x-spacer",
-									colspan: col.__COLSPAN__
-								}, null, 8, _hoisted_11)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("td", {
+									colspan: col.__VT_C_SP__
+								}, null, 8, _hoisted_11)) : (openBlock(), createElementBlock("td", {
 									key: 1,
 									style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
 								}, null, 4))], 64);
@@ -4669,21 +4717,21 @@ var StkTable_default = /* @__PURE__ */ defineComponent({
 							}, () => [createTextVNode(toDisplayString(row.__EXP_R__ && row.__EXP_C__ && row.__EXP_R__[row.__EXP_C__.dataIndex] || ""), 1)])])], 8, _hoisted_12)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 								unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_14)) : createCommentVNode("", true),
 								(openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
-									return openBlock(), createElementBlock(Fragment, { key: col.type === "spacer" ? "spacer" : colKeyGen.value(col) }, [col.type === "spacer" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [col.__COLSPAN__ ? (openBlock(), createElementBlock("td", {
+									return openBlock(), createElementBlock(Fragment, { key: col.__VT_C_SP__ ? "spacer" : colKeyGen.value(col) }, [col.__VT_C_SP__ ? (openBlock(), createElementBlock("td", {
 										key: 0,
 										class: "vt-x-spacer",
-										colspan: col.__COLSPAN__
-									}, null, 8, _hoisted_15)) : createCommentVNode("", true)], 64)) : !shouldHideCell(row, col) ? (openBlock(), createElementBlock("td", mergeProps({
+										colspan: col.__VT_C_SP__
+									}, null, 8, _hoisted_15)) : !shouldHideCell(row, col) ? (openBlock(), createElementBlock("td", mergeProps({
 										key: 1,
 										ref_for: true
-									}, getTDProps(row, col, rowIndex, col.__LEAF_START__ ?? 0)), [col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
+									}, getTDProps(row, col, rowIndex, col.__LF_S__ ?? 0)), [col.customCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customCell), {
 										key: 0,
 										class: "table-cell-wrapper",
 										tabindex: "-1",
 										col,
 										row,
 										rowIndex: getAbsoluteRowIndex(rowIndex),
-										colIndex: col.__LEAF_START__ ?? 0,
+										colIndex: col.__LF_S__ ?? 0,
 										cellValue: row && row[col.dataIndex],
 										expanded: row && row.__EXP__,
 										"tree-expanded": row && row.__T_EXP__

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -1,4 +1,4 @@
-import { FilterStatus } from './custom-cells/Filter/types';
+import { FilterStatus } from './custom-cells/FilterCell/types';
 import { AreaSelectionConfig, AreaSelectionRange, AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, ExperimentalConfig, FooterConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, PrivateStkTableColumn, RowActiveOption, SeqConfig, SortConfig, StkTableColumn, TreeConfig, UniqKey, UniqKeyProp } from './types/index';
 import { ScrollbarOptions } from './useScrollbar';
 

package/lib/src/StkTable/custom-cells/CheckboxCell/Checkbox.vue.d.ts

@@ -0,0 +1,29 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前是否选中 */
+    checked?: boolean;
+    /** 是否半选状态 */
+    indeterminate?: boolean;
+    /** 自定义 checkbox 组件（如 Element Plus / Ant Design Vue 的 Checkbox） */
+    customComponent?: any;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (checked: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前是否选中 */
+    checked?: boolean;
+    /** 是否半选状态 */
+    indeterminate?: boolean;
+    /** 自定义 checkbox 组件（如 Element Plus / Ant Design Vue 的 Checkbox） */
+    customComponent?: any;
+}>>> & Readonly<{
+    onChange?: ((checked: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/lib/src/StkTable/custom-cells/CheckboxCell/createCheckboxCell.d.ts

@@ -0,0 +1,82 @@
+/** createCheckboxCell 配置选项 */
+export interface createCheckboxCellOptions<T = any> {
+    /**
+     * 行数据中表示选中状态的字段名
+     * @default '_isChecked'
+     */
+    field?: string;
+    /**
+     * 自定义 checkbox 组件（如 Element Plus / Ant Design Vue 的 Checkbox）
+     * 不传则使用原生 input[type=checkbox]
+     */
+    checkboxComponent?: any;
+    /**
+     * 单元格 checkbox 状态变更回调
+     * @param checked 是否选中
+     * @param row 当前行数据
+     */
+    onChange?: (checked: boolean, row: T) => void;
+    /**
+     * 全选 checkbox 状态变更回调
+     * @param checked 是否全选
+     */
+    onSelectAll?: (checked: boolean) => void;
+}
+/**
+ * Checkbox 工厂函数
+ *
+ * 用于快速创建多选框单元格和表头单元格组件。
+ *
+ * @param options 配置选项
+ * @returns 包含 CheckboxCell 和 CheckboxAllCell 组件的对象
+ *
+ * @example
+ * ```ts
+ * const { CheckboxCell, CheckboxAllCell } = createCheckboxCell({
+ *   field: '_isChecked',
+ *   onChange: (checked, row) => { row._isChecked = checked },
+ * });
+ *
+ * const columns = [
+ *   {
+ *     dataIndex: 'checkbox',
+ *     width: 50,
+ *     customCell: CheckboxCell,
+ *     customHeaderCell: CheckboxAllCell,
+ *   },
+ *   // ...other columns
+ * ];
+ * ```
+ */
+export declare function createCheckboxCell<T extends Record<string, any> = any>(options?: createCheckboxCellOptions<T>): {
+    CheckboxCell: () => import('vue').Raw<import('vue').DefineComponent<{
+        row: any;
+        col: import('../..').StkTableColumn<any>;
+        cellValue: any;
+        rowIndex: number;
+        colIndex: number;
+        expanded?: import('../..').StkTableColumn<any> | undefined;
+        treeExpanded?: boolean | undefined;
+    }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+        row: any;
+        col: import('../..').StkTableColumn<any>;
+        cellValue: any;
+        rowIndex: number;
+        colIndex: number;
+        expanded?: import('../..').StkTableColumn<any> | undefined;
+        treeExpanded?: boolean | undefined;
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>>;
+    CheckboxAllCell: () => import('vue').Raw<import('vue').DefineComponent<{
+        col?: any;
+        rowIndex?: any;
+        colIndex?: any;
+    }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+        col?: any;
+        rowIndex?: any;
+        colIndex?: any;
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>>;
+};

package/lib/src/StkTable/custom-cells/CheckboxCell/index.d.ts

@@ -0,0 +1,2 @@
+export { createCheckboxCell } from './createCheckboxCell';
+export type { createCheckboxCellOptions } from './createCheckboxCell';

package/lib/src/StkTable/custom-cells/{Filter → FilterCell}/Dropdown/index.vue.d.ts

@@ -1,4 +1,4 @@
-import { FilterOption } from '../types';
+import { FilterOption } from '../types.js';
 
 declare function show(pos: {
     x: number;

package/lib/src/StkTable/custom-cells/{Filter → FilterCell}/Filter.vue.d.ts

@@ -7,13 +7,13 @@ declare function __VLS_template(): {
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CustomHeaderCellProps<any> & {
     theme?: "light" | "dark";
     active?: boolean;
-    options: FilterOption[];
+    getOptions: () => FilterOption[];
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     change: (value: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CustomHeaderCellProps<any> & {
     theme?: "light" | "dark";
     active?: boolean;
-    options: FilterOption[];
+    getOptions: () => FilterOption[];
 }>>> & Readonly<{
     onChange?: ((value: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/lib/src/StkTable/custom-cells/{Filter/createFilter.d.ts → FilterCell/createFilterCell.d.ts}

@@ -1,16 +1,16 @@
 import { CustomHeaderCellProps, UniqKey } from '../../types';
 import { VNode } from 'vue';
-import { CreateFilterOption, FilterComponentConfig, FilterStatus } from './types';
+import { CreateFilterCellOption, FilterComponentConfig, FilterStatus } from './types.js';
 
 /**
  * 表格筛选功能工厂函数 (BETA)
  *
- * Q: 为什么要通过 stkTableInstance 来设置筛选状态，而不是直接在 createFilter 中传入dataSource。
- * A: 因为 createFilter 不一定有 dataSource的上下文，它可能在独立的js/ts 中使用，而非Vue SFC。而通过 stkTableInstance 可以获取到 dataSource
+ * Q: 为什么要通过 stkTableInstance 来设置筛选状态，而不是直接在 createFilterCell 中传入dataSource。
+ * A: 因为 createFilterCell 不一定有 dataSource的上下文，它可能在独立的js/ts 中使用，而非Vue SFC。而通过 stkTableInstance 可以获取到 dataSource
  * @beta
  * @returns
  */
-export declare function createFilter(option?: CreateFilterOption): {
+export declare function createFilterCell(option?: CreateFilterCellOption): {
     Filter: (config?: FilterComponentConfig, component?: VNode | ((props: CustomHeaderCellProps<any>) => VNode)) => import('vue').Raw<import('vue').DefineComponent<{
         col: import('../../types').StkTableColumn<any>;
         rowIndex: number;

package/lib/src/StkTable/custom-cells/FilterCell/index.d.ts

@@ -0,0 +1,2 @@
+export { createFilterCell } from './createFilterCell';
+export type { FilterStatus, CreateFilterCellOption } from './types';

package/lib/src/StkTable/custom-cells/{Filter → FilterCell}/types.d.ts

@@ -34,7 +34,7 @@ export interface FilterComponentConfig {
     autoOptions?: boolean;
 }
 /** createFilter选项接口 */
-export interface CreateFilterOption {
+export interface CreateFilterCellOption {
     /** 是否远程筛选 */
     remote?: boolean;
     /** 筛选状态改变时触发 */

package/lib/src/StkTable/features/useAreaSelection.bak.d.ts

@@ -0,0 +1,25 @@
+import { Ref, ShallowRef } from 'vue';
+import { AreaSelectionConfig, AreaSelectionRange, CellKeyGen, ColKeyGen, StkTableColumn, UniqKey, AreaSelectionSetterRange, AreaSelectionSetterOption } from '../types';
+import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
+
+/**
+ * 单元格区域选择功能
+ * 支持鼠标拖拽选择、键盘导航、复制粘贴等功能
+ * en: Cell area selection feature with mouse drag, keyboard navigation, copy-paste, etc.
+ */
+export declare function useAreaSelection<DT extends Record<string, any>>(props: any, emits: any, tableContainerRef: Ref<HTMLDivElement | undefined>, dataSourceCopy: ShallowRef<DT[]>, tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>, colKeyGen: ColKeyGen, cellKeyGen: CellKeyGen, scrollTo: (top: number | null, left: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>, getRowIndex: (row: DT) => number, getColumnIndex: (col: StkTableColumn<DT>) => number): {
+    config: import('vue').ComputedRef<AreaSelectionConfig>;
+    isSelecting: Ref<boolean, boolean>;
+    getClass: (cellKey: string, absoluteRowIndex: number, colKey: UniqKey) => string[];
+    getRowClass: (absoluteRowIndex: number) => string[];
+    get: () => {
+        rows: DT[];
+        cols: StkTableColumn<DT>[];
+        ranges: AreaSelectionRange[];
+    };
+    set: (ranges?: AreaSelectionSetterRange<DT>, option?: AreaSelectionSetterOption) => AreaSelectionRange[];
+    clear: () => void;
+    copy: () => string;
+    onMD: (e: MouseEvent) => void;
+};
+export declare const useAreaSelectionName = "useAreaSelection";

package/lib/src/StkTable/features/useAreaSelection.d.ts

@@ -1,5 +1,5 @@
 import { Ref, ShallowRef } from 'vue';
-import { AreaSelectionConfig, AreaSelectionRange, CellKeyGen, ColKeyGen, StkTableColumn, UniqKey, AreaSelectionSetterRange, AreaSelectionSetterOption } from '../types';
+import { AreaSelectionConfig, AreaSelectionRange, CellKeyGen, ColKeyGen, StkTableColumn, AreaSelectionSetterRange, AreaSelectionSetterOption } from '../types';
 import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
 
 /**
@@ -10,8 +10,6 @@ import { VirtualScrollStore, VirtualScrollXStore } from '../useVirtualScroll';
 export declare function useAreaSelection<DT extends Record<string, any>>(props: any, emits: any, tableContainerRef: Ref<HTMLDivElement | undefined>, dataSourceCopy: ShallowRef<DT[]>, tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>, colKeyGen: ColKeyGen, cellKeyGen: CellKeyGen, scrollTo: (top: number | null, left: number | null) => void, virtualScroll: Ref<VirtualScrollStore>, virtualScrollX: Ref<VirtualScrollXStore>, getRowIndex: (row: DT) => number, getColumnIndex: (col: StkTableColumn<DT>) => number): {
     config: import('vue').ComputedRef<AreaSelectionConfig>;
     isSelecting: Ref<boolean, boolean>;
-    getClass: (cellKey: string, absoluteRowIndex: number, colKey: UniqKey) => string[];
-    getRowClass: (absoluteRowIndex: number) => string[];
     get: () => {
         rows: DT[];
         cols: StkTableColumn<DT>[];

package/lib/src/StkTable/index.d.ts

@@ -3,7 +3,9 @@ export { registerFeature } from './registerFeature';
 export { default as StkTable } from './StkTable.vue';
 export type { Order, SortConfig, SortOption, SortState, StkTableColumn } from './types/index';
 export { binarySearch, insertToOrderedArray, strCompare, tableSort } from './utils';
-export { createFilter } from './custom-cells/Filter/index';
-export type { CreateFilterOption, FilterStatus } from './custom-cells/Filter/index';
+export { createFilterCell } from './custom-cells/FilterCell/index';
+export type { CreateFilterCellOption, FilterStatus } from './custom-cells/FilterCell/index';
 export { createEditableCell } from './custom-cells/EditableCell/index';
 export type { CreateEditableCellOptions } from './custom-cells/EditableCell/index';
+export { createCheckboxCell } from './custom-cells/CheckboxCell/index';
+export type { createCheckboxCellOptions } from './custom-cells/CheckboxCell/index';