@ai-table/grid 0.1.8 → 0.1.10

package/fesm2022/ai-table-grid.mjs

@@ -25,11 +25,11 @@ import { Transformer } from 'konva/lib/shapes/Transformer';
 import { Wedge } from 'konva/lib/shapes/Wedge';
 import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopoverRef, ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
-import { AITableFieldType, AITableRowColumnType, isUndefinedOrNull, AITableSelectOptionStyle, DragType, isEmpty, AITableFilterOperation, AttachmentFieldBase, DateFieldBase, isDateValid, SelectFieldBase, LinkFieldBase, MemberFieldBase, NumberFieldBase, ProgressFieldBase, RateFieldBase, RichTextFieldBase, TextFieldBase, FieldModelBaseMap } from '@ai-table/utils';
+import { AITableFieldGroup, AITableFieldType, AITableRowColumnType, DragType, isUndefinedOrNull, isUrl, AITableSelectOptionStyle, isEmpty, AITableFilterOperation, AttachmentFieldBase, DateFieldBase, isDateValid, SelectFieldBase, LinkFieldBase, MemberFieldBase, NumberFieldBase, ProgressFieldBase, RateFieldBase, RichTextFieldBase, TextFieldBase, FieldModelBaseMap } from '@ai-table/utils';
 import ObjectID from 'bson-objectid';
 import { customAlphabet } from 'nanoid';
 import * as _ from 'lodash';
-import { isNumber, includes, values, isString } from 'lodash';
+import { isNumber, includes, values, isString, isObject } from 'lodash';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
@@ -38,7 +38,7 @@ import { ThyStopPropagationDirective, ThyAutofocusDirective, ThyEnterDirective,
 import * as i3 from 'ngx-tethys/input';
 import { ThyInputDirective, ThyInputGroup, ThyInputModule, ThyInputCount } from 'ngx-tethys/input';
 import * as i2$1 from 'ngx-tethys/tooltip';
-import { ThyTooltipModule } from 'ngx-tethys/tooltip';
+import { ThyTooltipModule, ThyTooltipDirective } from 'ngx-tethys/tooltip';
 import { ThyAction } from 'ngx-tethys/action';
 import { ThyFlexibleTextModule, ThyFlexibleText } from 'ngx-tethys/flexible-text';
 import { ThyButton } from 'ngx-tethys/button';
@@ -53,9 +53,9 @@ import { ThySelect, ThySelectModule } from 'ngx-tethys/select';
 import { ThyDot } from 'ngx-tethys/dot';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { ThyTag } from 'ngx-tethys/tag';
-import { ThyDropdownMenuComponent, ThyDropdownDirective, ThyDropdownMenuItemDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownAbstractMenu, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
+import { ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownAbstractMenu, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
 import { ThySwitch } from 'ngx-tethys/switch';
-import { of, Subject, fromEvent, debounceTime, mergeWith, filter } from 'rxjs';
+import { of, Subject, fromEvent, debounceTime, mergeWith, animationFrames, filter } from 'rxjs';
 import { ThyDivider } from 'ngx-tethys/divider';
 import * as i4 from 'ngx-tethys/avatar';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
@@ -67,8 +67,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromUnixTime, subDays } from 'date-fns';
 import { isArray, TinyDate, helpers } from 'ngx-tethys/util';
 import { DEFAULT_COLORS } from 'ngx-tethys/color-picker';
+import { isKeyHotkey } from 'is-hotkey';
 import { LRUCache } from 'lru-cache';
 import GraphemeSplitter from 'grapheme-splitter';
+import { takeWhile, map } from 'rxjs/operators';
 
 const KO_CONTAINER_TOKEN = new InjectionToken('KO_CONTAINER_TOKEN');
 
@@ -529,6 +531,9 @@ var AITableGridI18nKey;
     AITableGridI18nKey["fieldTypeCreatedAt"] = "fieldTypeCreatedAt";
     AITableGridI18nKey["fieldTypeUpdatedBy"] = "fieldTypeUpdatedBy";
     AITableGridI18nKey["fieldTypeUpdatedAt"] = "fieldTypeUpdatedAt";
+    AITableGridI18nKey["fieldGroupBase"] = "fieldGroupBase";
+    AITableGridI18nKey["fieldGroupAdvanced"] = "fieldGroupAdvanced";
+    AITableGridI18nKey["rowAddFilterTooltip"] = "rowAddFilterTooltip";
 })(AITableGridI18nKey || (AITableGridI18nKey = {}));
 const AITableI18nText = {
     [AITableGridI18nKey.dataPickerPlaceholder]: '选择日期',
@@ -566,7 +571,10 @@ const AITableI18nText = {
     [AITableGridI18nKey.fieldTypeCreatedBy]: '创建人',
     [AITableGridI18nKey.fieldTypeCreatedAt]: '创建时间',
     [AITableGridI18nKey.fieldTypeUpdatedBy]: '更新人',
-    [AITableGridI18nKey.fieldTypeUpdatedAt]: '更新时间'
+    [AITableGridI18nKey.fieldTypeUpdatedAt]: '更新时间',
+    [AITableGridI18nKey.fieldGroupBase]: '基础',
+    [AITableGridI18nKey.fieldGroupAdvanced]: '高级',
+    [AITableGridI18nKey.rowAddFilterTooltip]: '本记录已被筛选过滤，点击该记录以外位置将被隐藏'
 };
 const getDefaultI18nTextByKey = (key) => {
     return AITableI18nText[key] || key;
@@ -586,105 +594,124 @@ const AI_TABLE_FIELD_MINI_WIDTH = 140;
 const AI_TABLE_FIELD_MIN_WIDTH = 160;
 const AI_TABLE_FIELD_MIDDLE_WIDTH = 200;
 const AI_TABLE_FIELD_MAX_WIDTH = 300;
-function getFieldOptions(aiTable) {
-    return [
-        {
-            type: AITableFieldType.text,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeText),
-            icon: 'font',
-            width: AI_TABLE_FIELD_MAX_WIDTH
-        },
-        {
-            type: AITableFieldType.richText,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeRichText),
-            icon: 'multiline-text',
-            width: AI_TABLE_FIELD_MAX_WIDTH
-        },
-        {
-            type: AITableFieldType.select,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeSelect),
-            icon: 'check-circle',
-            width: AI_TABLE_FIELD_MIN_WIDTH
-        },
-        {
-            type: AITableFieldType.select,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeMultiSelect),
-            icon: 'list-check',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH,
-            settings: {
-                is_multiple: true
-            }
-        },
-        {
-            type: AITableFieldType.number,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeNumber),
-            icon: 'hashtag',
-            width: AI_TABLE_FIELD_MINI_WIDTH
-        },
-        {
-            type: AITableFieldType.date,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeDate),
-            icon: 'calendar',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        },
-        {
-            type: AITableFieldType.member,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeMember),
-            icon: 'user',
-            width: AI_TABLE_FIELD_MIN_WIDTH,
-            settings: {
-                is_multiple: false
-            }
-        },
-        {
-            type: AITableFieldType.progress,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeProgress),
-            icon: 'progress',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        },
-        {
-            type: AITableFieldType.rate,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeRate),
-            icon: 'star-circle',
-            width: AI_TABLE_FIELD_MIN_WIDTH
-        },
-        {
-            type: AITableFieldType.link,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeLink),
-            icon: 'link-insert',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        },
-        {
-            type: AITableFieldType.attachment,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeAttachment),
-            icon: 'attachment',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        },
-        {
-            type: AITableFieldType.createdBy,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeCreatedBy),
-            icon: 'user',
-            width: AI_TABLE_FIELD_MIN_WIDTH
-        },
-        {
-            type: AITableFieldType.createdAt,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeCreatedAt),
-            icon: 'calendar',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
+const defaultFieldOptions = [
+    {
+        type: AITableFieldType.text,
+        name: AITableGridI18nKey.fieldTypeText,
+        icon: 'font',
+        width: AI_TABLE_FIELD_MAX_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.richText,
+        name: AITableGridI18nKey.fieldTypeRichText,
+        icon: 'multiline-text',
+        width: AI_TABLE_FIELD_MAX_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.select,
+        name: AITableGridI18nKey.fieldTypeSelect,
+        icon: 'check-circle',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.select,
+        name: AITableGridI18nKey.fieldTypeMultiSelect,
+        icon: 'list-check',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        settings: {
+            is_multiple: true
         },
-        {
-            type: AITableFieldType.updatedBy,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeUpdatedBy),
-            icon: 'user',
-            width: AI_TABLE_FIELD_MIN_WIDTH
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.number,
+        name: AITableGridI18nKey.fieldTypeNumber,
+        icon: 'hashtag',
+        width: AI_TABLE_FIELD_MINI_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.date,
+        name: AITableGridI18nKey.fieldTypeDate,
+        icon: 'calendar',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.member,
+        name: AITableGridI18nKey.fieldTypeMember,
+        icon: 'user',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        settings: {
+            is_multiple: false
         },
-        {
-            type: AITableFieldType.updatedAt,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeUpdatedAt),
-            icon: 'calendar',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        }
-    ];
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.progress,
+        name: AITableGridI18nKey.fieldTypeProgress,
+        icon: 'progress',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.rate,
+        name: AITableGridI18nKey.fieldTypeRate,
+        icon: 'star-circle',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.link,
+        name: AITableGridI18nKey.fieldTypeLink,
+        icon: 'link-insert',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.attachment,
+        name: AITableGridI18nKey.fieldTypeAttachment,
+        icon: 'attachment',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.createdBy,
+        name: AITableGridI18nKey.fieldTypeCreatedBy,
+        icon: 'user',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        group: AITableFieldGroup.advanced
+    },
+    {
+        type: AITableFieldType.createdAt,
+        name: AITableGridI18nKey.fieldTypeCreatedAt,
+        icon: 'calendar',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.advanced
+    },
+    {
+        type: AITableFieldType.updatedBy,
+        name: AITableGridI18nKey.fieldTypeUpdatedBy,
+        icon: 'user',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        group: AITableFieldGroup.advanced
+    },
+    {
+        type: AITableFieldType.updatedAt,
+        name: AITableGridI18nKey.fieldTypeUpdatedAt,
+        icon: 'calendar',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.advanced
+    }
+];
+function getFieldOptions(aiTable) {
+    return aiTable.context?.fieldOptions();
+}
+function getFieldOptionMap(aiTable) {
+    return aiTable.context?.fieldOptionMap();
 }
 
 /**
@@ -980,6 +1007,9 @@ const AITable = {
             return true;
         }
         return false;
+    },
+    getDragState(aiTable) {
+        return aiTable.dragState?.()?.type || DragType.none;
     }
 };
 
@@ -1120,6 +1150,7 @@ function createAITable(records, fields, gridData) {
             selectedFields: new Set(),
             selectedCells: new Set(),
             activeCell: null,
+            expandCell: null,
             selectAllState: AITableSelectAllState.none
         }),
         keywordsMatchedCells: signal(new Set()),
@@ -1136,7 +1167,11 @@ function createAITable(records, fields, gridData) {
             }, {});
         }),
         recordsWillHidden: signal([]),
-        recordsWillMove: signal([])
+        recordsWillMove: signal([]),
+        dragState: signal({
+            type: DragType.none,
+            sourceIds: new Set()
+        })
     };
     return aiTable;
 }
@@ -1292,7 +1327,7 @@ const AITableQueries = {
 
 class RendererContext {
     constructor(options) {
-        const { rowHeadWidth, linearRows, pointPosition, scrollState, visibleColumnsIndexMap, visibleRowsIndexMap, frozenColumnCount, references, aiFieldConfig, scrollAction, maxFields, maxRecords } = options;
+        const { rowHeadWidth, linearRows, pointPosition, scrollState, visibleColumnsIndexMap, visibleRowsIndexMap, frozenColumnCount, references, aiFieldConfig, scrollAction, maxFields, maxRecords, fieldOptions, fieldOptionMap } = options;
         this.rowHeadWidth = rowHeadWidth;
         this.linearRows = linearRows;
         this.pointPosition = pointPosition;
@@ -1305,6 +1340,8 @@ class RendererContext {
         this.aiFieldConfig = aiFieldConfig;
         this.maxFields = maxFields;
         this.maxRecords = maxRecords;
+        this.fieldOptions = fieldOptions;
+        this.fieldOptionMap = fieldOptionMap;
     }
     setPointPosition(position) {
         const oldPosition = this.pointPosition();
@@ -1449,7 +1486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-const LINK_URL_REGEX = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
 /**
  * @private
  */
