@ai-table/grid 0.0.67 → 0.0.69

package/fesm2022/ai-table-grid.mjs

@@ -1291,7 +1291,8 @@ const AITableQueries = {
 
 class RendererContext {
     constructor(options) {
-        const { linearRows, pointPosition, scrollState, visibleColumnsIndexMap, visibleRowsIndexMap, frozenColumnCount, references, aiFieldConfig, scrollAction } = options;
+        const { rowHeadWidth, linearRows, pointPosition, scrollState, visibleColumnsIndexMap, visibleRowsIndexMap, frozenColumnCount, references, aiFieldConfig, scrollAction } = options;
+        this.rowHeadWidth = rowHeadWidth;
         this.linearRows = linearRows;
         this.pointPosition = pointPosition;
         this.scrollState = scrollState;
@@ -2642,6 +2643,9 @@ function cellValueToSortValue$5(cellValue, field, references, sortKey = 'title')
 }
 
 class DateField extends DateFieldBase {
+    transformCellValue(cellValue, options) {
+        return transformCellValue(options.aiTable, options.field, cellValue);
+    }
     isMeetFilter(condition, cellValue) {
         const [left, right] = this.getTimeRange(condition.value);
         if (isNil(cellValue)) {
@@ -2977,8 +2981,9 @@ function buildClipboardContent(aiTable, fieldIds, recordIds) {
                 html: ''
             };
             if (FieldModelMap[field.type].isValid(cellValue)) {
-                const transformValue = transformCellValue(aiTable, field, cellValue);
-                const cellTexts = FieldModelMap[field.type].cellFullText(transformValue, field, references);
+                const fieldModel = FieldModelMap[field.type];
+                const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
+                const cellTexts = fieldModel.cellFullText(transformValue, field, references);
                 cellContent = {
                     text: cellTexts.join(','),
                     html: cellTexts.join(',')
@@ -3613,6 +3618,9 @@ function toRateFieldValue(plainText, targetField, originData) {
 }
 
 class RichTextField extends RichTextFieldBase {
+    transformCellValue(cellValue, options) {
+        return transformCellValue(options.aiTable, options.field, cellValue);
+    }
     isMeetFilter(condition, cellValue, options) {
         const textValue = transformCellValue(options.aiTable, options.field, cellValue || []);
         switch (condition.operation) {
@@ -3627,8 +3635,8 @@ class RichTextField extends RichTextFieldBase {
         }
     }
     compare(cellValue1, cellValue2, references, sortKey, options) {
-        const value1 = transformCellValue(options.aiTable, options.field, cellValue1 || []);
-        const value2 = transformCellValue(options.aiTable, options.field, cellValue2 || []);
+        const value1 = this.transformCellValue(cellValue1 || [], options);
+        const value2 = this.transformCellValue(cellValue2 || [], options);
         return compareString(value1, value2);
     }
     toFieldValue(plainText, targetField, originData) {
@@ -3708,6 +3716,9 @@ function getCellHorizontalPosition(options) {
     const { columnWidth } = options;
     return { width: columnWidth, offset: 0 };
 }
+// @deprecated 请使用 FieldModelMap 的 transformCellValue 方法
+// const fieldModel = FieldModelMap[field.type];
+// const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
 function transformCellValue(aiTable, field, cellValue) {
     const fieldModel = FieldModelMap[field.type];
     if (!fieldModel.isValid(cellValue)) {
@@ -4012,7 +4023,7 @@ const scrollMax = (aiTable, coordinate, visibleColumns) => {
     const scrollMaxWidth = visibleColumns.reduce((pre, cur) => {
         const index = visibleColumnIndexMap.get(cur._id);
         return pre + (isNumber(index) ? coordinate.getColumnWidth(index) : 0);
-    }, AI_TABLE_ROW_HEAD_WIDTH) + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
+    }, aiTable.context.rowHeadWidth()) + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
     const scrollMaxHeight = coordinate.getRowOffset(coordinate.rowCount - 1) + 32;
     return { scrollMaxWidth: Math.max(scrollMaxWidth, coordinate.containerWidth), scrollMaxHeight };
 };
@@ -4022,7 +4033,7 @@ const getMousePosition = (aiTable, x, y, coordinate, fields, context, _targetNam
     const { scrollMaxWidth, scrollMaxHeight } = scrollMax(aiTable, coordinate, fields);
     const offsetTop = scrollTop + y;
     const rowIndex = coordinate.getRowStartIndex(offsetTop);
-    const offsetLeft = isWithinFrozenColumnBoundary(x, coordinate.frozenColumnWidth) ? x : scrollLeft + x;
+    const offsetLeft = isWithinFrozenColumnBoundary(x, coordinate.frozenColumnWidth, context.rowHeadWidth()) ? x : scrollLeft + x;
     const columnIndex = coordinate.getColumnStartIndex(offsetLeft);
     const areaType = offsetLeft <= scrollMaxWidth && offsetTop <= scrollMaxHeight ? AITableAreaType.grid : AITableAreaType.none;
     const targetName = getTargetName(_targetName);
@@ -4038,9 +4049,9 @@ const getMousePosition = (aiTable, x, y, coordinate, fields, context, _targetNam
         y
     };
 };
-const isWithinFrozenColumnBoundary = (x, frozenColumnWidth) => {
-    const max = AI_TABLE_ROW_HEAD_WIDTH + frozenColumnWidth;
-    const min = AI_TABLE_ROW_HEAD_WIDTH;
+const isWithinFrozenColumnBoundary = (x, frozenColumnWidth, rowHeadWidth) => {
+    const max = rowHeadWidth + frozenColumnWidth;
+    const min = rowHeadWidth;
     return x > min && x < max;
 };
 const getEditorSpace = (widthOrHeight) => {
@@ -4219,7 +4230,7 @@ const isCellMatchKeywords = (aiTable, field, recordId, keywords, references) =>
     const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
     const fieldMethod = FieldModelMap[field.type];
     if (fieldMethod.isValid(cellValue)) {
-        const transformValue = transformCellValue(aiTable, field, cellValue);
+        const transformValue = fieldMethod.transformCellValue(cellValue, { aiTable, field });
         let cellFullText = fieldMethod.cellFullText(transformValue, field, references);
         return keywords && cellFullText.length && cellFullText.some((text) => text.toLowerCase().includes(keywords.toLowerCase()));
     }
@@ -5698,9 +5709,11 @@ class Layout extends Drawer {
         // 列数
         this.columnCount = 0;
         this.containerWidth = 0;
+        this.rowHeadWidth = AI_TABLE_ROW_HEAD_WIDTH;
+        this.hiddenIndexColumn = false;
     }
     // 用于初始化或重置布局的基本属性。这个方法通常在每次渲染新的一行或单元格时调用，确保布局信息是最新的
-    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth }) {
+    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth, rowHeadWidth, hiddenIndexColumn }) {
         this.x = x;
         this.y = y;
         this.rowIndex = rowIndex;
@@ -5709,6 +5722,8 @@ class Layout extends Drawer {
         this.columnWidth = columnWidth;
         this.columnCount = columnCount;
         this.containerWidth = containerWidth;
+        this.rowHeadWidth = rowHeadWidth;
+        this.hiddenIndexColumn = hiddenIndexColumn;
     }
     // 当前单元格是否是行的第一列
     get isFirst() {
@@ -5775,20 +5790,20 @@ class AddRowLayout extends Layout {
         const frozenOffset = AI_TABLE_OFFSET;
         const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
         this.rect({
-            x: frozenOffset + AI_TABLE_ROW_DRAG_ICON_WIDTH,
+            x: this.hiddenIndexColumn ? frozenOffset : frozenOffset + AI_TABLE_ROW_DRAG_ICON_WIDTH,
             y: y + AI_TABLE_OFFSET,
-            width: columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1,
+            width: columnWidth + this.rowHeadWidth - frozenOffset + 1,
             height: rowHeight,
             fill
         });
         this.line({
-            x: frozenOffset + AI_TABLE_ROW_DRAG_ICON_WIDTH,
+            x: this.hiddenIndexColumn ? frozenOffset : frozenOffset + AI_TABLE_ROW_DRAG_ICON_WIDTH,
             y,
-            points: [0, rowHeight, columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1, rowHeight],
+            points: [0, rowHeight, columnWidth + this.rowHeadWidth - frozenOffset + 1, rowHeight],
             stroke: this.colors.gray200
         });
         this.path({
-            x: AI_TABLE_CELL_PADDING + AI_TABLE_ROW_DRAG_ICON_WIDTH,
+            x: this.hiddenIndexColumn ? AI_TABLE_CELL_PADDING : AI_TABLE_CELL_PADDING + AI_TABLE_ROW_DRAG_ICON_WIDTH,
             y: y + (rowHeight - AI_TABLE_ICON_COMMON_SIZE) / 2 - AI_TABLE_OFFSET,
             data: AddOutlinedPath,
             size: AI_TABLE_ROW_HEAD_SIZE,
@@ -6985,35 +7000,51 @@ class RecordRowLayout extends Layout {
         else if (isHoverRow) {
             fillBg = colors.gray80;
         }
-        this.customRect({
-            x: AI_TABLE_OFFSET + AI_TABLE_ROW_DRAG_ICON_WIDTH,
-            y,
-            width: AI_TABLE_ROW_HEAD_WIDTH - AI_TABLE_OFFSET - AI_TABLE_ROW_DRAG_ICON_WIDTH,
-            height: rowHeight,
-            fill: fillBg,
-            strokes: {
-                right: colors.gray200,
-                bottom: colors.gray200
+        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,
+                strokes: {
+                    right: colors.gray200,
+                    bottom: colors.gray200
+                }
+            });
+            if (!isCheckedRow && !isHoverRow) {
+                // 设置字体样式，居中绘制行号
+                this.setStyle({ fontSize: DEFAULT_FONT_SIZE });
+                this.text({
+                    x: (this.rowHeadWidth + AI_TABLE_ROW_DRAG_ICON_WIDTH) / 2,
+                    y: y + AI_TABLE_FIELD_HEAD_HEIGHT / 2,
+                    text: String(row.displayIndex),
+                    textAlign: DEFAULT_TEXT_ALIGN_CENTER,
+                    verticalAlign: DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE
+                });
             }
-        });
-        // 第一列单元格
-        this.rect({
-            x: AI_TABLE_ROW_HEAD_WIDTH,
-            y,
-            width: columnWidth + AI_TABLE_OFFSET,
-            height: rowHeight,
-            fill: fill,
-            stroke: colors.gray200
-        });
-        if (!isCheckedRow && !isHoverRow) {
-            // 设置字体样式，居中绘制行号
-            this.setStyle({ fontSize: DEFAULT_FONT_SIZE });
-            this.text({
-                x: (AI_TABLE_ROW_HEAD_WIDTH + AI_TABLE_ROW_DRAG_ICON_WIDTH) / 2,
-                y: y + AI_TABLE_FIELD_HEAD_HEIGHT / 2,
-                text: String(row.displayIndex),
-                textAlign: DEFAULT_TEXT_ALIGN_CENTER,
-                verticalAlign: DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE
+            // 第一列单元格
+            this.rect({
+                x: this.rowHeadWidth,
+                y,
+                width: columnWidth + AI_TABLE_OFFSET,
+                height: rowHeight,
+                fill: fill,
+                stroke: colors.gray200
+            });
+        }
+        else {
+            // 第一列单元格
+            this.customRect({
+                x: this.rowHeadWidth,
+                y,
+                width: columnWidth + AI_TABLE_OFFSET,
+                height: rowHeight,
+                fill: fill,
+                strokes: {
+                    right: colors.gray200,
+                    bottom: colors.gray200
+                }
             });
         }
         if (this.isLast) {
@@ -7114,7 +7145,9 @@ const createCells = (config) => {
                         columnWidth,
                         rowHeight: AI_TABLE_FIELD_HEAD_HEIGHT,
                         columnCount,
-                        containerWidth: coordinate.containerWidth
+                        containerWidth: coordinate.containerWidth,
+                        rowHeadWidth: context.rowHeadWidth(),
+                        hiddenIndexColumn: !!context.aiFieldConfig()?.hiddenIndexColumn
                     });
                     addRowLayout.render({
                         isHoverRow,
@@ -7134,7 +7167,9 @@ const createCells = (config) => {
                         columnWidth,
                         rowHeight,
                         columnCount,
-                        containerWidth: coordinate.containerWidth
+                        containerWidth: coordinate.containerWidth,
+                        rowHeadWidth: context.rowHeadWidth(),
+                        hiddenIndexColumn: !!context.aiFieldConfig()?.hiddenIndexColumn
                     });
                     recordRowLayout.render({
                         row,
@@ -7151,7 +7186,8 @@ const createCells = (config) => {
                     const realY = y + AI_TABLE_OFFSET;
                     const style = { fontWeight: DEFAULT_FONT_STYLE };
                     const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, fieldId]);
-                    const transformValue = transformCellValue(aiTable, field, cellValue);
+                    const fieldModel = FieldModelMap[field.type];
+                    const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
                     const render = {
                         aiTable,
                         x: realX,
@@ -7721,20 +7757,43 @@ class AITableFrozenColumnHeads {
     constructor() {
         this.config = input.required();
         this.coordinate = computed(() => {
-            return this.config().coordinate;
+            const config = this.config();
+            if (!config)
+                return null;
+            return config.coordinate;
+        });
+        this.hiddenIndexColumn = computed(() => {
+            const context = this.context();
+            if (!context)
+                return false;
+            return context?.aiFieldConfig()?.hiddenIndexColumn;
+        });
+        this.context = computed(() => {
+            const config = this.config();
+            if (!config)
+                return null;
+            return config?.aiTable.context;
         });
         this.isChecked = computed(() => {
-            // 目前只需要展示全部选中和空的状态
-            return this.config().aiTable.selection().selectAllState === AITableSelectAllState.all;
+            const config = this.config();
+            if (!config)
+                return false;
+            return config.aiTable.selection().selectAllState === AITableSelectAllState.all;
         });
         this.fieldHeadHeight = computed(() => {
-            return this.coordinate().rowInitSize;
+            const coord = this.coordinate();
+            if (!coord)
+                return 0;
+            return coord.rowInitSize;
         });
         this.headConfigs = computed(() => {
+            const coord = this.coordinate();
+            if (!coord)
+                return [];
             return createColumnHeads({
                 ...this.config(),
                 columnStartIndex: 0,
-                columnStopIndex: this.coordinate().frozenColumnCount - 1
+                columnStopIndex: coord.frozenColumnCount - 1
             });
         });
         this.dragHeadBgConfig = computed(() => {
@@ -7748,28 +7807,39 @@ class AITableFrozenColumnHeads {
             };
         });
         this.numberHeadBgConfig = computed(() => {
+            const ctx = this.context();
+            if (!ctx)
+                return { width: 0, height: 0 };
             return {
                 x: AI_TABLE_OFFSET,
                 y: AI_TABLE_OFFSET,
-                width: AI_TABLE_ROW_HEAD_WIDTH,
+                width: ctx.rowHeadWidth() || 0,
                 height: this.fieldHeadHeight(),
                 fill: Colors.white,
                 listening: false
             };
         });
-        this.topLineConfig = {
-            x: AI_TABLE_OFFSET + AI_TABLE_ROW_DRAG_ICON_WIDTH,
-            y: AI_TABLE_OFFSET,
-            points: [0, 0, AI_TABLE_ROW_HEAD_WIDTH, 0],
-            stroke: Colors.gray200,
-            strokeWidth: 1,
-            listening: false
-        };
+        this.topLineConfig = computed(() => {
+            const ctx = this.context();
+            if (!ctx)
+                return { points: [0, 0, 0, 0] };
+            return {
+                x: AI_TABLE_OFFSET + AI_TABLE_ROW_DRAG_ICON_WIDTH,
+                y: AI_TABLE_OFFSET,
+                points: [0, 0, ctx.rowHeadWidth(), 0],
+                stroke: Colors.gray200,
+                strokeWidth: 1,
+                listening: false
+            };
+        });
         this.bottomLineConfig = computed(() => {
+            const ctx = this.context();
+            if (!ctx)
+                return { points: [0, 0, 0, 0] };
             return {
                 x: AI_TABLE_OFFSET + AI_TABLE_ROW_DRAG_ICON_WIDTH,
                 y: AI_TABLE_OFFSET,
-                points: [AI_TABLE_ROW_HEAD_WIDTH, this.fieldHeadHeight(), 0, this.fieldHeadHeight()],
+                points: [ctx.rowHeadWidth(), this.fieldHeadHeight(), 0, this.fieldHeadHeight()],
                 stroke: Colors.gray200,
                 strokeWidth: 1,
                 listening: false
@@ -7787,32 +7857,77 @@ class AITableFrozenColumnHeads {
             };
         });
         this.headBgConfig = computed(() => {
-            const { frozenColumnWidth } = this.coordinate();
+            const coord = this.coordinate();
+            const ctx = this.context();
+            if (!coord || !ctx)
+                return { width: 0, height: 0 };
             return {
-                x: AI_TABLE_ROW_HEAD_WIDTH,
+                x: ctx.rowHeadWidth(),
                 y: AI_TABLE_OFFSET,
-                width: frozenColumnWidth + AI_TABLE_OFFSET,
+                width: coord.frozenColumnWidth + AI_TABLE_OFFSET,
                 height: this.fieldHeadHeight(),
                 stroke: Colors.gray200,
-                strokeWidth: 1,
+                strokeWidth: this.hiddenIndexColumn() ? 0 : 1,
                 fill: Colors.transparent,
-                listening: false
+                listening: false,
+                zIndex: 10
             };
         });
+        this.cellLinesConfig = computed(() => {
+            const coord = this.coordinate();
+            const ctx = this.context();
+            if (!coord || !ctx)
+                return [];
+            return [
+                {
+                    x: ctx.rowHeadWidth(),
+                    y: AI_TABLE_OFFSET,
+                    points: [0, 0, coord.frozenColumnWidth + AI_TABLE_OFFSET, 0],
+                    stroke: Colors.gray200,
+                    strokeWidth: 1,
+                    listening: false,
+                    zIndex: 10
+                },
+                {
+                    x: ctx.rowHeadWidth(),
+                    y: AI_TABLE_OFFSET,
+                    points: [coord.frozenColumnWidth + AI_TABLE_OFFSET, 0, coord.frozenColumnWidth + AI_TABLE_OFFSET, this.fieldHeadHeight()],
+                    stroke: Colors.gray200,
+                    strokeWidth: 1,
+                    listening: false,
+                    zIndex: 10
+                },
+                {
+                    x: ctx.rowHeadWidth(),
+                    y: AI_TABLE_OFFSET,
+                    points: [0, this.fieldHeadHeight(), coord.frozenColumnWidth + AI_TABLE_OFFSET, this.fieldHeadHeight()],
+                    stroke: Colors.gray200,
+                    strokeWidth: 1,
+                    listening: false,
+                    zIndex: 10
+                }
+            ];
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFrozenColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableFrozenColumnHeads, isStandalone: true, selector: "ai-table-frozen-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        <ko-rect [config]="dragHeadBgConfig()"></ko-rect>
-        <ko-rect [config]="numberHeadBgConfig()"></ko-rect>
-        <ko-line [config]="topLineConfig"></ko-line>
-        <ko-line [config]="bottomLineConfig()"></ko-line>
-        <ko-group>
-            <ai-table-icon [config]="iconConfig()"></ai-table-icon>
-        </ko-group>
+        <ko-rect [config]="headBgConfig()"></ko-rect>
+        @if (!hiddenIndexColumn()) {
+            <ko-rect [config]="dragHeadBgConfig()"></ko-rect>
+            <ko-rect [config]="numberHeadBgConfig()"></ko-rect>
+            <ko-line [config]="topLineConfig()"></ko-line>
+            <ko-line [config]="bottomLineConfig()"></ko-line>
+            <ko-group>
+                <ai-table-icon [config]="iconConfig()"></ai-table-icon>
+            </ko-group>
+        } @else {
+            @for (lineConfig of cellLinesConfig(); track $index) {
+                <ko-line [config]="lineConfig"></ko-line>
+            }
+        }
         @for (config of headConfigs(); track $index) {
             <ai-table-field-head [config]="config"></ai-table-field-head>
         }
-        <ko-rect [config]="headBgConfig()"></ko-rect>
     `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableFieldHead, selector: "ai-table-field-head", inputs: ["config"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFrozenColumnHeads, decorators: [{
@@ -7820,17 +7935,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     selector: 'ai-table-frozen-column-heads',
                     template: `
-        <ko-rect [config]="dragHeadBgConfig()"></ko-rect>
-        <ko-rect [config]="numberHeadBgConfig()"></ko-rect>
-        <ko-line [config]="topLineConfig"></ko-line>
-        <ko-line [config]="bottomLineConfig()"></ko-line>
-        <ko-group>
-            <ai-table-icon [config]="iconConfig()"></ai-table-icon>
-        </ko-group>
+        <ko-rect [config]="headBgConfig()"></ko-rect>
+        @if (!hiddenIndexColumn()) {
+            <ko-rect [config]="dragHeadBgConfig()"></ko-rect>
+            <ko-rect [config]="numberHeadBgConfig()"></ko-rect>
+            <ko-line [config]="topLineConfig()"></ko-line>
+            <ko-line [config]="bottomLineConfig()"></ko-line>
+            <ko-group>
+                <ai-table-icon [config]="iconConfig()"></ai-table-icon>
+            </ko-group>
+        } @else {
+            @for (lineConfig of cellLinesConfig(); track $index) {
+                <ko-line [config]="lineConfig"></ko-line>
+            }
+        }
         @for (config of headConfigs(); track $index) {
             <ai-table-field-head [config]="config"></ai-table-field-head>
         }
-        <ko-rect [config]="headBgConfig()"></ko-rect>
     `,
                     standalone: true,
                     imports: [KoShape, AITableFieldHead, AITableIcon, KoContainer],
@@ -7953,7 +8074,7 @@ class AITableHoverRowHeads {
                     y: coordinate.getRowOffset(rowIndex),
                     bgConfig: {
                         name: generateTargetName({ targetName: AI_TABLE_ROW_HEAD, recordId }),
-                        width: AI_TABLE_ROW_HEAD_WIDTH + 1,
+                        width: context.rowHeadWidth() + 1,
                         height: coordinate.rowHeight,
                         fill: Colors.transparent
                     }
@@ -8141,7 +8262,8 @@ class AITableHoverCells {
             }
             const { field, recordId } = hoverCell;
             const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
-            const transformValue = transformCellValue(aiTable, field, cellValue);
+            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;
@@ -8235,6 +8357,9 @@ class AITableRenderer {
         this.readonly = computed(() => {
             return this.config()?.readonly;
         });
+        this.hiddenIndexColumn = computed(() => {
+            return this.config()?.aiTable.context?.aiFieldConfig()?.hiddenIndexColumn;
+        });
         this.rowDragDisabled = computed(() => {
             return this.config()?.rowDragDisabled;
         });
@@ -8254,7 +8379,7 @@ class AITableRenderer {
             return getVisibleRangeInfo(this.coordinate(), this.scrollState());
         });
         this.frozenAreaWidth = computed(() => {
-            return AI_TABLE_ROW_HEAD_WIDTH + this.coordinate().frozenColumnWidth;
+            return this.config().aiTable.context.rowHeadWidth() + this.coordinate().frozenColumnWidth;
         });
         this.lastColumnWidth = computed(() => {
             return this.coordinate().getColumnWidth(this.visibleRangeInfo().columnStopIndex);
@@ -8381,7 +8506,7 @@ class AITableRenderer {
         this.koMouseleave.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\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                    <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                    <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: "18.2.13", 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                    <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                    <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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -8399,7 +8524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\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                    <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                    <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                </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                    <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                    <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" }]
         }] });
 
 class AITableCellRate {
@@ -9390,7 +9515,7 @@ class AITableDragComponent {
         if ((targetColumnIndex >= 0 && (targetColumnIndex - sourceColumnIndex > 1 || targetColumnIndex - sourceColumnIndex < 0)) ||
             isLastColumn) {
             let lineLeft = targetColumnStartX - scroll.x;
-            const lineForFrozenX = lineLeft - frozenColumnWidth - AI_TABLE_ROW_HEAD_WIDTH;
+            const lineForFrozenX = lineLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
             if (lineForFrozenX < 0) {
                 lineLeft = coordinate.getColumnOffset(0);
                 targetColumnIndex = 0;
@@ -9592,7 +9717,7 @@ class AITableGrid extends AITableGridBase {
                 rowCount: this.linearRows().length,
                 columnCount: fields.length,
                 rowInitSize: AI_TABLE_FIELD_HEAD_HEIGHT,
-                columnInitSize: AI_TABLE_ROW_HEAD_WIDTH,
+                columnInitSize: this.aiTable.context.rowHeadWidth(),
                 rowIndicesSizeMap: {},
                 columnIndicesSizeMap: getColumnIndicesSizeMap(this.aiTable, fields),
                 frozenColumnCount: this.frozenColumnCount()
@@ -9710,6 +9835,7 @@ class AITableGrid extends AITableGridBase {
     }
     initContext() {
         this.aiTable.context = new RendererContext({
+            rowHeadWidth: computed(() => (this.aiFieldConfig()?.hiddenIndexColumn ? 0 : AI_TABLE_ROW_HEAD_WIDTH)),
             linearRows: this.linearRows,
             visibleColumnsIndexMap: this.visibleColumnsIndexMap,
             visibleRowsIndexMap: this.visibleRowsIndexMap,