@ai-table/grid 0.1.41-0 → 0.1.42

package/fesm2022/ai-table-grid.mjs

@@ -49,11 +49,11 @@ import { ThyInputNumber } from 'ngx-tethys/input-number';
 import { isKeyHotkey } from 'is-hotkey';
 import { LRUCache } from 'lru-cache';
 import { fromUnixTime, subDays, differenceInDays, differenceInMonths } from 'date-fns';
-import { isArray, TinyDate, helpers } from 'ngx-tethys/util';
+import { isArray, TinyDate, helpers, hexToRgb } from 'ngx-tethys/util';
 import { DEFAULT_COLORS } from 'ngx-tethys/color-picker';
 import GraphemeSplitter from 'grapheme-splitter';
 import * as i1$2 from '@angular/common';
-import { CommonModule, NgClass, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { NgClass, CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import { ThyDropdownAbstractMenu, ThyDropdownMenuItemDirective, ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
 import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThySelect, ThySelectModule } from 'ngx-tethys/select';
@@ -546,6 +546,7 @@ var AITableGridI18nKey;
     AITableGridI18nKey["selectedRecordsCount"] = "selectedRecordsCount";
     AITableGridI18nKey["selectedCellsCount"] = "selectedCellsCount";
     AITableGridI18nKey["stat"] = "stat";
+    AITableGridI18nKey["emptyGroup"] = "emptyGroup";
 })(AITableGridI18nKey || (AITableGridI18nKey = {}));
 const AITableGridI18nText = {
     [AITableGridI18nKey.dataPickerPlaceholder]: '选择日期',
@@ -598,7 +599,8 @@ const AITableGridI18nText = {
     [AITableGridI18nKey.dateRangeOfMonthsResult]: '时间范围 {{statValue}} 月',
     [AITableGridI18nKey.selectedRecordsCount]: '已经选择 {count} 条记录',
     [AITableGridI18nKey.selectedCellsCount]: '已经选择 {count} 个单元格',
-    [AITableGridI18nKey.stat]: '统计'
+    [AITableGridI18nKey.stat]: '统计',
+    [AITableGridI18nKey.emptyGroup]: '(空)'
 };
 const getDefaultI18nTextByKey = (key) => {
     return AITableGridI18nText[key] || key;
@@ -752,9 +754,12 @@ const Colors = {
     gray100: '#f5f5f5',
     gray200: '#eee',
     gray300: '#ddd',
-    gray800: '#333',
+    gray400: '#cacaca',
+    gray500: '#aaa',
     gray600: '#999',
     gray700: '#666',
+    gray800: '#333',
+    gray900: '#212529',
     white: '#fff',
     black: '#000',
     transparent: 'transparent',
@@ -822,6 +827,8 @@ var AITableRowType;
 (function (AITableRowType) {
     AITableRowType["add"] = "add";
     AITableRowType["record"] = "record";
+    AITableRowType["group"] = "group";
+    AITableRowType["blank"] = "blank";
 })(AITableRowType || (AITableRowType = {}));
 
 const AI_TABLE_ACTION_COMMON_SIZE = 32; // 表格图标action背景的通用尺寸
@@ -914,7 +921,11 @@ const AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
 const AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
 const AI_TABLE_FIELD_STAT_INNER_HEIGHT = 47; // 字段统计内部高度
 const AI_TABLE_TEXT_LINE_HEIGHT = 1.84; // 默认文本行高
-const AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT = AI_TABLE_FIELD_STAT_INNER_HEIGHT + AI_TABLE_OFFSET * 2; // 统计容器高度
+const AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT = AI_TABLE_FIELD_STAT_INNER_HEIGHT + AI_TABLE_CELL_LINE_BORDER * 2; // 统计容器高度
+const AI_TABLE_GROUP_MAX_LEVEL = 3;
+const AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON = 'AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON';
+const AI_TABLE_ROW_GROUP_OFFSET = 16;
+const AI_TABLE_SHADOW_DEFAULT_WIDTH = 8;
 
 const MIN_COLUMN_WIDTH = 80;
 const DBL_CLICK_EDIT_TYPE = [
@@ -979,6 +990,7 @@ const AttachmentPath = `M9.1773124,11.8057395 C7.96668709,13.0163648 6.00387566,
 const EditPath = `M2,8.33918294 L10.7095952,0 L15,4.17020474 L6.53816398,13 L2,13 L2,8.33918294 Z M3.2,8.85157902 L3.2,11.8 L6.02608482,11.8 L13.3091776,4.20020516 L10.7033283,1.66736141 L3.2,8.85157902 Z M0,16 L0,14.8 L16,14.8 L16,16 L0,16 Z`;
 const RowDragPath = `M6,3 C6.55228475,3 7,2.55228475 7,2 C7,1.44771525 6.55228475,1 6,1 C5.44771525,1 5,1.44771525 5,2 C5,2.55228475 5.44771525,3 6,3 Z M10,3 C10.5522847,3 11,2.55228475 11,2 C11,1.44771525 10.5522847,1 10,1 C9.44771525,1 9,1.44771525 9,2 C9,2.55228475 9.44771525,3 10,3 Z M6,7 C6.55228475,7 7,6.55228475 7,6 C7,5.44771525 6.55228475,5 6,5 C5.44771525,5 5,5.44771525 5,6 C5,6.55228475 5.44771525,7 6,7 Z M10,7 C10.5522847,7 11,6.55228475 11,6 C11,5.44771525 10.5522847,5 10,5 C9.44771525,5 9,5.44771525 9,6 C9,6.55228475 9.44771525,7 10,7 Z M6,11 C6.55228475,11 7,10.5522847 7,10 C7,9.44771525 6.55228475,9 6,9 C5.44771525,9 5,9.44771525 5,10 C5,10.5522847 5.44771525,11 6,11 Z M10,11 C10.5522847,11 11,10.5522847 11,10 C11,9.44771525 10.5522847,9 10,9 C9.44771525,9 9,9.44771525 9,10 C9,10.5522847 9.44771525,11 10,11 Z M6,15 C6.55228475,15 7,14.5522847 7,14 C7,13.4477153 6.55228475,13 6,13 C5.44771525,13 5,13.4477153 5,14 C5,14.5522847 5.44771525,15 6,15 Z M10,15 C10.5522847,15 11,14.5522847 11,14 C11,13.4477153 10.5522847,13 10,13 C9.44771525,13 9,13.4477153 9,14 C9,14.5522847 9.44771525,15 10,15 Z`;
 const AngleDownPath = `M7.97815,11.99732 L7.9728,12.00267 L2.2998,6.33067 L3.1298,5.49967 L7.97807731,10.3479473 L12.8255,5.49967 L13.6565,6.33067 L7.9835,12.00267 L7.97815,11.99732 Z`;
+const AngleRightPath = `M4.72665,3.40415 L5.55765,2.57315 L11.22965,8.24615 L5.55765,13.92985 L4.72665,13.09985 L9.57465,8.25285`;
 const IconPathMap = {};
 
 const DEFAULT_FONT_SIZE = 14;
@@ -1947,8 +1959,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ['inputElement', { static: false }]
             }] } });
 
-const buildGridLinearRows = (visibleRecords, isAddingVisible = true) => {
-    const linearRows = [];
+const buildGridLinearRows = (visibleRecords, isAddingVisible = true, aiTable, aiBuildGroupLinearRowsFn) => {
+    let linearRows = [];
+    if (aiBuildGroupLinearRowsFn) {
+        const groupLinearRows = aiBuildGroupLinearRowsFn(aiTable);
+        if (groupLinearRows) {
+            return groupLinearRows;
+        }
+    }
     let displayRowIndex = 0;
     [...visibleRecords, { _id: '' }].forEach((row) => {
         if (row._id) {
@@ -1956,13 +1974,15 @@ const buildGridLinearRows = (visibleRecords, isAddingVisible = true) => {
             linearRows.push({
                 type: AITableRowType.record,
                 _id: row._id,
-                displayIndex: displayRowIndex
+                displayIndex: displayRowIndex,
+                depth: 0
             });
         }
         if (isAddingVisible && !row._id) {
             linearRows.push({
                 type: AITableRowType.add,
-                _id: ''
+                _id: '',
+                depth: 0
             });
         }
     });
@@ -1997,8 +2017,18 @@ function getColumnIndicesSizeMap(aiTable, fields) {
  * 根据单元格是否是第一列/最后一列确定单元格所在的位置
  */
 function getCellHorizontalPosition(options) {
-    const { columnWidth } = options;
-    return { width: columnWidth, offset: 0 };
+    let { columnWidth, columnIndex, columnCount, depth = 0 } = options;
+    depth += 1;
+    if (!depth)
+        return { width: columnWidth, offset: 0 };
+    const firstIndent = columnIndex === 0 && depth;
+    const lastIndent = columnIndex === columnCount - 1 && depth === 3;
+    const offset = firstIndent ? (depth - 1) * AI_TABLE_ROW_GROUP_OFFSET + 0.5 : 0;
+    const width = lastIndent && !firstIndent ? columnWidth - AI_TABLE_ROW_GROUP_OFFSET : columnWidth - offset;
+    return {
+        width,
+        offset
+    };
 }
 function transformToCellText(cellValue, options) {
     const { aiTable, field } = options;
@@ -2121,7 +2151,13 @@ function selectCells(aiTable, startCell, endCell, activeCell) {
         selectedCells.add(`${startRecordId}:${startFieldId}`);
     }
     else {
-        if (endCell && endCell.join(':') === aiTable.selection().selectedEndCell?.join(':')) {
+        const startCellPath = startCell.join(':');
+        const endCellPath = endCell.join(':');
+        const selectCells = Array.from(aiTable.selection().selectedCells);
+        const startSelectedCellPath = selectCells[0];
+        const endSelectedCellPath = selectCells[selectCells.length - 1];
+        if ((startCellPath === startSelectedCellPath || startCellPath === endSelectedCellPath) &&
+            (endCellPath === startSelectedCellPath || endCellPath === endSelectedCellPath)) {
             return;
         }
         const [endRecordId, endFieldId] = endCell;
@@ -2134,8 +2170,11 @@ function selectCells(aiTable, startCell, endCell, activeCell) {
         const minColIndex = Math.min(startColIndex, endColIndex);
         const maxColIndex = Math.max(startColIndex, endColIndex);
         for (let i = minRowIndex; i <= maxRowIndex; i++) {
-            for (let j = minColIndex; j <= maxColIndex; j++) {
-                selectedCells.add(`${records[i]._id}:${fields[j]._id}`);
+            const row = records[i];
+            if (row && row.type === AITableRowType.record) {
+                for (let j = minColIndex; j <= maxColIndex; j++) {
+                    selectedCells.add(`${row._id}:${fields[j]._id}`);
+                }
             }
         }
     }
@@ -2237,7 +2276,7 @@ function getPlaceHolderCellsConfigs(options) {
                 break;
             }
             const row = linearRows()[rowIndex];
-            const { _id: recordId, type } = row;
+            const { _id: recordId, type, depth = 0 } = row;
             if (type !== AITableRowType.record) {
                 continue;
             }
@@ -2246,7 +2285,8 @@ function getPlaceHolderCellsConfigs(options) {
             const { width, offset } = getCellHorizontalPosition({
                 columnWidth,
                 columnIndex,
-                columnCount
+                columnCount,
+                depth
             });
             const height = rowHeight - AI_TABLE_OFFSET * 4;
             configs.unshift({
@@ -3500,6 +3540,20 @@ function buildClipboardContent(aiTable, fieldIds, recordIds) {
     return clipboardContent;
 }
 
+function getGroupLastRecordIndex(aiTable, startRowIndex) {
+    const linearRows = aiTable.context.linearRows();
+    if (startRowIndex + 1 >= linearRows.length) {
+        return startRowIndex;
+    }
+    for (let i = startRowIndex + 1; i < linearRows.length; i++) {
+        const row = linearRows[i];
+        if (row.type !== AITableRowType.record) {
+            return i - 1;
+        }
+    }
+    return linearRows.length - 1;
+}
+
 const aiTableAttributePattern = new RegExp(`${aiTableFragmentAttribute}="(.+?)"`, 'm');
 const decodeClipboardJsonData = (encoded) => {
     const decoded = decodeURIComponent(window.atob(encoded));
@@ -3645,14 +3699,20 @@ const writeToAITable = async (aiTable, actions) => {
     const maxFields = aiTable.context.maxFields();
     const maxRecords = aiTable.context.maxRecords();
     const startRowIndex = aiTable.context.visibleRowsIndexMap().get(startRecordId) ?? 0;
-    const lastRowIndex = aiTable.context.linearRows().length - 1;
+    const lastRowIndex = getGroupLastRecordIndex(aiTable, startRowIndex);
+    let appendRowCount = clipboardContent.length - (lastRowIndex - startRowIndex) - 1;
     const recordsCount = aiTable.records().length;
-    let appendRowCount = clipboardContent.length - (lastRowIndex - startRowIndex);
     if (maxRecords && recordsCount + appendRowCount > maxRecords) {
         appendRowCount = maxRecords - recordsCount;
         result.isPasteOverMaxRecords = true;
     }
-    actions.addRecord({ count: appendRowCount });
+    if (appendRowCount > 0) {
+        actions.addRecord({
+            count: appendRowCount,
+            afterRecordId: startRecordId,
+            forGroupId: startRecordId
+        });
+    }
     const startColIndex = aiTable.context.visibleColumnsIndexMap().get(startFieldId) ?? 0;
     const lastColIndex = aiTable.context.visibleColumnsIndexMap().size - 1;
     const copiedFieldLength = clipboardContent[0].length;
@@ -3676,12 +3736,12 @@ const writeToAITable = async (aiTable, actions) => {
         if (maxRecords && targetRowIndex >= maxRecords) {
             return;
         }
+        const targetRecord = linearRows[targetRowIndex];
         row.forEach((plainText, j) => {
             const targetColIndex = startColIndex + j;
             if (maxFields && targetColIndex >= maxFields) {
                 return;
             }
-            const targetRecord = linearRows[targetRowIndex];
             const targetField = visibleFields[targetColIndex];
             const recordIndex = i;
             const fieldIndex = j;
@@ -5449,13 +5509,15 @@ class Layout extends Drawer {
         // 列数
         this.columnCount = 0;
         this.containerWidth = 0;
+        this.frozenColumnCount = 0;
         this.rowHeadWidth = AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH;
         this.hiddenIndexColumn = false;
         this.hiddenRowDrag = false;
         this.readonly = false;
+        this.xIsScroll = false;
     }
     // 用于初始化或重置布局的基本属性。这个方法通常在每次渲染新的一行或单元格时调用，确保布局信息是最新的
-    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth, rowHeadWidth, hiddenIndexColumn, hiddenRowDrag, readonly }) {
+    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth, rowHeadWidth, hiddenIndexColumn, hiddenRowDrag, readonly, frozenColumnCount, xIsScroll }) {
         this.x = x;
         this.y = y;
         this.rowIndex = rowIndex;
@@ -5468,11 +5530,17 @@ class Layout extends Drawer {
         this.hiddenIndexColumn = hiddenIndexColumn;
         this.hiddenRowDrag = hiddenRowDrag;
         this.readonly = readonly;
+        this.frozenColumnCount = frozenColumnCount;
+        this.xIsScroll = xIsScroll;
     }
     // 当前单元格是否是行的第一列
     get isFirst() {
         return this.columnIndex === 0;
     }
+    // 当前单元格是否是锁定列的最后一列
+    get isLastFrozenColumn() {
+        return this.columnIndex === this.frozenColumnCount - 1;
+    }
     // 当前单元格是否是行的最后一列
     get isLast() {
         return this.columnIndex === this.columnCount - 1;
@@ -5491,6 +5559,22 @@ class Layout extends Drawer {
             fill
         });
     }
+    renderFrozenShadow() {
+        if (this.isLastFrozenColumn && this.xIsScroll) {
+            const shadowWidth = AI_TABLE_SHADOW_DEFAULT_WIDTH;
+            const shadowGradient = this.ctx.createLinearGradient(this.x + this.columnWidth + 0, this.y, this.x + this.columnWidth + 0 + shadowWidth, this.y);
+            // 阴影从分割线处最深，逐渐变浅
+            shadowGradient.addColorStop(0, 'rgba(0,0,0,0.05)');
+            shadowGradient.addColorStop(1, this.colors.transparent);
+            this.rect({
+                x: this.x + this.columnWidth + 0,
+                y: this.y,
+                width: shadowWidth,
+                height: this.rowHeight,
+                fill: shadowGradient
+            });
+        }
+    }
 }
 
 class AddRowLayout extends Layout {
@@ -6858,10 +6942,108 @@ class RecordRowLayout extends Layout {
         this.renderFirstCell({ row, style, indexStyle, isCheckedRow, isHoverRow });
         this.renderCommonCell({ style });
         this.renderLastCell({ style, isCheckedRow, isHoverRow });
+        this.renderFrozenShadow();
     }
 }
 const recordRowLayout = new RecordRowLayout();
 
+class GroupLayout extends Layout {
+    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
+        super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
+        const rowHeight = this.rowHeight;
+        const startX = this.x + this.columnWidth;
+        const lineWidth = this.containerWidth - startX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH : this.containerWidth - startX;
+        this.line({
+            x: startX,
+            y: this.y,
+            points: [0, rowHeight, lineWidth, rowHeight],
+            stroke: this.colors.gray200
+        });
+    }
+    renderFirstCell(render, config) {
+        if (!this.isFirst)
+            return;
+        const { row, indexStyle } = config;
+        const { _id: recordId, type, depth = 0, groupValue, fieldId, isCollapsed } = row;
+        const { field, style, aiTable } = render;
+        const y = this.y;
+        const rowHeight = this.rowHeight;
+        const columnWidth = this.columnWidth;
+        const { fill: indexFill } = indexStyle || {};
+        const dragOccupyWidth = this.hiddenRowDrag || this.readonly ? 0 : AI_TABLE_ROW_DRAG_ICON_WIDTH;
+        if (!this.hiddenIndexColumn) {
+            this.customRect({
+                x: AI_TABLE_OFFSET + dragOccupyWidth,
+                y,
+                width: this.rowHeadWidth - AI_TABLE_OFFSET - dragOccupyWidth,
+                height: rowHeight,
+                fill: indexFill,
+                strokes: {
+                    top: this.colors.gray200,
+                    bottom: this.colors.gray200
+                }
+            });
+            // 第一列单元格
+            this.rect({
+                x: AI_TABLE_CELL_PADDING + dragOccupyWidth + 2,
+                y: this.y + (rowHeight - AI_TABLE_ICON_COMMON_SIZE) / 2,
+                width: AI_TABLE_ICON_COMMON_SIZE,
+                height: AI_TABLE_ICON_COMMON_SIZE,
+                fill: hexToRgb(this.colors.gray400, 0.2),
+                stroke: this.colors.gray300,
+                radius: 2
+            });
+        }
+        const iconContainerWidth = AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
+        if (!isEmpty(groupValue)) {
+            cellDrawer.initStyle(field, style);
+            cellDrawer.renderCell({
+                ...render,
+                x: render.x + iconContainerWidth,
+                columnWidth: render.columnWidth - iconContainerWidth
+            }, this.ctx, columnWidth);
+        }
+        else {
+            const emptyGroupString = getI18nTextByKey(aiTable, AITableGridI18nKey.emptyGroup);
+            this.text({
+                x: render.x + iconContainerWidth + AI_TABLE_CELL_PADDING,
+                y: this.y + (rowHeight - AI_TABLE_COMMON_FONT_SIZE) / 2,
+                text: emptyGroupString
+            });
+        }
+    }
+    renderCommonCellBorder({ style }) {
+        const { fill, stroke } = style || {};
+        const colors = AITable.getColors();
+        // 背景、边框
+        this.customRect({
+            x: this.x,
+            y: this.y,
+            width: this.columnWidth,
+            height: this.rowHeight,
+            fill: fill || colors.white,
+            strokes: {
+                top: stroke || colors.gray200,
+                bottom: stroke || colors.gray200,
+                right: this.isLastFrozenColumn ? this.colors.gray200 : undefined
+            }
+        });
+    }
+    renderLastCell({ style, isHoverRow, isCheckedRow }) {
+        if (this.isLast) {
+            this.renderAddFieldBlank({ isHoverRow: false, isCheckedRow: false });
+        }
+    }
+    render(render, config) {
+        const { style, isHoverRow, isCheckedRow } = config;
+        this.renderFirstCell(render, config);
+        this.renderCommonCellBorder({ style });
+        this.renderLastCell({ style, isHoverRow, isCheckedRow });
+        this.renderFrozenShadow();
+    }
+}
+const groupLayout = new GroupLayout();
+
 /**
  * 绘制单元格内容的函数
  * 利用 Canvas API 绘制每个单元格的背景颜色、文本以及其他可能的样式。这个函数通常用于自定义表格渲染，尤其是在处理大量数据时，通过直接操作 Canvas 来提高渲染性能
@@ -6873,11 +7055,14 @@ const createCells = (config) => {
     const { rowHeight, columnCount, rowCount } = coordinate;
     const colors = AITable.getColors();
     const visibleColumns = AITable.getVisibleFields(aiTable);
+    const xIsScroll = aiTable.context.scrollState().scrollLeft > 0;
     // 初始化绘图上下文, 为后续的绘制操作做准备
     cellDrawer.initCtx(ctx);
     addRowLayout.initCtx(ctx);
     recordRowLayout.initCtx(ctx);
+    groupLayout.initCtx(ctx);
     const coverCell = getCoverCell(aiTable);
+    const frozenColumnCount = aiTable.context?.frozenColumnCount() || 1;
     // 遍历列, 确定在哪些列上绘制单元格
     for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
         if (columnIndex > columnCount - 1)
@@ -6898,7 +7083,7 @@ const createCells = (config) => {
             if (rowIndex > rowCount - 1)
                 break;
             const row = context.linearRows()[rowIndex];
-            const { _id: recordId, type } = row;
+            const { _id: recordId, type, depth = 0 } = row;
             const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
             const { rowIndex: pointRowIndex, targetName } = context.pointPosition();
             const isHover = pointRowIndex === rowIndex;
@@ -6918,7 +7103,8 @@ const createCells = (config) => {
                         rowHeadWidth: context.rowHeadWidth(),
                         hiddenIndexColumn: !!context.aiFieldConfig()?.hiddenIndexColumn,
                         hiddenRowDrag: !!context.aiFieldConfig()?.hiddenRowDrag,
-                        readonly: aiTable.context?.readonly?.()
+                        readonly: aiTable.context?.readonly?.(),
+                        frozenColumnCount
                     });
                     addRowLayout.render({
                         isHoverRow,
@@ -6944,7 +7130,9 @@ const createCells = (config) => {
                         rowHeadWidth: context.rowHeadWidth(),
                         hiddenIndexColumn: !!context.aiFieldConfig()?.hiddenIndexColumn,
                         hiddenRowDrag: !!context.aiFieldConfig()?.hiddenRowDrag,
-                        readonly: aiTable.context?.readonly?.()
+                        readonly: aiTable.context?.readonly?.(),
+                        frozenColumnCount,
+                        xIsScroll
                     });
                     recordRowLayout.render({
                         row,
@@ -6953,12 +7141,17 @@ const createCells = (config) => {
                         isHoverRow: isHoverRecord(isHover, targetName),
                         isCheckedRow: isSelectedRecord(recordId, aiTable)
                     });
+                    const isGroupAndFirstColumn = depth > 0 && columnIndex === 0;
                     const { width, offset } = getCellHorizontalPosition({
                         columnIndex,
-                        columnWidth,
-                        columnCount
+                        columnWidth: isGroupAndFirstColumn ? columnWidth - AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE : columnWidth,
+                        columnCount,
+                        depth
                     });
-                    const realX = x + offset + AI_TABLE_OFFSET;
+                    let realX = x + offset + AI_TABLE_OFFSET;
+                    if (isGroupAndFirstColumn) {
+                        realX += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
+                    }
                     const realY = y + AI_TABLE_OFFSET;
                     const style = { fontWeight: DEFAULT_FONT_STYLE };
                     const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, fieldId]);
@@ -6999,6 +7192,60 @@ const createCells = (config) => {
                     else {
                         cellDrawer.renderCell(render, ctx, columnWidth);
                     }
+                    break;
+                }
+                case AITableRowType.group: {
+                    const fieldId = row.fieldId;
+                    const field = aiTable.fieldsMap()[fieldId];
+                    groupLayout.init({
+                        x,
+                        y,
+                        rowIndex,
+                        columnIndex,
+                        columnWidth,
+                        rowHeight,
+                        columnCount,
+                        containerWidth: coordinate.containerWidth,
+                        rowHeadWidth: context.rowHeadWidth(),
+                        hiddenIndexColumn: !!context.aiFieldConfig()?.hiddenIndexColumn,
+                        hiddenRowDrag: !!context.aiFieldConfig()?.hiddenRowDrag,
+                        readonly: aiTable.context?.readonly?.(),
+                        frozenColumnCount,
+                        xIsScroll
+                    });
+                    const { width, offset } = getCellHorizontalPosition({
+                        columnIndex,
+                        columnWidth,
+                        columnCount,
+                        depth
+                    });
+                    const realX = x + offset + AI_TABLE_OFFSET;
+                    const realY = y + AI_TABLE_OFFSET;
+                    const style = { fontWeight: DEFAULT_FONT_STYLE };
+                    const cellValue = row.groupValue;
+                    const fieldModel = FieldModelMap[field.type];
+                    const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
+                    const render = {
+                        aiTable,
+                        x: realX,
+                        y: realY,
+                        columnWidth: width,
+                        rowHeight,
+                        recordId: recordId,
+                        field,
+                        cellValue,
+                        transformValue,
+                        references,
+                        isActive: isSelectedField(fieldId, aiTable),
+                        style,
+                        colors,
+                        isCoverCell: false
+                    };
+                    groupLayout.render(render, {
+                        row: row,
+                        isHoverRow: isHoverRecord(isHover, targetName),
+                        isCheckedRow: isSelectedRecord(recordId, aiTable)
+                    });
                 }
             }
         }
@@ -7992,9 +8239,10 @@ class AITableOtherRows {
                     break;
                 if (maxRecords && aiTable.records().length >= maxRecords)
                     break;
-                const { _id, type } = aiTable.context.linearRows()[rowIndex];
-                if (type === AITableRowType.record)
+                const linearRow = aiTable.context.linearRows()[rowIndex];
+                if (linearRow.type === AITableRowType.record)
                     continue;
+                const { _id, type } = linearRow;
                 const y = coordinate.getRowOffset(rowIndex);
                 const curHeight = coordinate.getRowHeight(rowIndex);
                 otherRowConfigs.push({
@@ -8002,7 +8250,10 @@ class AITableOtherRows {
                     addBtnConfig: {
                         key: `row-add-${_id}`,
                         y: y + 1,
-                        name: AI_TABLE_ROW_ADD_BUTTON,
+                        name: generateTargetName({
+                            targetName: AI_TABLE_ROW_ADD_BUTTON,
+                            source: _id
+                        }),
                         width: coordinate.containerWidth,
                         height: curHeight - 1,
                         fill: 'transparent'
@@ -8151,14 +8402,17 @@ class AITableBackground {
             return { x, y };
         });
         this.bgConfig = computed(() => {
-            const { name, width, height, fill = Colors.transparent, cornerRadius, opacity, hoverFill, hoverOpacity, listening } = this.config();
+            const { name, width, height, fill = Colors.transparent, opacity, hoverFill, hoverOpacity, listening, borders } = this.config();
+            const [top, right, bottom, left] = borders || [false, false, false, false];
             const active = this.isHover() || this.isActive();
+            const strokeWidth = this.strokeWidth() || AI_TABLE_OFFSET;
             const result = {
+                x: left ? 0 : strokeWidth,
+                y: top ? 0 : strokeWidth,
+                width: width - (left ? 0 : strokeWidth) - (right ? 0 : strokeWidth),
+                height: height - (top ? 0 : strokeWidth) - (bottom ? 0 : strokeWidth),
                 name,
-                width,
-                height,
                 fill: active ? hoverFill || fill : fill,
-                cornerRadius,
                 opacity: active ? hoverOpacity || opacity : opacity,
                 listening
             };
@@ -8236,46 +8490,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableFrozenFieldShadow {
+class AITableShadow {
     constructor() {
         this.config = input.required();
-        this.position = input('table');
-        this.coordinate = computed(() => {
-            return this.config().coordinate;
-        });
-        this.scrollState = computed(() => {
-            return this.config().aiTable.context.scrollState();
-        });
-        this.frozenAreaWidth = computed(() => {
-            return this.config().aiTable.context.rowHeadWidth() + this.config().coordinate.frozenColumnWidth;
-        });
-        this.frozenShadowConfig = computed(() => {
-            const { aiTable } = this.config();
-            const coordinate = this.coordinate();
-            const rowCount = aiTable.gridData().records.length;
-            const height = this.position() !== 'fieldStats'
-                ? rowCount * coordinate.rowHeight + AI_TABLE_FIELD_HEAD_HEIGHT
-                : this.config().height;
+        this.shadowConfig = computed(() => {
+            const { visible, x, y, width = AI_TABLE_SHADOW_DEFAULT_WIDTH, height } = this.config();
             return {
-                visible: this.scrollState().scrollLeft > 0,
-                x: this.frozenAreaWidth() + 1, // 偏移1，避免和边框重叠导致颜色太深
-                y: 0,
-                width: 8,
+                visible,
+                x,
+                y,
+                width,
                 height,
                 fillLinearGradientStartPoint: { x: 0, y: 0 },
-                fillLinearGradientEndPoint: { x: 8, y: 0 },
+                fillLinearGradientEndPoint: { x: width, y: 0 },
                 fillLinearGradientColorStops: [0, 'rgba(0,0,0,0.05)', 1, Colors.transparent]
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenFieldShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableFrozenFieldShadow, isStandalone: true, selector: "ai-table-frozen-field-shadow", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ko-rect [config]="frozenShadowConfig()"></ko-rect>`, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableShadow, isStandalone: true, selector: "ai-table-shadow", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-rect [config]="shadowConfig()"></ko-rect>`, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenFieldShadow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableShadow, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ai-table-frozen-field-shadow',
-                    template: `<ko-rect [config]="frozenShadowConfig()"></ko-rect>`,
+                    selector: 'ai-table-shadow',
+                    template: `<ko-rect [config]="shadowConfig()"></ko-rect>`,
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
@@ -8727,177 +8966,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ['rootGroup']
             }] } });
 
-class AITableFillHandle {
-    constructor() {
-        this.config = input.required();
-        this.showFillHandle = computed(() => {
-            const { aiTable, readonly } = this.config();
-            const selection = aiTable.selection();
-            const hasSelectedCells = selection.selectedCells.size > 0;
-            const isEditingCell = !!aiTable.editingCell()?.path;
-            return hasSelectedCells && !readonly && !isEditingCell;
-        });
-        this.handleConfig = computed(() => {
-            const { aiTable, coordinate } = this.config();
-            const selectedCells = Array.from(aiTable.selection().selectedCells);
-            const lastCell = selectedCells[selectedCells.length - 1];
-            const [recordId, fieldId] = lastCell.split(':');
-            const columnIndex = aiTable.context.visibleColumnsIndexMap().get(fieldId);
-            const columnOffset = coordinate.getColumnOffset(columnIndex);
-            const columnWidth = coordinate.getColumnWidth(columnIndex);
-            const rowIndex = aiTable.context.visibleRowsIndexMap().get(recordId);
-            const rowOffset = coordinate.getRowOffset(rowIndex);
-            const width = 6;
-            const height = 6;
-            const [expandRecordId, expandFieldId] = aiTable.expendCell()?.path || [null, null];
-            const cellHeight = expandRecordId === recordId && expandFieldId === fieldId && aiTable.expendCell()?.height
-                ? aiTable.expendCell()?.height
-                    ? aiTable.expendCell().height + AI_TABLE_CELL_LINE_BORDER
-                    : AI_TABLE_ROW_HEIGHT
-                : AI_TABLE_ROW_HEIGHT;
-            return {
-                x: columnOffset + columnWidth - width / 2 + AI_TABLE_OFFSET,
-                y: rowOffset + cellHeight - height + AI_TABLE_CELL_BORDER + AI_TABLE_OFFSET,
-                width,
-                height,
-                fill: Colors.primary,
-                stroke: Colors.white,
-                strokeWidth: 2,
-                zIndex: 20,
-                name: generateTargetName({
-                    targetName: AI_TABLE_FILL_HANDLE,
-                    fieldId,
-                    recordId
-                })
-            };
+const createGroupCells = (config) => {
+    const { coordinate, rowStartIndex, rowStopIndex, columnStartIndex, columnStopIndex, aiTable, actions, readonly } = config;
+    const linearRows = aiTable.context?.linearRows();
+    const { columnCount } = coordinate;
+    const groups = [];
+    for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+        if (rowIndex > columnCount - 1)
+            break;
+        if (rowIndex < 0)
+            continue;
+        const row = linearRows[rowIndex];
+        const { depth } = row;
+        if (row == null)
+            continue;
+        if (row.type !== AITableRowType.group)
+            continue;
+        const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
+        const rowHeight = coordinate.getRowHeight(rowIndex);
+        const columnWidth = coordinate.getColumnWidth(columnStartIndex);
+        const { offset } = getCellHorizontalPosition({
+            columnIndex: columnStartIndex,
+            columnWidth,
+            columnCount,
+            depth
         });
+        const x = coordinate.getColumnOffset(columnStartIndex);
+        const group = {
+            aiTable,
+            coordinate,
+            rowIndex,
+            x: x + offset + AI_TABLE_CELL_PADDING,
+            y,
+            height: rowHeight,
+            row: {
+                ...row,
+                rowIndex
+            },
+            readonly
+        };
+        groups.push(group);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        @if (showFillHandle()) {
-            <ko-rect [config]="handleConfig()"></ko-rect>
-        }
-    `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-fill-handle',
-                    template: `
-        @if (showFillHandle()) {
-            <ko-rect [config]="handleConfig()"></ko-rect>
-        }
-    `,
-                    imports: [KoShape]
-                }]
-        }] });
-
-class AITableCoverCellEntry {
-    constructor() {
-        this.config = input.required();
-        this.onlyDisplayBorder = input(false);
-        this.componentMap = {};
-        this.groupConfig = computed(() => {
-            return {
-                x: this.coverCellConfig()?.x,
-                y: this.coverCellConfig()?.y,
-                listening: true
-            };
-        });
-        this.coverCellConfig = computed(() => {
-            const { aiTable, coordinate, references, readonly, actions } = this.config();
-            const coverCell = this.coverCell();
-            if (!coverCell) {
-                return;
-            }
-            const { field, recordId, isExpand } = coverCell;
-            const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
-            const fieldModel = FieldModelMap[field.type];
-            const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
-            const { rowHeight, columnCount, rowCount } = coordinate;
-            const columnIndex = aiTable.context?.visibleColumnsIndexMap().get(field._id) ?? 0;
-            const rowIndex = aiTable.context?.visibleRowsIndexMap().get(recordId) ?? 0;
-            const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
-            const columnWidth = coordinate.getColumnWidth(columnIndex);
-            const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
-            const { width } = getCellHorizontalPosition({
-                columnWidth,
-                columnIndex,
-                columnCount
-            });
-            const style = {
-                textAlign: DEFAULT_TEXT_ALIGN_LEFT
-            };
-            const textAlign = style.textAlign;
-            const renderX = textAlign === DEFAULT_TEXT_ALIGN_RIGHT
-                ? columnWidth - AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET
-                : AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET;
-            const renderY = 0 - AI_TABLE_OFFSET * 2;
-            const result = {
-                field,
-                recordId,
-                aiTable,
-                coordinate,
-                x,
-                y,
-                readonly,
-                actions,
-                isExpand,
-                render: {
-                    aiTable,
-                    recordId,
-                    field,
-                    isActive: isSelectedField(field._id, aiTable),
-                    x: renderX,
-                    y: renderY,
-                    columnWidth: width,
-                    rowHeight,
-                    cellValue,
-                    transformValue,
-                    style,
-                    references
-                }
-            };
-            return result;
-        });
-        this.coverCell = computed(() => getCoverCell(this.config().aiTable));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCoverCellEntry, isStandalone: true, selector: "ai-table-cover-cell-entry", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-        @if (coverCell()) {
-            <ko-group #rootGroup [config]="groupConfig()">
-                <ng-container
-                    *ngComponentOutlet="
-                        coverCell()!.renderComponentDefinition;
-                        inputs: { config: coverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
-                    "
-                >
-                </ng-container>
-            </ko-group>
-        }
-    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-cover-cell-entry',
-                    template: `
-        @if (coverCell()) {
-            <ko-group #rootGroup [config]="groupConfig()">
-                <ng-container
-                    *ngComponentOutlet="
-                        coverCell()!.renderComponentDefinition;
-                        inputs: { config: coverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
-                    "
-                >
-                </ng-container>
-            </ko-group>
-        }
-    `,
-                    imports: [KoContainer, CommonModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
+    return groups;
+};
 
 const createFieldStats = (config) => {
     const { coordinate, columnStartIndex, columnStopIndex, aiTable, actions, y, isHoverStatContainer, readonly } = config;
@@ -8913,7 +9024,7 @@ const createFieldStats = (config) => {
         const field = fields[columnIndex];
         if (field == null)
             continue;
-        const x = coordinate.getColumnOffset(columnIndex);
+        const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
         const columnWidth = coordinate.getColumnWidth(columnIndex);
         const fieldStat = {
             aiTable,
@@ -8923,7 +9034,7 @@ const createFieldStats = (config) => {
             x,
             y,
             width: columnWidth,
-            height: AI_TABLE_FIELD_STAT_INNER_HEIGHT,
+            height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
             field,
             stroke: columnIndex === 0 ? colors.transparent : undefined,
             isHoverStatContainer: isHoverStatContainer,
@@ -8933,6 +9044,41 @@ const createFieldStats = (config) => {
     }
     return fieldStats;
 };
+const createGroupFieldStats = (config) => {
+    const { coordinate, columnStartIndex, columnStopIndex, aiTable, actions, y, height, isHoverStatContainer, readonly, groupRow } = config;
+    const colors = Colors;
+    const { columnCount, rowInitSize: fieldHeadHeight } = coordinate;
+    const fields = aiTable.gridData().fields;
+    const fieldStats = [];
+    for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+        if (columnIndex > columnCount - 1)
+            break;
+        if (columnIndex < 0)
+            continue;
+        const field = fields[columnIndex];
+        if (field == null)
+            continue;
+        const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
+        const columnWidth = coordinate.getColumnWidth(columnIndex);
+        const fieldStat = {
+            aiTable,
+            coordinate,
+            actions,
+            columnIndex,
+            x,
+            y: y,
+            width: columnWidth,
+            height: height ?? AI_TABLE_FIELD_HEAD_HEIGHT,
+            field,
+            isHoverStatContainer: isHoverStatContainer,
+            readonly,
+            isGroupStat: true,
+            groupRow: groupRow
+        };
+        fieldStats.push(fieldStat);
+    }
+    return fieldStats;
+};
 
 class AITableStatTypeMenu extends ThyDropdownAbstractMenu {
     constructor() {
@@ -8977,8 +9123,11 @@ class AITableFieldStat {
                 y: this.config().y
             };
         });
+        this.isGroupStat = computed(() => {
+            return this.config().isGroupStat;
+        });
         this.bgConfig = computed(() => {
-            const { field, width, height, coordinate, readonly, aiTable } = this.config();
+            const { field, width, height, coordinate, readonly, aiTable, isGroupStat, columnIndex } = this.config();
             const rowHeadWidth = aiTable.context.rowHeadWidth();
             const config = {
                 coordinate,
@@ -8989,27 +9138,50 @@ class AITableFieldStat {
                     fieldId: field._id,
                     mouseStyle: 'pointer'
                 }),
-                width: this.isFirstColumn() ? width + AI_TABLE_OFFSET : width,
+                width: width,
                 height: height,
                 fill: Colors.white,
                 hoverFill: Colors.gray100,
                 opacity: 1,
                 listening: !readonly
             };
-            if (this.renderTexts()) {
-                config.borders = [false, true, false, true];
-                config.stroke = Colors.gray200;
-                config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
+            if (isGroupStat) {
+                if (columnIndex === 0) {
+                    const textsConfig = this.textsConfig();
+                    if (textsConfig) {
+                        config.x = textsConfig[0].x - AI_TABLE_CELL_PADDING;
+                        config.width = config.width - config.x;
+                    }
+                    else {
+                        config.width = this.noneStatWidth();
+                        config.x = width - this.noneStatWidth();
+                        config.fill = Colors.transparent;
+                    }
+                }
             }
-            if (this.isFirstColumn()) {
-                if (rowHeadWidth === 0) {
+            else {
+                if (this.renderTexts()) {
+                    config.borders = [false, true, false, true];
+                    config.stroke = Colors.gray200;
+                    config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
+                }
+                else if (this.isLastFrozenColumn()) {
                     config.borders = [false, true, false, false];
+                    config.stroke = Colors.gray200;
+                    config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
                 }
-                else {
-                    config.borders = [false, true, false, true];
+                if (this.isFirstColumn()) {
+                    if (rowHeadWidth === 0) {
+                        config.borders = [false, true, false, false];
+                    }
+                    else {
+                        config.x = -AI_TABLE_OFFSET;
+                        config.width = config.width + AI_TABLE_OFFSET;
+                        config.borders = [false, true, false, true];
+                    }
+                    config.stroke = Colors.gray200;
+                    config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
                 }
-                config.stroke = Colors.gray200;
-                config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
             }
             return config;
         });
@@ -9017,9 +9189,28 @@ class AITableFieldStat {
             const { field } = this.config();
             return field;
         });
-        this.records = computed(() => {
+        this.linearRows = computed(() => {
             const { aiTable } = this.config();
-            return aiTable.gridData().records;
+            return aiTable.context?.linearRows();
+        });
+        this.recordsMap = computed(() => {
+            const { aiTable } = this.config();
+            return aiTable.recordsMap();
+        });
+        this.groupRow = computed(() => this.config().groupRow);
+        this.gridData = computed(() => this.config().aiTable.gridData());
+        this.records = computed(() => {
+            let records = [];
+            const groupRow = this.groupRow();
+            if (this.isGroupStat()) {
+                if (groupRow.range?.length === 2) {
+                    records = this.gridData().records.slice(groupRow.range[0], groupRow.range[1] + 1);
+                }
+            }
+            else {
+                records = this.gridData().records;
+            }
+            return records;
         });
         this.aiFieldConfig = computed(() => {
             const { aiTable } = this.config();
@@ -9052,6 +9243,15 @@ class AITableFieldStat {
             const { width } = this.config();
             return width;
         });
+        this.noneStatWidth = computed(() => {
+            const noneStatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
+            const { text, textWidth } = drawer.textEllipsis({
+                text: noneStatString,
+                fontSize: DEFAULT_FONT_SIZE,
+                fontWeight: DEFAULT_FONT_WEIGHT
+            });
+            return textWidth + AI_TABLE_ACTION_COMMON_SIZE + AI_TABLE_OFFSET;
+        });
         this.renderTexts = computed(() => {
             const width = this.containerBoxWidth();
             const field = this.field();
@@ -9061,7 +9261,7 @@ class AITableFieldStat {
             let resultString = null;
             let formatString = null;
             let statValue = '';
-            if (this.isFirstColumn() && selectedInfo.isSelected) {
+            if (this.isFirstColumn() && selectedInfo.isSelected && !this.isGroupStat()) {
                 if (selectedInfo.selectedType === 'records') {
                     formatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedRecordsCount);
                 }
@@ -9189,6 +9389,10 @@ class AITableFieldStat {
             const { columnIndex } = this.config();
             return columnIndex === 0;
         });
+        this.isLastFrozenColumn = computed(() => {
+            const { columnIndex, coordinate } = this.config();
+            return columnIndex === coordinate.frozenColumnCount - 1;
+        });
         this.iconConfig = computed(() => {
             const { field, width, height } = this.config();
             const commonIconOffsetY = (height - AI_TABLE_ACTION_COMMON_SIZE) / 2;
@@ -9305,6 +9509,327 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
+class AITableGroups {
+    constructor() {
+        this.config = input.required();
+        this.frozenColumnCount = computed(() => {
+            const { coordinate } = this.config();
+            return coordinate.frozenColumnCount ?? 0;
+        });
+        this.columnStartIndex = computed(() => {
+            const { columnStartIndex } = this.config();
+            return Math.max(columnStartIndex, this.frozenColumnCount());
+        });
+        this.groups = computed(() => {
+            return createGroupCells({
+                ...this.config(),
+                columnStartIndex: this.columnStartIndex()
+            });
+        });
+        this.groupCells = computed(() => {
+            const groups = this.groups();
+            const groupCells = [];
+            groups.forEach((group) => {
+                const { row, x = 0, y = 0 } = group;
+                const groupStats = createGroupFieldStats({
+                    ...this.config(),
+                    groupRow: row,
+                    x,
+                    y,
+                    columnStartIndex: this.columnStartIndex()
+                });
+                groupStats.forEach((groupStat) => {
+                    groupCells.push({ groupStat: groupStat });
+                });
+            });
+            return groupCells;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGroups, isStandalone: true, selector: "ai-table-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        @for (groupCell of groupCells(); track $index) {
+            <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGroups, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-groups',
+                    template: `
+        @for (groupCell of groupCells(); track $index) {
+            <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
+        }
+    `,
+                    imports: [CommonModule, AITableFieldStat],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableFrozenGroups {
+    constructor() {
+        this.config = input.required();
+        this.frozenColumnCount = computed(() => {
+            const { coordinate } = this.config();
+            return coordinate.frozenColumnCount ?? 0;
+        });
+        this.columnStopIndex = computed(() => {
+            return this.frozenColumnCount() - 1;
+        });
+        this.groups = computed(() => {
+            return createGroupCells({
+                ...this.config(),
+                columnStartIndex: 0,
+                columnStopIndex: this.columnStopIndex()
+            });
+        });
+        this.groupCells = computed(() => {
+            const groups = this.groups();
+            const groupCells = [];
+            groups.forEach((group) => {
+                const { row, x = 0, y = 0, height, readonly } = group;
+                const { isCollapsed, fieldId, groupId } = row;
+                const collapsedIcon = {
+                    name: generateTargetName({
+                        targetName: AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON,
+                        fieldId: fieldId,
+                        source: groupId,
+                        mouseStyle: readonly ? 'default' : 'pointer'
+                    }),
+                    x,
+                    y: y + (height - AI_TABLE_ICON_COMMON_SIZE) / 2,
+                    data: isCollapsed ? AngleRightPath : AngleDownPath
+                };
+                const groupStats = createGroupFieldStats({
+                    ...this.config(),
+                    groupRow: row,
+                    x,
+                    y,
+                    columnStartIndex: 0,
+                    columnStopIndex: this.columnStopIndex()
+                });
+                groupStats.forEach((groupStat) => {
+                    const groupCell = {
+                        collapsedIcon: undefined,
+                        groupStat: undefined
+                    };
+                    if (groupStat.columnIndex === 0) {
+                        groupCell.collapsedIcon = collapsedIcon;
+                    }
+                    groupCell.groupStat = groupStat;
+                    groupCells.push(groupCell);
+                });
+            });
+            return groupCells;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFrozenGroups, isStandalone: true, selector: "ai-table-frozen-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        @for (groupCell of groupCells(); track $index) {
+            @if (groupCell.collapsedIcon) {
+                <ai-table-icon [config]="groupCell.collapsedIcon"></ai-table-icon>
+            }
+            <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenGroups, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-frozen-groups',
+                    template: `
+        @for (groupCell of groupCells(); track $index) {
+            @if (groupCell.collapsedIcon) {
+                <ai-table-icon [config]="groupCell.collapsedIcon"></ai-table-icon>
+            }
+            <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
+        }
+    `,
+                    imports: [CommonModule, AITableIcon, AITableFieldStat],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableFillHandle {
+    constructor() {
+        this.config = input.required();
+        this.showFillHandle = computed(() => {
+            const { aiTable, readonly } = this.config();
+            const selection = aiTable.selection();
+            const hasSelectedCells = selection.selectedCells.size > 0;
+            const isEditingCell = !!aiTable.editingCell()?.path;
+            return hasSelectedCells && !readonly && !isEditingCell;
+        });
+        this.handleConfig = computed(() => {
+            const { aiTable, coordinate } = this.config();
+            const selectedCells = Array.from(aiTable.selection().selectedCells);
+            const lastCell = selectedCells[selectedCells.length - 1];
+            const [recordId, fieldId] = lastCell.split(':');
+            const columnIndex = aiTable.context.visibleColumnsIndexMap().get(fieldId);
+            const columnOffset = coordinate.getColumnOffset(columnIndex);
+            const columnWidth = coordinate.getColumnWidth(columnIndex);
+            const rowIndex = aiTable.context.visibleRowsIndexMap().get(recordId);
+            const rowOffset = coordinate.getRowOffset(rowIndex);
+            const width = 6;
+            const height = 6;
+            const [expandRecordId, expandFieldId] = aiTable.expendCell()?.path || [null, null];
+            const cellHeight = expandRecordId === recordId && expandFieldId === fieldId && aiTable.expendCell()?.height
+                ? aiTable.expendCell()?.height
+                    ? aiTable.expendCell().height + AI_TABLE_CELL_LINE_BORDER
+                    : AI_TABLE_ROW_HEIGHT
+                : AI_TABLE_ROW_HEIGHT;
+            return {
+                x: columnOffset + columnWidth - width / 2 + AI_TABLE_OFFSET,
+                y: rowOffset + cellHeight - height + AI_TABLE_CELL_BORDER + AI_TABLE_OFFSET,
+                width,
+                height,
+                fill: Colors.primary,
+                stroke: Colors.white,
+                strokeWidth: 2,
+                zIndex: 20,
+                name: generateTargetName({
+                    targetName: AI_TABLE_FILL_HANDLE,
+                    fieldId,
+                    recordId
+                })
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        @if (showFillHandle()) {
+            <ko-rect [config]="handleConfig()"></ko-rect>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-fill-handle',
+                    template: `
+        @if (showFillHandle()) {
+            <ko-rect [config]="handleConfig()"></ko-rect>
+        }
+    `,
+                    imports: [KoShape]
+                }]
+        }] });
+
+class AITableCoverCellEntry {
+    constructor() {
+        this.config = input.required();
+        this.onlyDisplayBorder = input(false);
+        this.componentMap = {};
+        this.groupConfig = computed(() => {
+            return {
+                x: this.coverCellConfig()?.x,
+                y: this.coverCellConfig()?.y,
+                listening: true
+            };
+        });
+        this.coverCellConfig = computed(() => {
+            const { aiTable, coordinate, references, readonly, actions } = this.config();
+            const coverCell = this.coverCell();
+            if (!coverCell) {
+                return;
+            }
+            const { field, recordId, isExpand } = coverCell;
+            const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
+            const fieldModel = FieldModelMap[field.type];
+            const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
+            const { rowHeight, columnCount, rowCount } = coordinate;
+            const columnIndex = aiTable.context?.visibleColumnsIndexMap().get(field._id) ?? 0;
+            const rowIndex = aiTable.context?.visibleRowsIndexMap().get(recordId) ?? 0;
+            const row = aiTable.context?.linearRows()[rowIndex];
+            const depth = row?.depth ?? 0;
+            const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
+            const columnWidth = coordinate.getColumnWidth(columnIndex);
+            const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
+            const isGroupAndFirstColumn = depth > 0 && columnIndex === 0;
+            const { width, offset } = getCellHorizontalPosition({
+                columnIndex,
+                columnWidth: isGroupAndFirstColumn ? columnWidth - AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE : columnWidth,
+                columnCount,
+                depth
+            });
+            let realX = x + offset;
+            if (isGroupAndFirstColumn) {
+                realX += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
+            }
+            const style = {
+                textAlign: DEFAULT_TEXT_ALIGN_LEFT
+            };
+            const textAlign = style.textAlign;
+            const renderX = textAlign === DEFAULT_TEXT_ALIGN_RIGHT
+                ? columnWidth - AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET
+                : AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET;
+            const renderY = 0 - AI_TABLE_OFFSET * 2;
+            const result = {
+                field,
+                recordId,
+                aiTable,
+                coordinate,
+                x: realX,
+                y,
+                readonly,
+                actions,
+                isExpand,
+                render: {
+                    aiTable,
+                    recordId,
+                    field,
+                    isActive: isSelectedField(field._id, aiTable),
+                    x: renderX,
+                    y: renderY,
+                    columnWidth: width,
+                    rowHeight,
+                    cellValue,
+                    transformValue,
+                    style,
+                    references
+                }
+            };
+            return result;
+        });
+        this.coverCell = computed(() => getCoverCell(this.config().aiTable));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCoverCellEntry, isStandalone: true, selector: "ai-table-cover-cell-entry", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @if (coverCell()) {
+            <ko-group #rootGroup [config]="groupConfig()">
+                <ng-container
+                    *ngComponentOutlet="
+                        coverCell()!.renderComponentDefinition;
+                        inputs: { config: coverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
+                    "
+                >
+                </ng-container>
+            </ko-group>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-cover-cell-entry',
+                    template: `
+        @if (coverCell()) {
+            <ko-group #rootGroup [config]="groupConfig()">
+                <ng-container
+                    *ngComponentOutlet="
+                        coverCell()!.renderComponentDefinition;
+                        inputs: { config: coverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
+                    "
+                >
+                </ng-container>
+            </ko-group>
+        }
+    `,
+                    imports: [KoContainer, CommonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
 class AITableFieldStats {
     constructor() {
         this.config = input.required();
@@ -9426,6 +9951,14 @@ class AITableRenderer {
         this.scrollTotalWidth = computed(() => {
             return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         });
+        this.frozenCommonGroupConfig = computed(() => {
+            return {
+                clipX: 0,
+                clipY: AI_TABLE_FIELD_HEAD_HEIGHT,
+                clipWidth: this.frozenAreaWidth() + AI_TABLE_SHADOW_DEFAULT_WIDTH,
+                clipHeight: this.gridContainerHeight()
+            };
+        });
         this.commonGroupConfig = computed(() => {
             return {
                 clipX: this.frozenAreaWidth() + 1,
@@ -9525,11 +10058,32 @@ class AITableRenderer {
                 ...this.columnHeadFieldConfig(),
                 width: this.cellGroupClipWidth(),
                 x: this.frozenAreaWidth(),
-                y: AI_TABLE_OFFSET,
+                y: 0,
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
                 isHoverStatContainer: this.isHoverStatContainer()
             };
         });
+        this.xIsScroll = computed(() => {
+            return this.scrollState().scrollLeft > 0;
+        });
+        this.statShadowConfig = computed(() => {
+            return {
+                width: 8,
+                x: this.frozenAreaWidth() + 1,
+                y: AI_TABLE_OFFSET,
+                height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
+                visible: this.xIsScroll()
+            };
+        });
+        this.fieldHeadShadowConfig = computed(() => {
+            return {
+                width: AI_TABLE_SHADOW_DEFAULT_WIDTH,
+                x: this.frozenAreaWidth() + 1,
+                y: AI_TABLE_OFFSET,
+                height: AI_TABLE_FIELD_HEAD_HEIGHT,
+                visible: this.xIsScroll()
+            };
+        });
         this.columnFieldStatsBgConfig = computed(() => {
             return {
                 x: 0,
@@ -9550,7 +10104,7 @@ class AITableRenderer {
                 ...this.columnHeadFieldConfig(),
                 width: this.frozenAreaWidth(),
                 x: 0,
-                y: AI_TABLE_OFFSET,
+                y: 0,
                 columnStartIndex: 0,
                 columnStopIndex: this.coordinate().frozenColumnCount - 1,
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
@@ -9599,13 +10153,16 @@ class AITableRenderer {
             const { aiTable } = this.config();
             const expandCellPath = aiTable.expendCell()?.path;
             if (expandCellPath) {
-                const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, expandCellPath);
-                const isFrozenColumn = columnIndex < aiTable.context.frozenColumnCount();
-                if (isFrozenColumn) {
-                    frozenExpandCellBorder = true;
-                }
-                else {
-                    expandCellBorder = true;
+                const cellIndex = AITable.getCellIndex(aiTable, expandCellPath);
+                if (cellIndex) {
+                    const { columnIndex } = cellIndex;
+                    const isFrozenColumn = columnIndex < aiTable.context.frozenColumnCount();
+                    if (isFrozenColumn) {
+                        frozenExpandCellBorder = true;
+                    }
+                    else {
+                        expandCellBorder = true;
+                    }
                 }
             }
             return {
@@ -9642,7 +10199,7 @@ class AITableRenderer {
         this.isHoverStatContainer.set(isHover);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                @if (!hiddenIndexColumn()) {\n                    <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                }\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-field-shadow [config]=\"config()\"></ai-table-frozen-field-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-frozen-field-shadow [config]=\"columnFieldStatsConfig()\" position=\"fieldStats\"></ai-table-frozen-field-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenFieldShadow, selector: "ai-table-frozen-field-shadow", inputs: ["config", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }, { kind: "component", type: AITableGroups, selector: "ai-table-groups", inputs: ["config"] }, { kind: "component", type: AITableShadow, selector: "ai-table-shadow", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -9663,8 +10220,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableFillHandle,
                         AITableFieldStats,
                         AITableBackground,
-                        AITableFrozenFieldShadow
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                @if (!hiddenIndexColumn()) {\n                    <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                }\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-field-shadow [config]=\"config()\"></ai-table-frozen-field-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-frozen-field-shadow [config]=\"columnFieldStatsConfig()\" position=\"fieldStats\"></ai-table-frozen-field-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+                        AITableFrozenGroups,
+                        AITableGroups,
+                        AITableShadow,
+                        AITableFrozenGroups
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
 class AITableCellRate extends CoverCellBase {
@@ -10575,12 +11135,15 @@ function performFill(aiTable, sourceCells, mouseUpRecordId, actions) {
         targetStartRowIndex = selectedFirstRowIndex;
         targetEndRowIndex = sourceStartRowIndex - 1;
     }
-    const sourceRowCount = sourceEndRowIndex - sourceStartRowIndex + 1;
     const sourceRows = [];
     const linearRows = aiTable.context.linearRows();
     for (let i = sourceStartRowIndex; i <= sourceEndRowIndex; i++) {
-        sourceRows.push(linearRows[i]._id);
+        const row = linearRows[i];
+        if (row.type === AITableRowType.record) {
+            sourceRows.push(row._id);
+        }
     }
+    const sourceRowCount = sourceRows.length;
     const updateData = [];
     const fields = AITable.getVisibleFields(aiTable);
     const visibleColumnsIndexMap = aiTable.context.visibleColumnsIndexMap();
@@ -10593,17 +11156,44 @@ function performFill(aiTable, sourceCells, mouseUpRecordId, actions) {
         if (isSystemField(field)) {
             continue;
         }
-        for (let rowIndex = targetStartRowIndex; rowIndex <= targetEndRowIndex; rowIndex++) {
-            const targetRecordId = linearRows[rowIndex]._id;
-            const relativeRowIndex = direction === 'downward' ? rowIndex - targetStartRowIndex : targetEndRowIndex - rowIndex;
-            const mod = relativeRowIndex % sourceRowCount;
-            const sourceRowIndex = direction === 'downward' ? mod : sourceRowCount - 1 - mod;
-            const sourceRecordId = sourceRows[sourceRowIndex];
-            const sourceValue = recordsMap[sourceRecordId]?.values[fieldId];
-            updateData.push({
-                path: [targetRecordId, fieldId],
-                value: sourceValue
-            });
+        if (direction === 'downward') {
+            let sourceRowIndexPointer = 0;
+            for (let rowIndex = targetStartRowIndex; rowIndex <= targetEndRowIndex; rowIndex++) {
+                const row = linearRows[rowIndex];
+                if (row.type === AITableRowType.record) {
+                    const targetRecordId = linearRows[rowIndex]._id;
+                    const mod = sourceRowIndexPointer % sourceRowCount;
+                    const sourceRecordId = sourceRows[mod];
+                    const sourceValue = recordsMap[sourceRecordId]?.values[fieldId];
+                    updateData.push({
+                        path: [targetRecordId, fieldId],
+                        value: sourceValue
+                    });
+                    sourceRowIndexPointer++;
+                }
+            }
+        }
+        else {
+            let sourceRowIndexPointer = sourceRowCount - 1;
+            for (let rowIndex = targetEndRowIndex; rowIndex >= targetStartRowIndex; rowIndex--) {
+                const row = linearRows[rowIndex];
+                if (row.type === AITableRowType.record) {
+                    const targetRecordId = linearRows[rowIndex]._id;
+                    const mod = sourceRowIndexPointer % sourceRowCount;
+                    const sourceRecordId = sourceRows[mod];
+                    const sourceValue = recordsMap[sourceRecordId]?.values[fieldId];
+                    updateData.push({
+                        path: [targetRecordId, fieldId],
+                        value: sourceValue
+                    });
+                    if (sourceRowIndexPointer <= 0) {
+                        sourceRowIndexPointer = sourceRowCount - 1;
+                    }
+                    else {
+                        sourceRowIndexPointer--;
+                    }
+                }
+            }
         }
     }
     if (updateData.length > 0) {
@@ -11543,6 +12133,7 @@ class AITableGridBase {
         this.aiMaxSelectOptions = input();
         this.aiReferences = input.required();
         this.aiBuildRenderDataFn = input();
+        this.aiBuildGroupLinearRowsFn = input();
         this.aiGetI18nTextByKey = input();
         this.aiKeywords = input();
         this.aiFrozenColumnCountFn = input();
@@ -11562,6 +12153,7 @@ class AITableGridBase {
         this.aiMoveRecords = output();
         this.aiClick = output();
         this.aiDbClick = output();
+        this.aiRowGroupCollapseClick = output();
         this.fieldMenus = computed(() => {
             const fieldMenusFn = this.aiFieldConfig()?.fieldMenus;
             if (fieldMenusFn && this.aiTable) {
@@ -11658,7 +12250,7 @@ class AITableGridBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiFieldsSizeMap: { classPropertyName: "aiFieldsSizeMap", publicName: "aiFieldsSizeMap", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiFieldsSizeMap: "aiFieldsSizeMapChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiFieldsSizeMap: { classPropertyName: "aiFieldsSizeMap", publicName: "aiFieldsSizeMap", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiFieldsSizeMap: "aiFieldsSizeMapChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridBase, decorators: [{
             type: Component,
@@ -11684,7 +12276,7 @@ class AITableDomGrid extends AITableGridBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError", "thySizeChange"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyValue", "currentValue", "hasHalf", "thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyValueChange", "currentValueChange", "hasHalfChange", "thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError", "thySizeChange"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDomGrid, decorators: [{
             type: Component,
@@ -12217,11 +12809,7 @@ class AITableDragComponent {
                     this.setAuxiliaryLineStyles({
                         top: `${nextColumnStartY - scrollPosition.y}px`
                     });
-                    this.draggedData = {
-                        type: DragType.record,
-                        recordIds: drag.sourceIds,
-                        targetIndex: targetRowIndex + 1
-                    };
+                    this.setDragData(DragType.record, drag.sourceIds, targetRowIndex + 1);
                     return;
                 }
                 this.setAuxiliaryLineStyles({
@@ -12230,11 +12818,7 @@ class AITableDragComponent {
                     top: `${lineTop}px`,
                     left: `${AI_TABLE_ROW_DRAG_ICON_WIDTH}px`
                 });
-                this.draggedData = {
-                    type: DragType.record,
-                    recordIds: drag.sourceIds,
-                    targetIndex: targetRowIndex
-                };
+                this.setDragData(DragType.record, drag.sourceIds, targetRowIndex);
             }
             else {
                 this.resetAuxiliaryLine();
@@ -12273,6 +12857,21 @@ class AITableDragComponent {
             }
         });
     }
+    setDragData(type, sourceIds, targetIndex) {
+        const aiTable = this.aiTableGridEventService.aiTable;
+        const linearRows = aiTable.context.linearRows();
+        this.draggedData = {
+            type,
+            recordIds: sourceIds,
+            targetIndex
+        };
+        if (targetIndex === 0) {
+            this.draggedData.beforeRecordId = linearRows[0]._id;
+        }
+        else {
+            this.draggedData.afterRecordId = linearRows[targetIndex - 1]._id;
+        }
+    }
     handleDragEnd() {
         if (this.draggedData) {
             this.dragEnd.emit({ ...this.draggedData });
@@ -12380,7 +12979,7 @@ class AITableGrid extends AITableGridBase {
         this.verticalBarRef = viewChild('verticalBar');
         this.horizontalBarRef = viewChild('horizontalBar');
         this.linearRows = computed(() => {
-            return buildGridLinearRows(this.gridData().records, !this.aiReadonly());
+            return buildGridLinearRows(this.gridData().records, !this.aiReadonly(), this.aiTable, this.aiBuildGroupLinearRowsFn?.());
         });
         this.domToolTips = computed(() => {
             const scrollTop = this.aiTable.context.scrollState().scrollTop;
@@ -12440,7 +13039,7 @@ class AITableGrid extends AITableGridBase {
                 columnCount: fields.length,
                 rowInitSize: AI_TABLE_FIELD_HEAD_HEIGHT,
                 columnInitSize: this.aiTable.context.rowHeadWidth(),
-                rowIndicesSizeMap: {},
+                rowIndicesSizeMap: this.rowIndicesMap(),
                 columnIndicesSizeMap: getColumnIndicesSizeMap(this.aiTable, fields),
                 frozenColumnCount: this.frozenColumnCount()
             });
@@ -12478,6 +13077,15 @@ class AITableGrid extends AITableGridBase {
             };
         });
         // rowAddFilterTooltip = getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip);
+        this.rowIndicesMap = computed(() => {
+            const rowIndicesMap = {};
+            this.linearRows().forEach((row, index) => {
+                if (row.type === AITableRowType.blank) {
+                    rowIndicesMap[index] = 0;
+                }
+            });
+            return rowIndicesMap;
+        });
         this.actions = {
             updateFieldValues: (data) => {
                 this.aiUpdateFieldValues.emit(data);
@@ -12635,7 +13243,7 @@ class AITableGrid extends AITableGridBase {
         let matchedCells = new Set();
         if (keywords) {
             const references = this.aiReferences();
-            this.aiTable.records().forEach((record) => {
+            this.aiTable.gridData().records.forEach((record) => {
                 this.aiTable.fields().forEach((field) => {
                     if (isCellMatchKeywords(this.aiTable, field, record._id, keywords, references)) {
                         matchedCells.add(`${record._id}:${field._id}`);
@@ -12873,7 +13481,9 @@ class AITableGrid extends AITableGridBase {
         switch (targetName) {
             case AI_TABLE_ROW_ADD_BUTTON: {
                 clearCoverCell(this.aiTable);
-                this.addRecord();
+                this.addRecord({
+                    forGroupId: targetNameDetail.source
+                });
                 const { isCanFullRender, offsetY } = this.coordinate().getAddRowButtonIsFullRenderInfo(this.aiTable);
                 if (!isCanFullRender) {
                     this.scrollAction({
@@ -12939,6 +13549,13 @@ class AITableGrid extends AITableGridBase {
                     }
                 }
                 break;
+            case AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON: {
+                const groupId = targetNameDetail.source;
+                if (groupId) {
+                    this.aiRowGroupCollapseClick.emit(groupId);
+                }
+                break;
+            }
         }
         return;
     }
@@ -13041,14 +13658,46 @@ class AITableGrid extends AITableGridBase {
         });
         this.resizeObserver.observe(this.containerElement());
     }
+    getNextRecordRowId(currentRowIndex, event) {
+        const linearRows = this.aiTable.context.linearRows();
+        if (event.key === 'ArrowUp') {
+            let nextRowIndex = currentRowIndex - 1;
+            let findFlag = false;
+            while (nextRowIndex > -1 && !findFlag) {
+                const row = linearRows[nextRowIndex];
+                if (row.type === AITableRowType.record) {
+                    findFlag = true;
+                }
+                else {
+                    nextRowIndex--;
+                }
+            }
+            return findFlag ? linearRows[nextRowIndex]._id : null;
+        }
+        if (event.key === 'ArrowDown') {
+            let nextRowIndex = currentRowIndex + 1;
+            let findFlag = false;
+            while (nextRowIndex < linearRows.length && !findFlag) {
+                const row = linearRows[nextRowIndex];
+                if (row.type === AITableRowType.record) {
+                    findFlag = true;
+                }
+                else {
+                    nextRowIndex++;
+                }
+            }
+            return findFlag ? linearRows[nextRowIndex]._id : null;
+        }
+        return null;
+    }
     getNextCell(currentCell, event) {
         const { rowIndex, columnIndex } = AITable.getCellIndex(this.aiTable, currentCell) || {};
         let nextCellPath = null;
-        if (event.key === 'ArrowUp' && rowIndex) {
-            nextCellPath = [this.aiTable.gridData().records[rowIndex - 1]._id, currentCell[1]];
-        }
-        if (event.key === 'ArrowDown' && rowIndex < this.gridData().records.length - 1) {
-            nextCellPath = [this.aiTable.gridData().records[rowIndex + 1]._id, currentCell[1]];
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            const nextRowId = this.getNextRecordRowId(rowIndex, event);
+            if (nextRowId) {
+                nextCellPath = [nextRowId, currentCell[1]];
+            }
         }
         if (event.key === 'ArrowLeft' && columnIndex) {
             nextCellPath = [currentCell[0], this.aiTable.gridData().fields[columnIndex - 1]._id];
@@ -13065,6 +13714,14 @@ class AITableGrid extends AITableGridBase {
             if (this.aiReadonly()) {
                 return;
             }
+            const focused = document.activeElement;
+            if (!focused) {
+                return;
+            }
+            const hasAITableGrid = focused.querySelector('ai-table-grid') !== null;
+            if (!hasAITableGrid) {
+                return;
+            }
             const hasSelectedCells = this.aiTable.selection().selectedCells.size > 0;
             if (!hasSelectedCells) {
                 return;
@@ -13078,7 +13735,10 @@ class AITableGrid extends AITableGridBase {
             if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
                 return;
             }
-            event.preventDefault();
+            const hasContentEditable = target.contentEditable === 'true';
+            if (hasContentEditable) {
+                return;
+            }
             const isCopyOrPaste = (event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v');
             const isDeleteOrBackspace = event.key === 'Backspace' || event.key === 'Delete';
             const isDirectionKey = event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight';
@@ -13119,6 +13779,7 @@ class AITableGrid extends AITableGridBase {
                         }
                     }
                 }
+                event.preventDefault();
                 return;
             }
             if (isCopyOrPaste) {
@@ -13128,10 +13789,12 @@ class AITableGrid extends AITableGridBase {
                 else if (event.key === 'v') {
                     this.pasteCells();
                 }
+                event.preventDefault();
                 return;
             }
             if (isDeleteOrBackspace) {
                 clearCells(this.aiTable, this.actions);
+                event.preventDefault();
                 return;
             }
             // quick enter cell editor
@@ -13152,6 +13815,7 @@ class AITableGrid extends AITableGridBase {
                         this.aiUpdateFieldValues.emit(value);
                     }
                 });
+                event.preventDefault();
             }
         });
     }
@@ -13228,10 +13892,11 @@ class AITableGrid extends AITableGridBase {
                 }
                 break;
             case DragType.record:
-                if (data.recordIds && isNumber(data.targetIndex)) {
+                if (data.recordIds && (data.beforeRecordId || data.afterRecordId)) {
                     this.aiMoveRecords.emit({
-                        recordIds: Array.from(data.recordIds).map((id) => [id]),
-                        newPath: [data.targetIndex]
+                        recordIds: Array.from(data.recordIds),
+                        beforeRecordId: data.beforeRecordId,
+                        afterRecordId: data.afterRecordId
                     });
                 }
                 return;
@@ -13326,5 +13991,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenFieldShadow, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_FIELD_ITEM_HEIGHT, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_ITEM_MARGIN_RIGHT, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AttachmentField, AttachmentPath, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmptyOrNot, isMac, isMeetFilter, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, scrollToMatchedCell, selectCells, selectField, setActiveCell, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenGroups, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGroups, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableShadow, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_FIELD_ITEM_HEIGHT, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_ITEM_MARGIN_RIGHT, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_GROUP_MAX_LEVEL, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON, AI_TABLE_ROW_GROUP_OFFSET, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_SHADOW_DEFAULT_WIDTH, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AngleRightPath, AttachmentField, AttachmentPath, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getGroupLastRecordIndex, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmptyOrNot, isMac, isMeetFilter, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, scrollToMatchedCell, selectCells, selectField, setActiveCell, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map