@@ -1460,7 +1496,6 @@ class LinkEditComponent {
         this.text = '';
         this.aiTable = input();
         this.confirm = new EventEmitter();
-        this.URLRegex = LINK_URL_REGEX;
         this.i18nTexts = computed(() => {
             return {
                 linkText: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.linkText),
@@ -1490,6 +1525,10 @@ class LinkEditComponent {
             form.validator.setElementErrorMessage('url', getI18nTextByKey(this.aiTable(), AITableGridI18nKey.linkRequired));
             return;
         }
+        if (this.url && !isUrl(this.url)) {
+            form.validator.setElementErrorMessage('url', getI18nTextByKey(this.aiTable(), AITableGridI18nKey.invalidLinkFormat));
+            return;
+        }
         this.close();
         const text = this.text.trim();
         const url = this.url.trim();
@@ -1497,11 +1536,11 @@ class LinkEditComponent {
         this.confirm.emit(link);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" [pattern]=\"URLRegex\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'link-edit', imports: [FormsModule, ThyStopPropagationDirective, ThyInputDirective, ThyButton, ThyFormSubmitDirective, ThyFormModule], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" [pattern]=\"URLRegex\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
+            args: [{ selector: 'link-edit', imports: [FormsModule, ThyStopPropagationDirective, ThyInputDirective, ThyButton, ThyFormSubmitDirective, ThyFormModule], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ThyPopoverRef }], propDecorators: { url: [{
                 type: Input
             }], text: [{
@@ -1525,13 +1564,10 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         });
     }
     isValidLink(link) {
-        if (!link?.text?.trim()) {
+        if (!link.text) {
             return true;
         }
-        if (!link.url) {
-            return LINK_URL_REGEX.test(link.text);
-        }
-        return true;
+        return isUrl(link.text);
     }
     createLinkValue(link) {
         const text = link?.text?.trim();
@@ -1557,11 +1593,12 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         this.url = this.modelValue?.url ?? '';
     }
     updateValue() {
-        if (!this.isValidLink({ text: this.text, url: this.url ?? '' })) {
+        const linkValue = this.createLinkValue({ text: this.text, url: this.url ?? '' });
+        if (!this.isValidLink(linkValue)) {
             this.notifyService.error(getI18nTextByKey(this.aiTable, AITableGridI18nKey.invalidLinkFormat));
             return;
         }
-        this.modelValue = this.createLinkValue({ text: this.text, url: this.url ?? '' });
+        this.modelValue = linkValue;
         if (!_.isEqual(this.originValue, this.modelValue)) {
             super.update();
             this.originValue = this.modelValue;
@@ -1734,11 +1771,13 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
         this.render2 = inject(Renderer2);
         this.maxHeight = 148;
         this.minHeight = 24;
+        this.isSelectAll = input(false);
     }
     ngAfterViewInit() {
         setTimeout(() => {
             this.updateStyle();
-        });
+            this.handleSelectAll();
+        }, 0);
     }
     updateStyle() {
         const textarea = this.elementRef.nativeElement.querySelector('textarea');
@@ -1751,6 +1790,12 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
             this.render2.setStyle(textarea, 'resize', 'none');
         }
     }
+    handleSelectAll() {
+        if (this.isSelectAll()) {
+            const textarea = this.elementRef.nativeElement.querySelector('textarea');
+            textarea.select();
+        }
+    }
     valueChange() {
         this.updateStyle();
     }
@@ -1759,8 +1804,9 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
         this.closePopover();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TextCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", inputs: { isSelectAll: { classPropertyName: "isSelectAll", publicName: "isSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
         <textarea
+            #textarea
             placeholder=""
             rows="1"
             thyInput
@@ -1778,6 +1824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     selector: 'text-cell-editor',
                     template: `
         <textarea
+            #textarea
             placeholder=""
             rows="1"
             thyInput
@@ -1919,7 +1966,8 @@ class AITableFieldSetting {
             };
         });
         this.fieldOptions = computed(() => {
-            return getFieldOptions(this.aiTable());
+            const fieldOptions = getFieldOptions(this.aiTable());
+            return _.groupBy(fieldOptions, 'group');
         });
         this.aITableFieldType = AITableFieldType;
         this.isMultipleMember = false;
@@ -1938,7 +1986,9 @@ class AITableFieldSetting {
                 fieldType: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldType),
                 allowMultipleMembers: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.allowMultipleMembers),
                 cancel: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.cancel),
-                confirm: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.confirm)
+                confirm: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.confirm),
+                base: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupBase),
+                advanced: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupAdvanced)
             };
         });
     }
@@ -1990,7 +2040,7 @@ class AITableFieldSetting {
         this.thyPopoverRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldSetting, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of fieldOptions(); track $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: (item | fieldIsSameOption: aiEditField())\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n        @for (item of fieldOptions().base; track $index) {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    active: (item | fieldIsSameOption: aiEditField())\n                }\"\n                (click)=\"selectFieldType(item)\"\n            >\n                <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ item.name }}</span>\n            </a>\n        }\n    </thy-dropdown-menu-group>\n\n    <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n        @for (item of fieldOptions().advanced; track $index) {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    active: (item | fieldIsSameOption: aiEditField())\n                }\"\n                (click)=\"selectFieldType(item)\"\n            >\n                <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ item.name }}</span>\n            </a>\n        }\n    </thy-dropdown-menu-group>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldSetting, decorators: [{
             type: Component,
@@ -2003,6 +2053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         ThyInputDirective,
                         ThyUniqueCheckValidator,
                         ThyDropdownMenuComponent,
+                        ThyDropdownMenuGroup,
                         ThyDropdownDirective,
                         ThyDropdownMenuItemDirective,
                         ThyDropdownMenuItemIconDirective,
@@ -2016,7 +2067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableFieldIsSameOptionPipe
                     ], host: {
                         class: 'field-setting d-block pl-5 pr-5 pb-5 pt-4'
-                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of fieldOptions(); track $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: (item | fieldIsSameOption: aiEditField())\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
+                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n        @for (item of fieldOptions().base; track $index) {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    active: (item | fieldIsSameOption: aiEditField())\n                }\"\n                (click)=\"selectFieldType(item)\"\n            >\n                <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ item.name }}</span>\n            </a>\n        }\n    </thy-dropdown-menu-group>\n\n    <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n        @for (item of fieldOptions().advanced; track $index) {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    active: (item | fieldIsSameOption: aiEditField())\n                }\"\n                (click)=\"selectFieldType(item)\"\n            >\n                <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ item.name }}</span>\n            </a>\n        }\n    </thy-dropdown-menu-group>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
         }] });
 
 class AITableGridSelectionService {
@@ -2032,10 +2083,6 @@ class AITableGridSelectionService {
     }
     initialize(aiTable) {
         this.aiTable = aiTable;
-        this.aiTable.dragState = signal({
-            type: DragType.none,
-            sourceIds: new Set()
-        });
     }
     clearSelection() {
         this.aiTable.selection.set({
@@ -2043,12 +2090,19 @@ class AITableGridSelectionService {
             selectedFields: new Set(),
             selectedCells: new Set(),
             activeCell: null,
+            expandCell: null,
             selectAllState: AITableSelectAllState.none
         });
     }
     setActiveCell(activeCell) {
         this.aiTable.selection().activeCell = activeCell;
     }
+    setExpandCell(expandCell) {
+        this.aiTable.selection.set({
+            ...this.aiTable.selection(),
+            expandCell: expandCell
+        });
+    }
     selectField(fieldId) {
         if (this.aiTable.selection().selectedFields.has(fieldId)) {
             return;
@@ -2062,18 +2116,6 @@ class AITableGridSelectionService {
     get selectedRecords() {
         return this.aiTable.selection().selectedRecords;
     }
-    drag(config) {
-        this.aiTable.dragState.set(config);
-    }
-    getDragStateType() {
-        return this.aiTable.dragState?.()?.type;
-    }
-    clearDrag() {
-        this.aiTable.dragState.set({
-            type: DragType.none,
-            sourceIds: new Set()
-        });
-    }
     selectRecord(recordId) {
         if (this.aiTable.selection().selectedRecords.has(recordId)) {
             this.aiTable.selection().selectedRecords.delete(recordId);
@@ -2087,6 +2129,7 @@ class AITableGridSelectionService {
             selectedFields: new Set(),
             selectedCells: new Set(),
             activeCell: null,
+            expandCell: null,
             selectAllState: this.selectAllState()
         });
     }
@@ -2298,6 +2341,11 @@ const AI_TABLE_PROGRESS_BAR_POINTER_WIDTH = 8;
 const AI_TABLE_PROGRESS_TEXT_WIDTH = 46;
 const AI_TABLE_POPOVER_LEFT_OFFSET = 4;
 const AI_TABLE_RATE_MAX = 5;
+const AI_TABLE_SCROLL_BAR_SIZE = 18;
+const AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD = 40;
+const AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD = 40;
+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 MIN_COLUMN_WIDTH = 80;
 const DBL_CLICK_EDIT_TYPE = [
@@ -2360,6 +2408,7 @@ const DepartmentOutlinedPath = `M3 5.5C3 3.567 4.567 2 6.5 2C8.433 2 10 3.567 10
 const AttachmentPath = `M9.1773124,11.8057395 C7.96668709,13.0163648 6.00387566,13.0163648 4.79325035,11.8057395 C3.58262505,10.5951142 3.58262505,8.63230278 4.78926443,7.4257012 L8.27628904,3.87217601 C8.50840068,3.63567937 8.88828274,3.63209333 9.12479868,3.86418566 C9.36131462,4.096278 9.36490066,4.47616006 9.13280833,4.712676 L5.64177849,8.27020561 C4.89978234,9.01220177 4.89978234,10.2152152 5.64177849,10.9572114 C6.38377464,11.6992075 7.5867881,11.6992075 8.32878426,10.9572114 L12.2321177,7.05387799 C13.3493901,5.93660552 13.2780395,4.02707269 12.0410949,2.79012806 C10.8041502,1.55318343 8.8946174,1.4818328 7.77734493,2.59910526 L3.72686067,6.64958953 C2.02034367,8.35610653 2.02835883,11.1329242 3.74721224,12.8517776 C5.46606565,14.570631 8.24288334,14.5786462 9.94940034,12.8721292 L13.5980637,9.22346588 C13.8323782,8.98915131 14.2122772,8.98915131 14.4465918,9.22346588 C14.6809064,9.45778046 14.6809064,9.83767945 14.4465918,10.071994 L10.7979285,13.7206573 C8.62168228,15.8969035 5.08507361,15.8866953 2.8986841,13.7003058 C0.712294592,11.5139163 0.702086332,7.97730759 2.87833253,5.8010614 L6.9288168,1.75057713 C8.52947856,0.149915361 11.1976354,0.249612361 12.889623,1.94159992 C14.5816106,3.63358749 14.6813076,6.30174436 13.0806458,7.90240612 L9.1773124,11.8057395 Z`;
 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 IconPathMap = {};
 
 const DEFAULT_FONT_SIZE = 14;
 const DEFAULT_FONT_FAMILY = '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Helvetica Neue,Noto Sans,Noto Sans CJK SC,Microsoft Yahei,Arial,Hiragino Sans GB,sans-serif';
@@ -3859,6 +3908,18 @@ const castToString = (value) => {
     }
     return typeof value !== 'string' ? String(value) : value;
 };
+// copy from plait
+function isVirtualKey(e) {
+    const isMod = e.ctrlKey || e.metaKey;
+    const isAlt = isKeyHotkey('alt', e);
+    const isShift = isKeyHotkey('shift', e);
+    const isCapsLock = e.key.includes('CapsLock');
+    const isTab = e.key.includes('Tab');
+    const isEsc = e.key.includes('Escape');
+    const isF = e.key.startsWith('F');
+    const isArrow = e.key.includes('Arrow') ? true : false;
+    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
+}
 
 function getPlaceHolderCellsConfigs(options) {
     const { aiTable, coordinate, columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex } = options;
@@ -4273,7 +4334,7 @@ const isCellMatchKeywords = (aiTable, field, recordId, keywords, references) =>
     }
 };
 
-class AITableText {
+class AITableTextComponent {
     constructor() {
         this.config = input.required();
         // @Output() koClick = new EventEmitter<KoEventObject<MouseEvent>>();
@@ -4321,10 +4382,10 @@ class AITableText {
     onMousemove(e) {
         this.koMouseMove.emit(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableText, isStandalone: true, selector: "ai-table-text", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick", koMouseMove: "koMouseMove" }, ngImport: i0, template: ` <ko-text [config]="textConfig()" (koClick)="onClick($event)" (koMousemove)="onMousemove($event)"></ko-text> `, 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: AITableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableTextComponent, isStandalone: true, selector: "ai-table-text", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick", koMouseMove: "koMouseMove" }, ngImport: i0, template: ` <ko-text [config]="textConfig()" (koClick)="onClick($event)" (koMousemove)="onMousemove($event)"></ko-text> `, 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: AITableText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-text',
@@ -5276,9 +5337,27 @@ class Drawer {
 }
 const drawer = new Drawer();
 
-class AITableCellLink {
+class HoverCellComponent extends Component {
     constructor() {
+        super(...arguments);
         this.config = input();
+        this.onlyDisplayBorder = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HoverCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: HoverCellComponent, isStandalone: true, selector: "ai-table-hover-cell", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HoverCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-hover-cell',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableCellLink extends HoverCellComponent {
+    constructor() {
+        super(...arguments);
         this.textOffset = AI_TABLE_CELL_PADDING + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
         this.render = computed(() => this.config()?.render);
         this.transformValue = computed(() => this.render()?.transformValue);
@@ -5336,12 +5415,12 @@ class AITableCellLink {
         const curMousePosition = getMousePosition(aiTable, x, y, coordinate, AITable.getVisibleFields(aiTable), context, targetName);
         handleMouseStyle(AI_TABLE_FIELD_HEAD_MORE, curMousePosition.areaType, coordinate.container);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellLink, isStandalone: true, selector: "ai-table-link", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellLink, isStandalone: true, selector: "ai-table-link", usesInheritance: true, ngImport: i0, template: `
         @if (showLink()) {
             <ai-table-text [config]="textConfig()!" (koClick)="linkClick($event)" (koMouseMove)="linkMouseMove($event)"></ai-table-text>
         }
-    `, isInline: true, dependencies: [{ kind: "component", type: AITableText, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellLink, decorators: [{
             type: Component,
@@ -5352,7 +5431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             <ai-table-text [config]="textConfig()!" (koClick)="linkClick($event)" (koMouseMove)="linkMouseMove($event)"></ai-table-text>
         }
     `,
-                    imports: [AITableText],
+                    imports: [AITableTextComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
@@ -5466,9 +5545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellAttachment {
+class AITableCellAttachment extends HoverCellComponent {
     constructor() {
-        this.config = input();
+        super(...arguments);
         this.attachments = computed(() => {
             const { render, aiTable, field, recordId, readonly } = this.config();
             if (render) {
@@ -5542,8 +5621,8 @@ class AITableCellAttachment {
         });
     }
     static { this.fieldType = AITableFieldType.attachment; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellAttachment, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", usesInheritance: true, ngImport: i0, template: `
         @for (attachment of attachments(); track attachment.attachmentInfo._id) {
             <ko-image [config]="attachment"></ko-image>
         }
@@ -5565,9 +5644,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellRichText {
+class AITableCellRichText extends HoverCellComponent {
     constructor() {
-        this.config = input();
+        super(...arguments);
         this.textConfig = computed(() => {
             const render = this.config()?.render;
             if (render) {
@@ -5627,13 +5706,13 @@ class AITableCellRichText {
         });
     }
     static { this.fieldType = AITableFieldType.richText; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRichText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRichText, isStandalone: true, selector: "ai-table-rich-text", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRichText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRichText, isStandalone: true, selector: "ai-table-rich-text", usesInheritance: true, ngImport: i0, template: `
         @if (textConfig()) {
             <ai-table-text [config]="textConfig()!"></ai-table-text>
         }
         <ai-table-action-icon [config]="iconConfig()"></ai-table-action-icon>
-    `, isInline: true, dependencies: [{ kind: "component", type: AITableText, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRichText, decorators: [{
             type: Component,
@@ -5645,7 +5724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         }
         <ai-table-action-icon [config]="iconConfig()"></ai-table-action-icon>
     `,
-                    imports: [AITableText, AITableActionIcon],
+                    imports: [AITableTextComponent, AITableActionIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
@@ -5663,7 +5742,8 @@ const createActiveCellBorder = (config) => {
     if (Array.isArray(activeCell) &&
         !!activeCell.length &&
         aiTable.context.visibleRowsIndexMap().has(activeCell[0]) &&
-        aiTable.context.visibleColumnsIndexMap().has(activeCell[1])) {
+        aiTable.context.visibleColumnsIndexMap().has(activeCell[1]) &&
+        !aiTable.selection().expandCell) {
         const fieldId = activeCell[1];
         const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, activeCell);
         const checkIsVisible = (rowIndex, columnIndex) => {
@@ -6357,12 +6437,16 @@ class CellDrawer extends Drawer {
     }
     // 单元格渲染
     renderCell(render, ctx, columnWidth) {
-        const { field, cellValue } = render;
+        const { field, cellValue, aiTable } = render;
         const fieldType = field.type;
         const fieldMethod = FieldModelMap[fieldType];
         if (!fieldMethod.isValid(cellValue)) {
             return;
         }
+        const customFieldRender = aiTable.context?.aiFieldConfig()?.customFields?.[fieldType]?.render;
+        if (customFieldRender) {
+            return customFieldRender(render, this);
+        }
         switch (fieldType) {
             case AITableFieldType.text:
             case AITableFieldType.richText:
@@ -7014,29 +7098,22 @@ class RecordRowLayout extends Layout {
         });
     }
     // 首列
-    renderFirstCell({ row, style, isHoverRow, isCheckedRow }) {
+    renderFirstCell({ row, style, indexStyle, isHoverRow, isCheckedRow }) {
         if (!this.isFirst)
             return;
-        const { fill } = style;
+        const { fill } = style || {};
+        const { fill: indexFill } = indexStyle || {};
         const y = this.y;
         const rowHeight = this.rowHeight;
         const columnWidth = this.columnWidth;
         const colors = AITable.getColors();
-        // 编号的上下边框
-        let fillBg = colors.transparent;
-        if (isCheckedRow) {
-            fillBg = colors.itemActiveBgColor;
-        }
-        else if (isHoverRow) {
-            fillBg = colors.gray80;
-        }
         if (!this.hiddenIndexColumn) {
             this.customRect({
                 x: AI_TABLE_OFFSET + AI_TABLE_ROW_DRAG_ICON_WIDTH,
                 y,
                 width: this.rowHeadWidth - AI_TABLE_OFFSET - AI_TABLE_ROW_DRAG_ICON_WIDTH,
                 height: rowHeight,
-                fill: fillBg,
+                fill: indexFill,
                 strokes: {
                     right: colors.gray200,
                     bottom: colors.gray200
@@ -7085,7 +7162,7 @@ class RecordRowLayout extends Layout {
     renderLastCell({ style, isHoverRow, isCheckedRow }) {
         if (!this.isLast || this.isFirst)
             return;
-        const { fill, stroke } = style;
+        const { fill, stroke } = style || {};
         const colors = AITable.getColors();
         // 背景、边框
         this.rect({
@@ -7102,7 +7179,7 @@ class RecordRowLayout extends Layout {
     renderCommonCell({ style }) {
         if (this.isFirst || this.isLast)
             return;
-        const { fill, stroke } = style;
+        const { fill, stroke } = style || {};
         const colors = AITable.getColors();
         // 背景、边框
         this.rect({
@@ -7115,8 +7192,8 @@ class RecordRowLayout extends Layout {
         });
     }
     render(config) {
-        const { row, style, isCheckedRow, isHoverRow } = config;
-        this.renderFirstCell({ row, style, isCheckedRow, isHoverRow });
+        const { row, style, indexStyle, isCheckedRow, isHoverRow } = config;
+        this.renderFirstCell({ row, style, indexStyle, isCheckedRow, isHoverRow });
         this.renderCommonCell({ style });
         this.renderLastCell({ style, isCheckedRow, isHoverRow });
     }
@@ -7190,6 +7267,7 @@ const createCells = (config) => {
                     const fieldId = field._id;
                     const cell = [recordId, fieldId];
                     let background = getCellBackground(cell, isHover, targetName, aiTable);
+                    let indexBackground = getIndexCellBackground(cell, isHover, targetName, aiTable);
                     recordRowLayout.init({
                         x,
                         y,
@@ -7205,6 +7283,7 @@ const createCells = (config) => {
                     recordRowLayout.render({
                         row,
                         style: { fill: background },
+                        indexStyle: { fill: indexBackground },
                         isHoverRow: isHoverRecord(isHover, targetName),
                         isCheckedRow: isSelectedRecord(recordId, aiTable)
                     });
@@ -7257,27 +7336,37 @@ const createCells = (config) => {
         }
     }
 };
+const getRowBackground = (cell, isHover, targetName, aiTable) => {
+    const colors = AITable.getColors();
+    const [recordId, fieldId] = cell;
+    if (isWillHiddenCell(cell, aiTable)) {
+        return colors.itemMatchBgColor;
+    }
+    if (isSelectedRecord(recordId, aiTable) || isSiblingCell(cell, aiTable)) {
+        return colors.itemActiveBgColor;
+    }
+    if (isHoverRecord(isHover, targetName)) {
+        return colors.gray80;
+    }
+    return colors.white;
+};
 const getCellBackground = (cell, isHover, targetName, aiTable) => {
     const colors = AITable.getColors();
     const [recordId, fieldId] = cell;
-    let background = colors.white;
-    const _isHoverRecord = isHoverRecord(isHover, targetName);
-    const _isSelectedRecord = isSelectedRecord(recordId, aiTable);
-    const _isSelectedField = isSelectedField(fieldId, aiTable);
-    const _isSiblingCell = isSiblingCell(cell, aiTable);
-    const _isActiveCell = isActiveCell(cell, aiTable);
-    const _isSelectedCell = isSelectedCell(cell, aiTable);
-    const _isKeywordsMatchedCell = isKeywordsMatchedCell(cell, aiTable);
-    if (_isKeywordsMatchedCell) {
-        background = colors.itemMatchBgColor;
-    }
-    else if (_isSelectedRecord || _isSelectedField || _isSiblingCell || (_isSelectedCell && !_isActiveCell)) {
-        background = colors.itemActiveBgColor;
-    }
-    else if (_isHoverRecord && !_isActiveCell) {
-        background = colors.gray80;
-    }
-    return background;
+    if (isActiveCell(cell, aiTable)) {
+        return colors.white;
+    }
+    if (isSelectedField(fieldId, aiTable) || isSelectedCell(cell, aiTable)) {
+        return colors.itemActiveBgColor;
+    }
+    if (isKeywordsMatchedCell(cell, aiTable)) {
+        return colors.itemMatchBgColor;
+    }
+    return getRowBackground(cell, isHover, targetName, aiTable);
+};
+const getIndexCellBackground = (cell, isHover, targetName, aiTable) => {
+    const [recordId, fieldId] = cell;
+    return getRowBackground([recordId, ''], isHover, targetName, aiTable);
 };
 const isActiveCell = (cell, aiTable) => {
     const [recordId, fieldId] = cell;
@@ -7293,6 +7382,10 @@ const isKeywordsMatchedCell = (cell, aiTable) => {
     const [recordId, fieldId] = cell;
     return aiTable.keywordsMatchedCells().has(`${recordId}:${fieldId}`);
 };
+const isWillHiddenCell = (cell, aiTable) => {
+    const [recordId, fieldId] = cell;
+    return aiTable.recordsWillHidden().includes(recordId);
+};
 const isSelectedCell = (cell, aiTable) => {
     const [recordId, fieldId] = cell;
     return aiTable.selection().selectedCells.has(`${recordId}:${fieldId}`);
@@ -7500,8 +7593,8 @@ class AITableFieldIcon {
     constructor() {
         this.config = input.required();
         this.iconConfig = computed(() => {
-            const { field, x, y, width, height, fill } = this.config();
-            let data = null;
+            const { field, x, y, width, height, fill, path } = this.config();
+            let data = path;
             switch (field.type) {
                 case AITableFieldType.text:
                     data = ColumnTextFilledPath;
@@ -7615,7 +7708,8 @@ class AITableFieldHead {
                 y: (height - AI_TABLE_ICON_COMMON_SIZE) / 2,
                 width: AI_TABLE_ICON_COMMON_SIZE,
                 height: AI_TABLE_ICON_COMMON_SIZE,
-                fill: Colors.gray600
+                fill: Colors.gray600,
+                path: IconPathMap[field.icon]
             };
         });
         this.textConfig = computed(() => {
@@ -7675,7 +7769,7 @@ class AITableFieldHead {
             </ko-group>
             <ko-line [config]="fieldOpacityLineConfig()"></ko-line>
         </ko-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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: AITableFieldIcon, selector: "ai-table-field-icon", inputs: ["config"] }, { kind: "component", type: AITableText, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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: AITableFieldIcon, selector: "ai-table-field-icon", inputs: ["config"] }, { kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldHead, decorators: [{
             type: Component,
@@ -7694,7 +7788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             <ko-line [config]="fieldOpacityLineConfig()"></ko-line>
         </ko-group>
     `,
-                    imports: [KoContainer, KoShape, AITableFieldIcon, AITableText, AITableIcon],
+                    imports: [KoContainer, KoShape, AITableFieldIcon, AITableTextComponent, AITableIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
@@ -8269,27 +8363,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class AITableHoverCells {
     constructor() {
         this.config = input.required();
+        this.onlyDisplayBorder = input(false);
         this.componentMap = {};
         this.groupConfig = computed(() => {
             return {
                 x: this.hoverCellConfig()?.x,
-                y: this.hoverCellConfig()?.y
+                y: this.hoverCellConfig()?.y,
+                listening: true
             };
         });
         this.hoverCellConfig = computed(() => {
             const { aiTable, coordinate, references, readonly, actions } = this.config();
-            const pointPosition = aiTable.context.pointPosition();
             const hoverCell = this.hoverCell();
             if (!hoverCell) {
                 return;
             }
-            const { field, recordId } = hoverCell;
+            const { field, recordId, isExpand } = hoverCell;
             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 = pointPosition.columnIndex;
-            const rowIndex = pointPosition.rowIndex;
+            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;
@@ -8315,6 +8410,7 @@ class AITableHoverCells {
                 y,
                 readonly,
                 actions,
+                isExpand,
                 render: {
                     aiTable,
                     recordId,
@@ -8335,10 +8431,15 @@ class AITableHoverCells {
         this.hoverCell = computed(() => getHoverCell(this.config().aiTable));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableHoverCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableHoverCells, isStandalone: true, selector: "ai-table-hover-cell", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableHoverCells, isStandalone: true, selector: "ai-table-hover-cell", 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 (hoverCell()) {
             <ko-group [config]="groupConfig()">
-                <ng-container *ngComponentOutlet="hoverCell()!.renderComponentDefinition; inputs: { config: hoverCellConfig() }">
+                <ng-container
+                    *ngComponentOutlet="
+                        hoverCell()!.renderComponentDefinition;
+                        inputs: { config: hoverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
+                    "
+                >
                 </ng-container>
             </ko-group>
         }
@@ -8351,7 +8452,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     template: `
         @if (hoverCell()) {
             <ko-group [config]="groupConfig()">
-                <ng-container *ngComponentOutlet="hoverCell()!.renderComponentDefinition; inputs: { config: hoverCellConfig() }">
+                <ng-container
+                    *ngComponentOutlet="
+                        hoverCell()!.renderComponentDefinition;
+                        inputs: { config: hoverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
+                    "
+                >
                 </ng-container>
             </ko-group>
         }
@@ -8444,19 +8550,11 @@ class AITableRenderer {
                 clipHeight: this.containerHeight() - this.coordinate().rowInitSize
             };
         });
-        this.hoverAttachGroupConfig = computed(() => {
-            return {
-                clipX: this.frozenAreaWidth() + 1,
-                clipY: this.coordinate().rowInitSize + 1,
-                clipWidth: this.containerWidth() - this.frozenAreaWidth(),
-                clipHeight: this.containerHeight() - this.coordinate().rowInitSize
-            };
-        });
         this.frozenAttachGroupConfig = computed(() => {
             return {
                 clipX: 0,
                 clipY: this.coordinate().rowInitSize - 1,
-                clipWidth: this.frozenAreaWidth() + 4,
+                clipWidth: this.frozenAreaWidth(),
                 clipHeight: this.containerHeight() - this.coordinate().rowInitSize
             };
         });
@@ -8464,7 +8562,7 @@ class AITableRenderer {
             return {
                 clipX: 0,
                 clipY: this.coordinate().rowInitSize + 1,
-                clipWidth: this.frozenAreaWidth() + 4,
+                clipWidth: this.frozenAreaWidth(),
                 clipHeight: this.containerHeight() - this.coordinate().rowInitSize
             };
         });
@@ -8523,6 +8621,26 @@ class AITableRenderer {
         this.activeCellBorderConfig = computed(() => {
             return createActiveCellBorder(this.cellsConfig());
         });
+        this.showExpandCellBorder = computed(() => {
+            let expandCellBorder = false;
+            let frozenExpandCellBorder = false;
+            const { aiTable } = this.config();
+            const expandCellPath = aiTable.selection().expandCell;
+            if (expandCellPath) {
+                const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, expandCellPath);
+                const isFrozenColumn = columnIndex < aiTable.context.frozenColumnCount();
+                if (isFrozenColumn) {
+                    frozenExpandCellBorder = true;
+                }
+                else {
+                    expandCellBorder = true;
+                }
+            }
+            return {
+                expandCellBorder,
+                frozenExpandCellBorder
+            };
+        });
     }
     stageMousemove(e) {
         this.koMousemove.emit(e);
@@ -8546,7 +8664,7 @@ class AITableRenderer {
         this.koMouseleave.emit(e);
     }
     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" }, 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>\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]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"hoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\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                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenHoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\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: AITableHoverCells, selector: "ai-table-hover-cell", inputs: ["config"] }, { 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"] }], 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" }, 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>\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]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [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-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\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-hover-cell [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-hover-cell>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenHoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\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-hover-cell [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-hover-cell>\n                    }\n                </ko-group>\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: AITableHoverCells, selector: "ai-table-hover-cell", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -8564,15 +8682,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableAddField,
                         AITableHoverRowHeads,
                         AITableOtherRows
-                    ], 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>\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]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"hoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\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                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenHoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+                    ], 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>\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]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [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-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\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-hover-cell [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-hover-cell>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenHoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\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-hover-cell [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-hover-cell>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
-class AITableCellRate {
+class AITableCellRate extends HoverCellComponent {
     constructor() {
+        super(...arguments);
         this.pointerX = signal(0);
         this.pointerY = signal(0);
         this.resetStatus = signal(false);
-        this.config = input();
         this.readonly = computed(() => {
             return this.config()?.readonly;
         });
@@ -8684,8 +8802,8 @@ class AITableCellRate {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", usesInheritance: true, ngImport: i0, template: `
         @if (!readonly()) {
             <ko-rect [config]="whiteBgConfig()" (koMousemove)="koMousemove($event)"></ko-rect>
         }
@@ -8711,9 +8829,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellProgress {
+class AITableCellProgress extends HoverCellComponent {
     constructor() {
-        this.config = input();
+        super(...arguments);
         this.readonly = computed(() => {
             return this.config()?.readonly;
         });
@@ -8930,8 +9048,8 @@ class AITableCellProgress {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellProgress, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellProgress, isStandalone: true, selector: "ai-table-progress", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellProgress, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellProgress, isStandalone: true, selector: "ai-table-progress", usesInheritance: true, ngImport: i0, template: `
         @if (!readonly()) {
             <ko-rect [config]="whiteBgConfig()"></ko-rect>
         }
@@ -8980,14 +9098,29 @@ var cellComponents = /*#__PURE__*/Object.freeze({
     AITableCellRichText: AITableCellRichText
 });
 
-const componentMap = {};
+const ComponentMap = {};
 Object.values(cellComponents).forEach((cellComponent) => {
-    componentMap[cellComponent.fieldType] = cellComponent;
+    ComponentMap[cellComponent.fieldType] = cellComponent;
 });
 
 function getHoverCell(aiTable) {
     const pointPosition = aiTable.context.pointPosition();
-    const { fieldId, recordId } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
+    let fieldId;
+    let recordId;
+    const expandCell = aiTable.selection().expandCell;
+    if (expandCell) {
+        fieldId = expandCell[1];
+        recordId = expandCell[0];
+    }
+    else {
+        const { fieldId: fieldIdDetail, recordId: recordIdDetail } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
+        if (fieldIdDetail) {
+            fieldId = fieldIdDetail;
+        }
+        if (recordIdDetail) {
+            recordId = recordIdDetail;
+        }
+    }
     if (!recordId || !fieldId) {
         return;
     }
@@ -8996,7 +9129,7 @@ function getHoverCell(aiTable) {
     if (!record || !field || !recordId || !fieldId) {
         return;
     }
-    const renderComponentDefinition = componentMap[field?.type];
+    const renderComponentDefinition = ComponentMap[field?.type];
     if (!renderComponentDefinition) {
         return;
     }
@@ -9004,6 +9137,7 @@ function getHoverCell(aiTable) {
         field,
         recordId,
         fieldId,
+        isExpand: !!expandCell,
         renderComponentDefinition
     };
 }
@@ -9030,6 +9164,45 @@ function clearCells(aiTable, actions) {
     }
 }
 
+function aiTableTextConfigToKonvaConfig(textConfig, rowHeight) {
+    const result = {
+        x: textConfig.x,
+        y: textConfig.y,
+        text: textConfig.text,
+        fill: textConfig.fillStyle,
+        fontStyle: textConfig.fontWeight,
+        fontSize: textConfig.fontSize,
+        align: textConfig.textAlign,
+        height: 0,
+        verticalAlign: textConfig.verticalAlign,
+        textDecoration: textConfig.textDecoration
+    };
+    return result;
+}
+function aiTableImageConfigToKonvaConfig(imageConfig, options) {
+    let image = imageCache.getImage(imageConfig.url);
+    if (!image) {
+        const img = new Image();
+        img.src = imageConfig.url;
+        image = img;
+    }
+    const result = {
+        ...imageConfig,
+        listening: options?.listening,
+        image: image
+    };
+    return result;
+}
+function aiTableRectConfigToKonvaConfig(rectConfig, options) {
+    const result = {
+        name: options?.name,
+        ...rectConfig,
+        cornerRadius: rectConfig.radius,
+        listening: options?.listening ?? false
+    };
+    return result;
+}
+
 class AITableGridEventService {
     constructor() {
         this.dblClickEvent$ = new Subject();
@@ -9117,7 +9290,7 @@ class AITableGridEventService {
         return ref;
     }
     getOriginPosition(aiTable, options) {
-        const { container, coordinate, recordId, fieldId, isHoverEdit } = options;
+        const { container, coordinate, recordId, fieldId } = options;
         const { scrollState } = aiTable.context;
         const { rowHeight, columnCount } = coordinate;
         const cell = [recordId, fieldId];
@@ -9144,13 +9317,6 @@ class AITableGridEventService {
         let y = originPosition.y + getEditorBoxOffset();
         let width = getEditorSpace(originPosition.width);
         let height = getEditorSpace(originPosition.height);
-        // hover 编辑组件无边框
-        if (isHoverEdit) {
-            x = originPosition.x + getHoverEditorBoxOffset();
-            y = originPosition.y + getHoverEditorBoxOffset();
-            width = getHoverEditorSpace(originPosition.width);
-            height = getHoverEditorSpace(originPosition.height);
-        }
         return {
             ...originPosition,
             x: x,
@@ -9160,7 +9326,7 @@ class AITableGridEventService {
         };
     }
     openCellEditor(aiTable, options) {
-        const { container, recordId, fieldId, isHoverEdit, references } = options;
+        const { container, recordId, fieldId, references } = options;
         const fieldType = this.aiTable.fieldsMap()[fieldId].type;
         const { component, isInternalComponent } = this.getEditorComponent(fieldType);
         const offsetOriginPosition = this.getOriginPosition(aiTable, options);
@@ -9177,7 +9343,8 @@ class AITableGridEventService {
                 fieldId: fieldId,
                 recordId: recordId,
                 references,
-                aiTable: aiTable
+                aiTable: aiTable,
+                isSelectAll: options.isSelectAll,
             },
             panelClass: 'grid-cell-editor',
             outsideClosable: fieldType === AITableFieldType.link ? true : false,
@@ -9451,17 +9618,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     ], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], 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)=\"selectRecord(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" }]
         }] });
 
+class AITableScrollControllerService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.animationFrame = null;
+        this.mouseUpSubscription = null;
+        this.isAutoScrolling = false;
+        this.autoScrollSub = null;
+        this.edgeDistanceX = 0;
+        this.edgeDistanceY = 0;
+        this.lastAutoScrollOptions = null;
+        this.ngZone.runOutsideAngular(() => {
+            this.mouseUpSubscription = fromEvent(document, 'mouseup').subscribe(() => {
+                this.handleMouseUp();
+            });
+        });
+    }
+    scroll(options) {
+        const { needScroll } = this.calculateScrollDistance(options);
+        if (!needScroll) {
+            this.isAutoScrolling = false;
+            return;
+        }
+        this.lastAutoScrollOptions = options;
+        if (!this.isAutoScrolling) {
+            this.startAutoScroll(options);
+        }
+    }
+    handleMouseUp() {
+        this.isAutoScrolling = false;
+        if (this.autoScrollSub) {
+            this.autoScrollSub.unsubscribe();
+            this.autoScrollSub = null;
+        }
+        this.isAutoScrolling = false;
+    }
+    startAutoScroll(options) {
+        if (this.autoScrollSub) {
+            this.autoScrollSub.unsubscribe();
+            this.autoScrollSub = null;
+        }
+        this.isAutoScrolling = true;
+        this.ngZone.runOutsideAngular(() => {
+            this.autoScrollSub = animationFrames()
+                .pipe(takeWhile(() => this.isAutoScrolling), map(() => {
+                const currentOptions = this.lastAutoScrollOptions || options;
+                let currentScrollX = 0;
+                let currentScrollY = 0;
+                const { horizontalElement, verticalElement } = currentOptions.scrollableElement;
+                if (horizontalElement) {
+                    currentScrollX = horizontalElement.scrollLeft;
+                }
+                if (verticalElement) {
+                    currentScrollY = verticalElement.scrollTop;
+                }
+                // 计算最新滚动距离和速度
+                const { scrollResult } = this.calculateScrollDistance(currentOptions);
+                let left = 0;
+                let top = 0;
+                if (horizontalElement && scrollResult.speedX !== undefined && scrollResult.speedX !== 0) {
+                    left = Math.max(0, currentScrollX + scrollResult.speedX);
+                    horizontalElement.scrollLeft = left;
+                }
+                if (verticalElement && scrollResult.speedY !== undefined && scrollResult.speedY !== 0) {
+                    top = Math.max(0, currentScrollY + scrollResult.speedY);
+                    verticalElement.scrollTop = top;
+                }
+                this.isAutoScrolling = left !== 0 || top !== 0;
+                return {
+                    x: horizontalElement?.scrollLeft || 0,
+                    y: verticalElement?.scrollTop || 0
+                };
+            }))
+                .subscribe((position) => {
+                options.onScrollChange?.({ x: position.x, y: position.y }, this.isAutoScrolling);
+            });
+        });
+    }
+    getEdgeThreshold(threshold, direction) {
+        const defaultThreshold = 10; // 默认阈值
+        if (isObject(threshold)) {
+            return threshold[direction] || defaultThreshold;
+        }
+        return threshold || defaultThreshold;
+    }
+    // 计算距离和滚动速度
+    calculateScrollDistance(options) {
+        const { container, target, direction = 'both', scrollableElement, frozenArea = {}, edgeThreshold = 0, minScrollSpeed = 1, maxScrollSpeed = 20, scrollSpeedFactor = 1 } = options;
+        const { horizontalElement, verticalElement } = scrollableElement;
+        // 初始化滚动结果
+        const scrollResult = {
+            x: 0,
+            y: 0,
+            speedX: 0,
+            speedY: 0
+        };
+        let needScroll = false;
+        // 水平滚动计算
+        if ((direction === 'horizontal' || direction === 'both') && horizontalElement) {
+            const minLeft = frozenArea.left || 0;
+            const maxLeft = frozenArea.right || container.width;
+            const leftEdgeThreshold = this.getEdgeThreshold(edgeThreshold, 'left');
+            const rightEdgeThreshold = this.getEdgeThreshold(edgeThreshold, 'right');
+            if (target.x < minLeft + leftEdgeThreshold) {
+                this.edgeDistanceX = Math.abs(minLeft + leftEdgeThreshold - target.x);
+                // point点位离左边界阈值越远，速度越快
+                const distanceFactor = Math.min(1.0, this.edgeDistanceX / leftEdgeThreshold);
+                const speed = this.calculateSpeed(distanceFactor, minScrollSpeed, maxScrollSpeed, scrollSpeedFactor);
+                scrollResult.x = this.edgeDistanceX;
+                scrollResult.speedX = -speed; // 向左滚动
+                needScroll = this.edgeDistanceX > 0;
+            }
+            else if (target.x + (target.width || 0) > maxLeft - rightEdgeThreshold) {
+                const rightEdge = target.x + (target.width || 0);
+                this.edgeDistanceX = Math.abs(rightEdge - maxLeft + rightEdgeThreshold);
+                const distanceFactor = Math.min(1.0, this.edgeDistanceX / rightEdgeThreshold);
+                const speed = this.calculateSpeed(distanceFactor, minScrollSpeed, maxScrollSpeed, scrollSpeedFactor);
+                scrollResult.x = this.edgeDistanceX;
+                scrollResult.speedX = speed;
+                needScroll = this.edgeDistanceX > 0;
+            }
+            else {
+                this.edgeDistanceX = 0;
+                scrollResult.speedX = 0;
+            }
+        }
+        // 垂直滚动计算
+        if ((direction === 'vertical' || direction === 'both') && verticalElement) {
+            const minTop = frozenArea.top || 0;
+            const maxTop = frozenArea.bottom || container.height;
+            const topEdgeThreshold = this.getEdgeThreshold(edgeThreshold, 'top');
+            const bottomEdgeThreshold = this.getEdgeThreshold(edgeThreshold, 'bottom');
+            if (target.y < minTop + topEdgeThreshold) {
+                // 滚动距离
+                this.edgeDistanceY = Math.abs(minTop + topEdgeThreshold - target.y);
+                const distanceFactor = Math.min(1.0, this.edgeDistanceY / topEdgeThreshold);
+                const speed = this.calculateSpeed(distanceFactor, minScrollSpeed, maxScrollSpeed, scrollSpeedFactor);
+                scrollResult.y = this.edgeDistanceY;
+                scrollResult.speedY = -speed; // 负值表示向上滚动
+                needScroll = this.edgeDistanceY > 0;
+            }
+            else if (target.y + (target.height || 0) > maxTop - bottomEdgeThreshold) {
+                // 向下滚动
+                this.edgeDistanceY = Math.abs(target.y + (target.height || 0) - maxTop + bottomEdgeThreshold);
+                const distanceFactor = Math.min(1.0, this.edgeDistanceY / bottomEdgeThreshold);
+                const speed = this.calculateSpeed(distanceFactor, minScrollSpeed, maxScrollSpeed, scrollSpeedFactor);
+                scrollResult.y = this.edgeDistanceY;
+                scrollResult.speedY = speed;
+                needScroll = this.edgeDistanceY > 0;
+            }
+            else {
+                // 不在边缘区域，重置边缘距离
+                this.edgeDistanceY = 0;
+                scrollResult.speedY = 0;
+            }
+        }
+        return { scrollResult, needScroll };
+    }
+    /**
+     * 计算滚动速度
+     * @param distanceFactor 距离因子（0-1）
+     * @param minSpeed 最小速度
+     * @param maxSpeed 最大速度
+     * @param speedFactor 速度因子
+     * @returns 计算后的滚动速度
+     */
+    calculateSpeed(distanceFactor, minSpeed, maxSpeed, speedFactor) {
+        // 二次曲线计算，距离因子越大速度增长越快
+        const easedFactor = distanceFactor * distanceFactor;
+        // 计算最终速度，范围为 minSpeed 到 maxSpeed 之间
+        const speed = minSpeed + (maxSpeed - minSpeed) * easedFactor;
+        // 应用全局速度因子
+        return speed * speedFactor;
+    }
+    destroy() {
+        if (this.animationFrame) {
+            cancelAnimationFrame(this.animationFrame);
+            this.animationFrame = null;
+        }
+        if (this.autoScrollSub) {
+            this.autoScrollSub.unsubscribe();
+            this.autoScrollSub = null;
+        }
+        if (this.mouseUpSubscription) {
+            this.mouseUpSubscription.unsubscribe();
+            this.mouseUpSubscription = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
 class AITableDragComponent {
     constructor() {
+        this.horizontalBar = input();
+        this.verticalBar = input();
         this.dragEnd = output();
         this.aiTableGridSelectionService = inject(AITableGridSelectionService);
         this.render2 = inject(Renderer2);
+        this.scrollControllerService = inject(AITableScrollControllerService);
         this.elementRef = inject((ElementRef));
         this.draggedData = null;
+        this.scrollBarStartPosition = { x: 0, y: 0 };
         this.mouseStartPosition = null;
         this.aiTableDrag = null;
         this.mouseDownTimeout = null;
         this.isDraggingEnabled = false;
+        this.containerWidth = 0;
+        this.containerHeight = 0;
+        this.horizontalBarMaxScroll = 0;
+        this.verticalBarMaxScroll = 0;
         effect(() => this.handleDragStateChange());
     }
     ngOnInit() {
@@ -9479,6 +9848,11 @@ class AITableDragComponent {
                 clearTimeout(this.mouseDownTimeout);
             }
             this.isDraggingEnabled = false;
+            this.horizontalBarElement = this.horizontalBar()?.nativeElement;
+            this.horizontalBarMaxScroll = (this.horizontalBarElement?.scrollWidth || 0) - (this.horizontalBarElement?.clientWidth || 0);
+            this.verticalBarElement = this.verticalBar()?.nativeElement;
+            this.verticalBarMaxScroll = (this.verticalBarElement?.scrollHeight || 0) - (this.verticalBarElement?.clientHeight || 0);
+            this.scrollBarStartPosition = { x: this.horizontalBarElement?.scrollLeft || 0, y: this.verticalBarElement?.scrollTop || 0 };
             this.mouseDownTimeout = setTimeout(() => {
                 this.isDraggingEnabled = true;
             }, 200);
@@ -9523,6 +9897,8 @@ class AITableDragComponent {
             return;
         }
         this.setDisplayStyle('block');
+        this.containerWidth = this.elementRef.nativeElement.offsetWidth;
+        this.containerHeight = this.elementRef.nativeElement.offsetHeight;
         const moveX = e.x - (this.mouseStartPosition?.x || 0);
         const moveY = e.y - (this.mouseStartPosition?.y || 0);
         switch (drag.type) {
@@ -9539,7 +9915,7 @@ class AITableDragComponent {
     }
     movingColumn(drag, moveX) {
         const aiTable = this.aiTableGridSelectionService.aiTable;
-        const scroll = drag.scroll || { x: 0, y: 0 };
+        const scroll = { x: this.horizontalBarElement?.scrollLeft || 0, y: 0 };
         const coordinate = drag.coordinate;
         const fields = aiTable.gridData().fields;
         const width = this.calculateDragWidth(fields, coordinate, drag);
@@ -9553,60 +9929,102 @@ class AITableDragComponent {
         const pointerX = moveX + sourceColumnStartX;
         // 拖拽中心点
         const dragCenter = sourceColumnWidth / 2;
-        const rectLeft = pointerX - (isSourceColumnFrozen ? 0 : scroll.x);
+        const currentRectLeft = pointerX - (isSourceColumnFrozen ? 0 : this.scrollBarStartPosition.x);
+        let newScrollPosition = { x: scroll.x, y: scroll.y };
         this.setRectStyles({
             cursor: 'move',
             width: `${width}px`,
             height: '100%',
             top: '0',
-            left: `${rectLeft}px`
-        });
-        const lastColumnOffset = coordinate.getColumnOffset(coordinate.columnCount - 1);
-        const lastColumnWidth = coordinate.getColumnWidth(coordinate.columnCount - 1);
-        let targetColumnIndex = coordinate.getColumnStartIndex(pointerX + (isSourceColumnFrozen ? scroll.x : 0) + dragCenter);
-        let targetColumnStartX = coordinate.getColumnOffset(targetColumnIndex);
-        let isLastColumn = false;
-        // 处理最后一列
-        if (pointerX + dragCenter > lastColumnOffset + lastColumnWidth) {
-            targetColumnIndex = coordinate.columnCount;
-            targetColumnStartX = lastColumnOffset + lastColumnWidth;
-            isLastColumn = true;
-        }
-        if ((targetColumnIndex >= 0 && (targetColumnIndex - sourceColumnIndex > 1 || targetColumnIndex - sourceColumnIndex < 0)) ||
-            isLastColumn) {
-            let lineLeft = targetColumnStartX - scroll.x;
-            const lineForFrozenX = lineLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
-            const rectDistanceFrozenX = rectLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
-            if (lineForFrozenX < 0) {
-                if (Math.abs(rectDistanceFrozenX) > dragCenter) {
-                    lineLeft = coordinate.getColumnOffset(0);
-                    targetColumnIndex = 0;
+            left: `${currentRectLeft}px`
+        });
+        // 计算目标列和辅助线
+        const updateTargetAndLine = (rectLeft, scrollPosition) => {
+            let targetColumnIndex = coordinate.getColumnStartIndex(rectLeft + scrollPosition.x + dragCenter);
+            const lastColumnOffset = coordinate.getColumnOffset(coordinate.columnCount - 1);
+            const lastColumnWidth = coordinate.getColumnWidth(coordinate.columnCount - 1);
+            const lastColumnEndX = lastColumnOffset + lastColumnWidth;
+            let targetColumnStartX = coordinate.getColumnOffset(targetColumnIndex);
+            let isLastColumn = false;
+            // 处理最后一列
+            if (rectLeft + dragCenter + scrollPosition.x > lastColumnEndX) {
+                targetColumnIndex = coordinate.columnCount;
+                targetColumnStartX = lastColumnOffset + lastColumnWidth;
+                isLastColumn = true;
+            }
+            if ((targetColumnIndex >= 0 && (targetColumnIndex - sourceColumnIndex > 1 || targetColumnIndex - sourceColumnIndex < 0)) ||
+                isLastColumn) {
+                let lineLeft = targetColumnStartX - scrollPosition.x;
+                const lineForFrozenX = lineLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
+                const rectDistanceFrozenX = rectLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
+                if (lineForFrozenX < 0) {
+                    if (Math.abs(rectDistanceFrozenX) < dragCenter) {
+                        // 滚动中保持上一个位置
+                        const nextColumnStartX = coordinate.getColumnOffset(targetColumnIndex + 1);
+                        this.setAuxiliaryLineStyles({
+                            left: `${nextColumnStartX - scrollPosition.x}px`
+                        });
+                        this.draggedData = {
+                            type: DragType.field,
+                            targetIndex: targetColumnIndex + 1,
+                            fieldIds: drag.sourceIds,
+                            fieldsIndex: Array.from(drag.sourceIds).map((id) => visibleColumnIndexMap.get(id) || 0)
+                        };
+                        return;
+                    }
                 }
-                else {
-                    return;
+                this.setAuxiliaryLineStyles({
+                    width: '2px',
+                    height: '100%',
+                    top: 0,
+                    left: `${lineLeft}px`
+                });
+                // 向右移动目标在目标列的前一列
+                if (targetColumnIndex > sourceColumnIndex) {
+                    targetColumnIndex -= 1;
                 }
+                this.draggedData = {
+                    type: DragType.field,
+                    targetIndex: targetColumnIndex,
+                    fieldIds: drag.sourceIds,
+                    fieldsIndex: Array.from(drag.sourceIds).map((id) => visibleColumnIndexMap.get(id) || 0)
+                };
             }
-            this.setAuxiliaryLineStyles({
-                width: '2px',
-                height: '100%',
-                top: 0,
-                left: `${lineLeft}px`
-            });
-            // 向右移动目标在目标列的前一列
-            if (targetColumnIndex > sourceColumnIndex) {
-                targetColumnIndex -= 1;
+            else {
+                this.resetAuxiliaryLine();
+                this.draggedData = null;
             }
-            this.draggedData = {
-                type: DragType.field,
-                targetIndex: targetColumnIndex,
-                fieldIds: drag.sourceIds,
-                fieldsIndex: Array.from(drag.sourceIds).map((id) => visibleColumnIndexMap.get(id) || 0)
-            };
-        }
-        else {
-            this.resetAuxiliaryLine();
-            this.draggedData = null;
-        }
+        };
+        updateTargetAndLine(currentRectLeft, newScrollPosition);
+        this.scrollControllerService.scroll({
+            container: {
+                width: this.containerWidth,
+                height: this.containerHeight
+            },
+            target: {
+                x: currentRectLeft,
+                y: 0,
+                width: sourceColumnWidth,
+                height: this.containerHeight
+            },
+            direction: 'horizontal',
+            scrollableElement: {
+                horizontalElement: this.horizontalBarElement
+            },
+            frozenArea: {
+                left: frozenColumnWidth + aiTable.context.rowHeadWidth()
+            },
+            edgeThreshold: {
+                left: AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD,
+                right: AI_TABLE_SCROLL_BAR_SIZE + AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD
+            },
+            onScrollChange: (position, isAutoScrolling) => {
+                newScrollPosition = position;
+                if (isAutoScrolling && position.x > 0 && Math.round(position.x) < this.horizontalBarMaxScroll) {
+                    updateTargetAndLine(currentRectLeft, position);
+                }
+            }
+        });
     }
     movingColumnWidth(drag, moveX) {
         this.setCursorStyle('col-resize');
@@ -9615,7 +10033,7 @@ class AITableDragComponent {
         const sourceColumnIndex = visibleColumnIndexMap.get(drag.sourceIds.values().next().value) || 0;
         const sourceColumnStartX = drag.coordinate.getColumnOffset(sourceColumnIndex);
         const sourceColumnWidth = drag.coordinate.getColumnWidth(sourceColumnIndex);
-        const scroll = drag.scroll || { x: 0, y: 0 };
+        const scroll = { x: this.horizontalBarElement?.scrollLeft || 0, y: this.verticalBarElement?.scrollTop || 0 };
         const pointerX = moveX + sourceColumnStartX;
         const colResizeX = pointerX - (sourceColumnIndex === 0 ? 0 : scroll.x);
         const left = `${colResizeX + sourceColumnWidth}px`;
@@ -9625,15 +10043,23 @@ class AITableDragComponent {
             top: '0',
             left
         });
+        let minWidth = MIN_COLUMN_WIDTH;
+        drag.sourceIds.forEach((id) => {
+            const field = aiTable.fieldsMap()[id];
+            const fieldOption = aiTable.context.fieldOptionMap().get(field.type);
+            if (fieldOption && fieldOption.minWidth) {
+                minWidth = Math.max(minWidth, fieldOption.minWidth);
+            }
+        });
         this.draggedData = {
             type: DragType.columnWidth,
             fieldIds: drag.sourceIds,
-            width: Math.max(MIN_COLUMN_WIDTH, sourceColumnWidth + moveX)
+            width: Math.max(minWidth, sourceColumnWidth + moveX)
         };
     }
     movingRecord(drag, moveY) {
         const aiTable = this.aiTableGridSelectionService.aiTable;
-        const scroll = drag.scroll || { x: 0, y: 0 };
+        const scroll = { x: 0, y: this.verticalBarElement?.scrollTop || 0 };
         const coordinate = drag.coordinate;
         const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
         const sourceRowId = drag.sourceIds.values().next().value;
@@ -9641,37 +10067,82 @@ class AITableDragComponent {
         const sourceRowStartY = coordinate.getRowOffset(sourceRowIndex);
         const sourceRowHeight = coordinate.getRowHeight(sourceRowIndex);
         const pointerY = sourceRowStartY + moveY;
+        const rectTop = pointerY - this.scrollBarStartPosition.y;
         this.setRectStyles({
             width: '100%',
             height: `${sourceRowHeight}px`,
-            top: `${pointerY - scroll.y}px`,
+            top: `${rectTop}px`,
             left: '0'
         });
-        const dragCenter = sourceRowHeight / 2;
-        const targetRowIndex = coordinate.getRowStartIndex(pointerY + dragCenter);
-        const targetRowStartY = coordinate.getRowOffset(targetRowIndex);
-        const lineTop = targetRowStartY - scroll.y;
-        const lineHeight = 2;
-        if (((targetRowIndex >= 0 && sourceRowIndex > targetRowIndex && sourceRowIndex - targetRowIndex > 0) ||
-            (sourceRowIndex < targetRowIndex && targetRowIndex - sourceRowIndex > 1)) &&
-            lineTop > AI_TABLE_FIELD_HEAD_HEIGHT - lineHeight && // 限制可视范围内
-            lineTop < coordinate.containerHeight - lineHeight) {
-            this.setAuxiliaryLineStyles({
-                width: `calc(100% - ${AI_TABLE_ROW_DRAG_ICON_WIDTH}px)`,
-                height: `${lineHeight}px`,
-                top: `${lineTop}px`,
-                left: `${AI_TABLE_ROW_DRAG_ICON_WIDTH}px`
-            });
-            this.draggedData = {
-                type: DragType.record,
-                recordIds: drag.sourceIds,
-                targetIndex: targetRowIndex
-            };
-        }
-        else {
-            this.resetAuxiliaryLine();
-            this.draggedData = null;
-        }
+        let newScrollPosition = { x: scroll.x, y: scroll.y };
+        const updateTargetAndLine = (rectTop, scrollPosition) => {
+            const dragCenter = sourceRowHeight / 2;
+            const targetRowIndex = coordinate.getRowStartIndex(rectTop + scrollPosition.y + dragCenter);
+            const targetRowStartY = coordinate.getRowOffset(targetRowIndex);
+            const lineHeight = 2;
+            if ((targetRowIndex >= 0 && sourceRowIndex > targetRowIndex && sourceRowIndex - targetRowIndex > 0) ||
+                (sourceRowIndex < targetRowIndex && targetRowIndex - sourceRowIndex > 1)) {
+                let lineTop = targetRowStartY - scrollPosition.y;
+                if (lineTop < AI_TABLE_FIELD_HEAD_HEIGHT) {
+                    // 滚动中保持上一个位置
+                    const nextColumnStartY = coordinate.getRowOffset(targetRowIndex + 1);
+                    this.setAuxiliaryLineStyles({
+                        top: `${nextColumnStartY - scrollPosition.y}px`
+                    });
+                    this.draggedData = {
+                        type: DragType.record,
+                        recordIds: drag.sourceIds,
+                        targetIndex: targetRowIndex + 1
+                    };
+                    return;
+                }
+                this.setAuxiliaryLineStyles({
+                    width: `calc(100% - ${AI_TABLE_ROW_DRAG_ICON_WIDTH}px)`,
+                    height: `${lineHeight}px`,
+                    top: `${lineTop}px`,
+                    left: `${AI_TABLE_ROW_DRAG_ICON_WIDTH}px`
+                });
+                this.draggedData = {
+                    type: DragType.record,
+                    recordIds: drag.sourceIds,
+                    targetIndex: targetRowIndex
+                };
+            }
+            else {
+                this.resetAuxiliaryLine();
+                this.draggedData = null;
+            }
+        };
+        updateTargetAndLine(rectTop, newScrollPosition);
+        this.scrollControllerService.scroll({
+            container: {
+                width: this.containerWidth,
+                height: this.containerHeight
+            },
+            target: {
+                x: 0,
+                y: rectTop,
+                width: this.containerWidth,
+                height: sourceRowHeight
+            },
+            direction: 'vertical',
+            scrollableElement: {
+                verticalElement: this.verticalBarElement
+            },
+            frozenArea: {
+                top: AI_TABLE_FIELD_HEAD_HEIGHT
+            },
+            edgeThreshold: {
+                top: AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD,
+                bottom: AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD
+            },
+            onScrollChange: (position, isAutoScrolling) => {
+                newScrollPosition = position;
+                if (isAutoScrolling && position.y > 0 && position.y < this.verticalBarMaxScroll) {
+                    updateTargetAndLine(rectTop, newScrollPosition);
+                }
+            }
+        });
     }
     handleDragEnd() {
         if (this.draggedData) {
@@ -9734,9 +10205,10 @@ class AITableDragComponent {
             cancelAnimationFrame(this.timer);
             this.timer = null;
         }
+        this.scrollControllerService.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "ai-table-drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", inputs: { horizontalBar: { classPropertyName: "horizontalBar", publicName: "horizontalBar", isSignal: true, isRequired: false, transformFunction: null }, verticalBar: { classPropertyName: "verticalBar", publicName: "verticalBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "ai-table-drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDragComponent, decorators: [{
             type: Component,
@@ -9752,6 +10224,7 @@ class AITableGrid extends AITableGridBase {
         this.isDragSelecting = false;
         this.dragSelectionStart = null;
         this.notifyService = inject(ThyNotifyService);
+        this.scrollControllerService = inject(AITableScrollControllerService);
         this.isPopoverOpen = false;
         this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
         this.containerRect = signal({ width: 0, height: 0 });
@@ -9765,16 +10238,56 @@ class AITableGrid extends AITableGridBase {
         this.linearRows = computed(() => {
             return buildGridLinearRows(this.gridData().records, !this.aiReadonly());
         });
+        this.domToolTips = computed(() => {
+            const scrollTop = this.aiTable.context.scrollState().scrollTop;
+            const rowIndices = this.toolTipRowIndices();
+            return rowIndices.map((rowIndex) => {
+                return {
+                    top: rowIndex * AI_TABLE_ROW_HEIGHT - scrollTop,
+                    left: 0
+                };
+            });
+        });
+        this.toolTipRowIndices = computed(() => {
+            const hiddenRows = this.aiTable.recordsWillHidden() || [];
+            const toolTipRowIndices = hiddenRows.map((rowId) => {
+                return this.aiTable.context?.visibleRowsIndexMap().get(rowId) || 0;
+            });
+            return toolTipRowIndices;
+        });
         this.visibleColumnsIndexMap = computed(() => {
             const columns = AITable.getVisibleFields(this.aiTable);
             return new Map(columns?.map((item, index) => [item._id, index]));
         });
+        this.fieldOptions = computed(() => {
+            let allFieldOptions = defaultFieldOptions.map((fieldOption) => {
+                fieldOption.name = getI18nTextByKey(this.aiTable, fieldOption.name);
+                return fieldOption;
+            });
+            Object.entries(this.aiTable.context?.aiFieldConfig()?.customFields || {}).forEach(([fieldType, fieldConfig]) => {
+                if (fieldConfig?.fieldOption) {
+                    allFieldOptions.push(fieldConfig.fieldOption);
+                }
+            });
+            const fieldOptionMap = new Map(allFieldOptions.map((fieldOption) => [fieldOption.type, fieldOption]));
+            const fieldOptionKeys = this.aiTable.context?.aiFieldConfig()?.fieldOptionKeys || [];
+            if (fieldOptionKeys.length > 0) {
+                allFieldOptions = fieldOptionKeys.map((fieldOptionKey) => fieldOptionMap.get(fieldOptionKey));
+            }
+            return allFieldOptions;
+        });
+        this.fieldOptionMap = computed(() => {
+            return new Map(this.fieldOptions().map((fieldOption) => [fieldOption.type, fieldOption]));
+        });
         this.visibleRowsIndexMap = computed(() => {
             return new Map(this.linearRows().map((row, index) => [row._id, index]));
         });
         this.containerElement = computed(() => {
             return this.container().nativeElement;
         });
+        this.trackBy = (index, item) => {
+            return item.sort_by ?? index;
+        };
         this.rendererConfig = computed(() => {
             const fields = AITable.getVisibleFields(this.aiTable);
             const coordinate = new Coordinate({
@@ -9812,6 +10325,13 @@ class AITableGrid extends AITableGridBase {
         this.scrollbarWidth = computed(() => {
             return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         });
+        this.i18nTexts = computed(() => {
+            this.aiGetI18nTextByKey();
+            return {
+                rowAddFilterTooltip: getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip)
+            };
+        });
+        // rowAddFilterTooltip = getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip);
         this.actions = {
             updateFieldValue: (data) => {
                 this.aiUpdateFieldValue.emit(data);
@@ -9864,7 +10384,7 @@ class AITableGrid extends AITableGridBase {
             this.bindGlobalMousedown();
             this.containerResizeListener();
             this.bindWheel();
-            this.bindClipboardShortcuts();
+            this.bindShortcuts();
         });
         effect(() => {
             if (this.hasContainerRect() && this.horizontalBarRef() && this.verticalBarRef()) {
@@ -9907,6 +10427,7 @@ class AITableGrid extends AITableGridBase {
     ngOnInit() {
         super.ngOnInit();
         this.initContext();
+        this.initCustomField();
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
@@ -9924,9 +10445,27 @@ class AITableGrid extends AITableGridBase {
             aiFieldConfig: this.aiFieldConfig,
             scrollAction: this.scrollAction,
             maxFields: this.aiMaxFields,
-            maxRecords: this.aiMaxRecords
+            maxRecords: this.aiMaxRecords,
+            fieldOptions: this.fieldOptions,
+            fieldOptionMap: this.fieldOptionMap
         });
     }
+    initCustomField() {
+        const customFields = this.aiFieldConfig()?.customFields;
+        if (customFields) {
+            Object.entries(customFields).forEach(([key, customField]) => {
+                if (customField?.hoverRender) {
+                    ComponentMap[key] = customField.hoverRender;
+                }
+                if (customField?.fieldModel) {
+                    FieldModelMap[key] = customField.fieldModel;
+                }
+                if (customField?.fieldOption?.path) {
+                    IconPathMap[customField?.fieldOption.icon] = customField.fieldOption.path;
+                }
+            });
+        }
+    }
     setKeywordsMatchedCells() {
         const keywords = this.aiKeywords();
         let matchedCells = new Set();
@@ -9970,6 +10509,7 @@ class AITableGrid extends AITableGridBase {
                     const endCell = [recordId, fieldId];
                     if (startCell && !!startCell.length) {
                         this.aiTableGridSelectionService.selectCells(startCell, endCell);
+                        this.scrollViewToCell(pos, startCell, endCell, this.coordinate(), this.horizontalBarRef(), this.verticalBarRef());
                     }
                 }
             }
@@ -10004,7 +10544,10 @@ class AITableGrid extends AITableGridBase {
                     return;
                 const dragSelectionStart = [recordId, fieldId];
                 this.updateDragSelectionState(true, dragSelectionStart);
-                this.aiTableGridSelectionService.selectCells(dragSelectionStart);
+                const [expandRecordId, expandFieldId] = this.aiTable.selection().expandCell || [null, null];
+                if (expandRecordId !== recordId || expandFieldId !== fieldId) {
+                    this.aiTableGridSelectionService.selectCells(dragSelectionStart);
+                }
                 return;
             case AI_TABLE_ROW_DRAG:
                 if (!recordId)
@@ -10092,8 +10635,6 @@ class AITableGrid extends AITableGridBase {
             case AI_TABLE_ROW_ADD_BUTTON: {
                 this.aiTableGridSelectionService.clearSelection();
                 this.addRecord();
-                const { records, fields } = this.gridData();
-                this.aiTableGridSelectionService.setActiveCell([records[records.length - 1]._id, fields[0]._id]);
                 break;
             }
             case AI_TABLE_ROW_SELECT_CHECKBOX: {
@@ -10251,11 +10792,9 @@ class AITableGrid extends AITableGridBase {
         });
         this.resizeObserver.observe(this.containerElement());
     }
-    bindClipboardShortcuts() {
+    bindShortcuts() {
         fromEvent(document, 'keydown')
-            .pipe(filter((event) => ((event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v')) ||
-            event.key === 'Backspace' ||
-            event.key === 'Delete'), takeUntilDestroyed(this.destroyRef))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(async (event) => {
             if (this.aiReadonly()) {
                 return;
@@ -10274,14 +10813,39 @@ class AITableGrid extends AITableGridBase {
                 return;
             }
             event.preventDefault();
-            if (event.key === 'c') {
-                this.copyCells();
-            }
-            else if (event.key === 'v') {
-                this.pasteCells();
+            const isCopyOrPaste = (event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v');
+            const isDeleteOrBackspace = event.key === 'Backspace' || event.key === 'Delete';
+            if (isCopyOrPaste) {
+                if (event.key === 'c') {
+                    this.copyCells();
+                }
+                else if (event.key === 'v') {
+                    this.pasteCells();
+                }
+                return;
             }
-            else if (event.key === 'Backspace' || event.key === 'Delete') {
+            if (isDeleteOrBackspace) {
                 clearCells(this.aiTable, this.actions);
+                return;
+            }
+            // quick enter cell editor
+            const isKeyForInput = !isVirtualKey(event);
+            const activeCell = this.aiTable.selection().activeCell;
+            const field = activeCell && this.aiTable.fieldsMap()[activeCell[1]];
+            if (isKeyForInput && activeCell && field && field.type === AITableFieldType.text) {
+                const [recordId, fieldId] = activeCell;
+                this.aiTableGridEventService.openCellEditor(this.aiTable, {
+                    viewContainerRef: this.viewContainerRef,
+                    container: this.containerElement(),
+                    coordinate: this.coordinate(),
+                    fieldId,
+                    recordId,
+                    isSelectAll: true,
+                    references: this.aiReferences(),
+                    updateFieldValue: (value) => {
+                        this.aiUpdateFieldValue.emit(value);
+                    }
+                });
             }
         });
     }
@@ -10311,41 +10875,31 @@ class AITableGrid extends AITableGridBase {
     }
     handleFieldDragStart() {
         if (!this.aiReadonly() && this.aiTableGridSelectionService.selectedFields.size > 0) {
-            this.aiTableGridSelectionService.drag({
+            this.setDragState({
                 type: DragType.field,
                 sourceIds: this.aiTableGridSelectionService.selectedFields,
-                scroll: this.getScrollPosition(),
                 coordinate: this.coordinate()
             });
         }
     }
     handleFieldWidthDragStart(fieldId) {
         if (!this.aiReadonly() && fieldId) {
-            this.aiTableGridSelectionService.drag({
+            this.setDragState({
                 type: DragType.columnWidth,
                 sourceIds: new Set([fieldId]),
-                scroll: this.getScrollPosition(),
                 coordinate: this.coordinate()
             });
         }
     }
     handleRowDragStart(recordIds) {
         if (!this.aiReadonly() && !this.aiRowDragDisabled() && recordIds.length > 0) {
-            this.aiTableGridSelectionService.drag({
+            this.setDragState({
                 type: DragType.record,
                 sourceIds: new Set(recordIds),
-                scroll: this.getScrollPosition(),
                 coordinate: this.coordinate()
             });
         }
     }
-    getScrollPosition() {
-        const horizontalBar = this.horizontalBarRef()?.nativeElement;
-        const verticalBar = this.verticalBarRef()?.nativeElement;
-        let scrollLeft = horizontalBar?.scrollLeft || 0;
-        let scrollTop = verticalBar?.scrollTop || 0;
-        return { x: scrollLeft, y: scrollTop };
-    }
     dragEnd(data) {
         switch (data.type) {
             case DragType.field:
@@ -10376,21 +10930,75 @@ class AITableGrid extends AITableGridBase {
                 }
                 return;
         }
-        this.aiTableGridSelectionService.clearDrag();
+        this.setDragState({
+            type: DragType.none,
+            sourceIds: new Set()
+        });
+    }
+    setDragState(config) {
+        this.aiTable.dragState.set(config);
+    }
+    scrollViewToCell(position, startCell, endCell, coordinate, horizontalBarRef, verticalBarRef) {
+        const [, startFieldId] = startCell;
+        const [endRecordId, endFieldId] = endCell;
+        const startColIndex = this.aiTable.context.visibleColumnsIndexMap().get(startFieldId);
+        const endRowIndex = this.aiTable.context.visibleRowsIndexMap().get(endRecordId);
+        const endColIndex = this.aiTable.context.visibleColumnsIndexMap().get(endFieldId);
+        const isSelectionOnlyOnFrozenColumn = startColIndex === 0 && endColIndex === 0;
+        const endCellTop = coordinate.getRowOffset(endRowIndex);
+        const endCellLeft = coordinate.getColumnOffset(endColIndex);
+        const scrollState = this.aiTable.context.scrollState();
+        const gridData = this.aiTable.gridData();
+        const containerRect = coordinate.container.getBoundingClientRect();
+        this.scrollControllerService.scroll({
+            container: containerRect,
+            target: position,
+            direction: isSelectionOnlyOnFrozenColumn ? 'vertical' : 'both',
+            scrollableElement: {
+                horizontalElement: horizontalBarRef?.nativeElement,
+                verticalElement: verticalBarRef?.nativeElement
+            },
+            frozenArea: {
+                top: AI_TABLE_FIELD_HEAD_HEIGHT,
+                left: coordinate.getColumnWidth(0) + this.aiTable.context.rowHeadWidth(),
+                bottom: containerRect.height - AI_TABLE_SCROLL_BAR_SIZE,
+                right: containerRect.width - AI_TABLE_SCROLL_BAR_SIZE
+            },
+            edgeThreshold: {
+                left: AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD,
+                top: AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD,
+                right: AI_TABLE_SCROLL_BAR_SIZE + AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD,
+                bottom: AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD
+            },
+            onScrollChange: (position, isAutoScrolling) => {
+                if (isAutoScrolling) {
+                    const scrollLeft = position.x - scrollState.scrollLeft;
+                    const scrollTop = position.y - scrollState.scrollTop;
+                    const nextCellIndex = coordinate.getColumnStartIndex(endCellLeft + scrollLeft);
+                    const nextRowIndex = coordinate.getRowStartIndex(endCellTop + scrollTop);
+                    // 向左滚动，单元格向后退一格，防止选区进入冻结列
+                    const nextField = gridData.fields[isSelectionOnlyOnFrozenColumn || scrollLeft > 0 ? nextCellIndex : nextCellIndex + 1];
+                    const nextRecord = gridData.records[nextRowIndex];
+                    if (nextField && nextRecord) {
+                        this.aiTableGridSelectionService.selectCells([startCell[0], nextField._id], [nextRecord._id, startCell[1]]);
+                    }
+                }
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\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        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", outputs: ["dragEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableScrollControllerService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\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        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
-                    }, imports: [AITableRenderer, AITableDragComponent], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\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        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
+                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableScrollControllerService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\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        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowType, AITableSelectAllState, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, 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_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_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, 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_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_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, AttachmentField, AttachmentPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, 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, EditPath, FONT_SIZE_SM, FieldModelMap, GRID_CELL_EDITOR_MAP, 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, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, clearCells, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getPlaceHolderCellsConfigs, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmptyOrNot, isMac, isMeetFilter, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, processPastedValueForSelect, readFromClipboard, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, transformCellValue, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCellAttachment, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridSelectionService, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderer, AITableRowType, 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_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_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, 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_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_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, AbstractEditCellEditor, AddOutlinedPath, AttachmentField, AttachmentPath, CellDrawer, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, 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, GRID_CELL_EDITOR_MAP, HoverCellComponent, 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, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, defaultFieldOptions, drawer, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getPlaceHolderCellsConfigs, 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, processPastedValueForSelect, readFromClipboard, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, transformCellValue, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map