@progress/kendo-angular-grid 21.1.1-develop.2 → 21.2.0-develop.10

package/esm2022/rendering/table-body.component.mjs

@@ -31,7 +31,7 @@ import { GroupHeaderComponent } from '../grouping/group-header.component';
 import { CellComponent } from './cell.component';
 import { LogicalCellDirective } from '../navigation/logical-cell.directive';
 import { LogicalRowDirective } from '../navigation/logical-row.directive';
-import { NgIf, NgFor, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./details/details.service";
 import * as i2 from "../grouping/groups.service";
@@ -176,15 +176,19 @@ export class TableBodyComponent {
         return this.selectionService.settings?.isRowSelectable(args) || this.cellSelectionService.settings?.isRowSelectable(args);
     }
     trackByWrapper(index, item) {
-        if (item.type === 'data') {
-            item.isEditing = this.editService.hasEdited(item.index);
-        }
         return this.trackBy(index, item);
     }
     trackByColumns(index, item) {
         return this.virtualColumns ? index : item;
     }
     ngDoCheck() {
+        if (this.rowsToRender) {
+            this.rowsToRender.forEach((item) => {
+                if (item.type === 'data') {
+                    item.isEditing = this.editService.hasEdited(item.index);
+                }
+            });
+        }
         if (this.hasGroupHeaderColumn) {
             this.groupHeaderColumns = columnsToRender(this.skipGroupDecoration ? this.columns : this.columns.toArray().slice(1));
         }
@@ -493,8 +497,8 @@ export class TableBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.DetailsService }, { token: i2.GroupsService }, { token: i3.ChangeNotificationService }, { token: i4.EditService }, { token: i5.ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.DomEventsService }, { token: i7.SelectionService }, { token: i8.CellSelectionService }, { token: i9.ColumnInfoService }, { token: i10.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TableBodyComponent, isStandalone: true, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", rowsToRender: "rowsToRender", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
-    <ng-container *ngIf="editService.hasNewItem">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TableBodyComponent, isStandalone: true, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", rowsToRender: "rowsToRender", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    @if (editService.hasNewItem) {
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             [style.height.px]="rowHeight"
             kendoGridLogicalRow
@@ -503,200 +507,220 @@ export class TableBodyComponent {
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount()"
                 [totalColumns]="totalColumns">
-            <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
-            </ng-container>
-            <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef && !isStackedMode"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="addRowLogicalIndex()"
-                    [logicalColIndex]="0"
-                    aria-selected="false"
-                >
-            </td>
-            <ng-container *ngIf="isStackedMode; else columnsTemplate">
-                <td *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;"
-                    class="k-table-td"
-                    kendoGridCell
-                        [rowIndex]="-1"
-                        [columnIndex]="0"
-                        [isNew]="true"
-                        [columns]="allColumns"
-                        [dataItem]="newDataItem"
-                    kendoGridLogicalCell
-                        [logicalRowIndex]="addRowLogicalIndex()"
-                        [logicalColIndex]="0">
-                </td>
-            </ng-container>
-            <ng-template #columnsTemplate>
-                <td *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;"
-                    class="k-table-td"
-                    kendoGridCell
-                        [rowIndex]="-1"
-                        [columnIndex]="lockedColumnsCount + columnIndex"
-                        [isNew]="true"
-                        [column]="column"
-                        [dataItem]="newDataItem"
-                    [class.k-grid-content-sticky]="column.sticky"
-                    [ngClass]="column.cssClass"
-                    [style.left]="column.sticky ? '0' : undefined"
-                    [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
-                    [attr.colspan]="column.colspan"
-                    [attr.role]="column.tableCellsRole"
+            @if (!skipGroupDecoration) {
+                @for (g of groups; track $index) {
+                    <td class="k-group-cell k-table-td k-table-group-td" role="presentation"></td>
+                }
+            }
+            @if (detailTemplate?.templateRef && !isStackedMode) {
+                <td class="k-hierarchy-cell k-table-td"
                     kendoGridLogicalCell
                         [logicalRowIndex]="addRowLogicalIndex()"
-                        [logicalColIndex]="logicalColIndex(column)"
-                        [colSpan]="column.colspan">
+                        [logicalColIndex]="0"
+                        aria-selected="false"
+                    >
                 </td>
-            </ng-template>
-        </tr>
-    </ng-container>
-    <tr *ngIf="!rowsToRender?.length" class="k-grid-norecords" role="row">
-        <td [attr.colspan]="colSpan" class="k-table-td">
-            <ng-template
-                *ngIf="noRecordsTemplate?.templateRef"
-                [templateContext]="{
-                    templateRef: noRecordsTemplate?.templateRef
-                 }">
-            </ng-template>
-            <ng-container *ngIf="!noRecordsTemplate?.templateRef">
-                {{noRecordsText}}
-            </ng-container>
-        </td>
-    </tr>
-    <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
-        <tr *ngIf="item.type === 'group'"
-            [style.height.px]="rowHeight"
-            kendoGridGroupHeader
-                [columns]="columns"
-                [groups]="groups"
-                [item]="$any(item)"
-                [hasDetails]="!!detailTemplate?.templateRef"
-                [skipGroupDecoration]="skipGroupDecoration"
-                [hasGroupHeaderColumn]="hasGroupHeaderColumn"
-                [groupHeaderColumns]="groupHeaderColumns"
-                [rowIndex]="rowIndex + 1"
-                [totalColumnsCount]="totalColumnsCount"
-            kendoGridLogicalRow
-                [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
-                [totalColumns]="totalColumns"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
+            }
+            @if (isStackedMode) {
+                @for (item of rowsToRender; track trackByWrapper($index, item); let rowIndex = $index) {
+                    <td
+                        class="k-table-td"
+                        kendoGridCell
+                            [rowIndex]="-1"
+                            [columnIndex]="0"
+                            [isNew]="true"
+                            [columns]="allColumns"
+                            [dataItem]="newDataItem"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="addRowLogicalIndex()"
+                            [logicalColIndex]="0">
+                    </td>
+                }
+            } @else {
+                @for (column of columns; track virtualColumns ? $index : column; let columnIndex = $index) {
+                    <td
+                        class="k-table-td"
+                        kendoGridCell
+                            [rowIndex]="-1"
+                            [columnIndex]="lockedColumnsCount + columnIndex"
+                            [isNew]="true"
+                            [column]="column"
+                            [dataItem]="newDataItem"
+                        [class.k-grid-content-sticky]="column.sticky"
+                        [ngClass]="column.cssClass"
+                        [style.left]="column.sticky ? '0' : undefined"
+                        [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
+                        [attr.colspan]="column.colspan"
+                        [attr.role]="column.tableCellsRole"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="addRowLogicalIndex()"
+                            [logicalColIndex]="logicalColIndex(column)"
+                            [colSpan]="column.colspan">
+                    </td>
+                }
+            }
         </tr>
-        <tr *ngIf="item.showDataItem"
-            [style.height.px]="rowHeight"
-            kendoGridLogicalRow
-                [dataRowIndex]="$any(item).index"
-                [dataItem]="item.data"
-                [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
-                [totalColumns]="totalColumns"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
-            class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
-            [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
-            [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
-            [class.k-master-row]="true"
-            [class.k-expanded]="item.isExpanded && !isStackedMode"
-            [class.k-grid-edit-row]="isEditingRow($any(item).index)"
-            [attr.aria-selected]="(lockedColumnsCount < 1 || isStackedMode) ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
-            [attr.data-kendo-grid-item-index]="$any(item).index"
-            [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)"
-            [class.k-highlighted]="item.isHighlighted">
-            <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
-            </ng-container>
-            <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef && !isStackedMode"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="0"
-                    [dataRowIndex]="$any(item).index"
-                    [dataItem]="item.data"
-                    [detailExpandCell]="true"
-                    aria-selected="false"
-                    role="gridcell"
-                    [attr.aria-expanded]="item.isExpanded">
-                <a
-                    *ngIf="detailTemplate.showIf(item.data, $any(item).index)"
-                    [attr.title]="detailButtonTitle(item)"
-                    [attr.aria-label]="detailButtonTitle(item)"
-                    href="#" tabindex="-1" (click)="toggleRow($any(item).index, item.data)">
-                    <kendo-icon-wrapper
-                        [name]="detailButtonIconName(item)"
-                        [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
-                </a>
+    }
+    @if (!rowsToRender?.length) {
+        <tr class="k-grid-norecords" role="row">
+            <td [attr.colspan]="colSpan" class="k-table-td">
+                @if (noRecordsTemplate?.templateRef) {
+                    <ng-template
+                        [templateContext]="{
+                            templateRef: noRecordsTemplate?.templateRef
+                         }">
+                    </ng-template>
+                } @else {
+                    {{noRecordsText}}
+                }
             </td>
-            <ng-container *ngIf="isStackedMode; else columnsTemplate">
-                <td kendoGridCell
-                    [rowIndex]="$any(item).index"
-                    [detailTemplate]="detailTemplate"
-                    [item]="item"
-                    [columnIndex]="0"
-                    [attr.data-kendo-grid-column-index]="0"
+        </tr>
+    }
+    @for (item of rowsToRender; track trackByWrapper($index, item); let rowIndex = $index) {
+        @if (item.type === 'group') {
+            <tr
+                [style.height.px]="rowHeight"
+                kendoGridGroupHeader
                     [columns]="columns"
-                    [dataItem]="item.data"
-                    [isLoading]="isLoading"
-                    [isVirtual]="isVirtual"
-                    [loadingTemplate]="cellLoadingTemplate"
-                    kendoGridLogicalCell
+                    [groups]="groups"
+                    [item]="$any(item)"
+                    [hasDetails]="!!detailTemplate?.templateRef"
+                    [skipGroupDecoration]="skipGroupDecoration"
+                    [hasGroupHeaderColumn]="hasGroupHeaderColumn"
+                    [groupHeaderColumns]="groupHeaderColumns"
+                    [rowIndex]="rowIndex + 1"
+                    [totalColumnsCount]="totalColumnsCount"
+                kendoGridLogicalRow
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="0"
+                    [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
+                    [totalColumns]="totalColumns"
+                    [logicalCellsCount]="columns.length"
+                    [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
+            </tr>
+        }
+        @if (item.showDataItem) {
+            <tr
+                [style.height.px]="rowHeight"
+                kendoGridLogicalRow
                     [dataRowIndex]="$any(item).index"
                     [dataItem]="item.data"
-                    [colIndex]="0"
-                    class="k-table-td"
-                    [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag">
-                </td>
-            </ng-container>
-            <ng-template #columnsTemplate>
-                <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
-                    <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
-                        kendoGridCell
+                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                    [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
+                    [totalColumns]="totalColumns"
+                    [logicalCellsCount]="columns.length"
+                    [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
+                class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
+                [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
+                [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
+                [class.k-master-row]="true"
+                [class.k-expanded]="item.isExpanded && !isStackedMode"
+                [class.k-grid-edit-row]="isEditingRow($any(item).index)"
+                [attr.aria-selected]="(lockedColumnsCount < 1 || isStackedMode) ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
+                [attr.data-kendo-grid-item-index]="$any(item).index"
+                [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)"
+                [class.k-highlighted]="item.isHighlighted">
+                @if (!skipGroupDecoration) {
+                    @for (g of groups; track $index) {
+                        <td class="k-group-cell k-table-td k-table-group-td" role="presentation"></td>
+                    }
+                }
+                @if (detailTemplate?.templateRef && !isStackedMode) {
+                    <td class="k-hierarchy-cell k-table-td"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                            [logicalColIndex]="0"
+                            [dataRowIndex]="$any(item).index"
+                            [dataItem]="item.data"
+                            [detailExpandCell]="true"
+                            aria-selected="false"
+                            role="gridcell"
+                            [attr.aria-expanded]="item.isExpanded">
+                        @if (detailTemplate.showIf(item.data, $any(item).index)) {
+                            <a
+                                [attr.title]="detailButtonTitle(item)"
+                                [attr.aria-label]="detailButtonTitle(item)"
+                                href="#" tabindex="-1" (click)="toggleRow($any(item).index, item.data)">
+                                <kendo-icon-wrapper
+                                    [name]="detailButtonIconName(item)"
+                                    [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
+                            </a>
+                        }
+                    </td>
+                }
+                @if (isStackedMode) {
+                    <td kendoGridCell
                         [rowIndex]="$any(item).index"
-                        [columnIndex]="lockedColumnsCount + columnIndex"
-                        [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
-                        [column]="column"
-                        [columns]="allColumns"
+                        [detailTemplate]="detailTemplate"
+                        [item]="item"
+                        [columnIndex]="0"
+                        [attr.data-kendo-grid-column-index]="0"
+                        [columns]="columns"
                         [dataItem]="item.data"
                         [isLoading]="isLoading"
                         [isVirtual]="isVirtual"
                         [loadingTemplate]="cellLoadingTemplate"
                         kendoGridLogicalCell
                         [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                        [logicalColIndex]="logicalColIndex(column)"
+                        [logicalColIndex]="0"
                         [dataRowIndex]="$any(item).index"
                         [dataItem]="item.data"
-                        [colIndex]="columnIndex"
-                        [colSpan]="column.colspan"
-                        [rowSpan]="item.cells[lockedColumnsCount + columnIndex]?.rowspan"
-                        [attr.role]="column.tableCellsRole"
+                        [colIndex]="0"
                         class="k-table-td"
-                        [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
-                        [class.k-grid-content-sticky]="column.sticky"
-                        [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                        [ngClass]="column.cssClass"
-                        [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
-                        [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
-                        [attr.colspan]="column.colspan"
-                        [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
-                        [class.k-highlighted]="item.cells[lockedColumnsCount + columnIndex]?.isHighlighted">
+                        [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag">
                     </td>
-                </ng-container>
-            </ng-template>
-        </tr>
-        <tr *ngIf="item.showDetailRow"
-            class="k-detail-row"
-            [style.height.px]="detailRowHeight"
-            kendoGridLogicalRow
-                [dataRowIndex]="$any(item).index"
-                [dataItem]="item.data"
-                [logicalRowIndex]="isStackedMode ? logicalRowIndex(rowIndex) : logicalRowIndex(rowIndex) + 1"
-                [logicalSlaveRow]="false"
-                [logicalCellsCount]="1">
-                <ng-container *ngIf="!isStackedMode">
-                    <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
+                } @else {
+                    @for (column of columns; track virtualColumns ? $index : column; let columnIndex = $index) {
+                        @if (!item.cells?.[lockedColumnsCount + columnIndex]?.skip) {
+                            <td
+                                kendoGridCell
+                                [rowIndex]="$any(item).index"
+                                [columnIndex]="lockedColumnsCount + columnIndex"
+                                [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
+                                [column]="column"
+                                [columns]="allColumns"
+                                [dataItem]="item.data"
+                                [isLoading]="isLoading"
+                                [isVirtual]="isVirtual"
+                                [loadingTemplate]="cellLoadingTemplate"
+                                kendoGridLogicalCell
+                                [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                                [logicalColIndex]="logicalColIndex(column)"
+                                [dataRowIndex]="$any(item).index"
+                                [dataItem]="item.data"
+                                [colIndex]="columnIndex"
+                                [colSpan]="column.colspan"
+                                [rowSpan]="item.cells[lockedColumnsCount + columnIndex]?.rowspan"
+                                [attr.role]="column.tableCellsRole"
+                                class="k-table-td"
+                                [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
+                                [class.k-grid-content-sticky]="column.sticky"
+                                [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
+                                [ngClass]="column.cssClass"
+                                [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
+                                [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
+                                [attr.colspan]="column.colspan"
+                                [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
+                                [class.k-highlighted]="item.cells[lockedColumnsCount + columnIndex]?.isHighlighted">
+                            </td>
+                        }
+                    }
+                }
+            </tr>
+        }
+        @if (item.showDetailRow) {
+            <tr
+                class="k-detail-row"
+                [style.height.px]="detailRowHeight"
+                kendoGridLogicalRow
+                    [dataRowIndex]="$any(item).index"
+                    [dataItem]="item.data"
+                    [logicalRowIndex]="isStackedMode ? logicalRowIndex(rowIndex) : logicalRowIndex(rowIndex) + 1"
+                    [logicalSlaveRow]="false"
+                    [logicalCellsCount]="1">
+                @if (!isStackedMode) {
+                    @for (g of groups; track $index) {
+                        <td class="k-group-cell k-table-td k-table-group-td"></td>
+                    }
                     <td class="k-hierarchy-cell k-table-td"></td>
                     <td class="k-detail-cell k-table-td"
                         [attr.colspan]="columnsSpan"
@@ -717,8 +741,7 @@ export class TableBodyComponent {
                             }">
                         </ng-template>
                     </td>
-                </ng-container>
-                <ng-container *ngIf="isStackedMode">
+                } @else {
                     <td class="k-detail-cell k-table-td"
                         [attr.colspan]="columnsSpan"
                         kendoGridLogicalCell
@@ -739,83 +762,92 @@ export class TableBodyComponent {
                             }">
                         </ng-template>
                     </td>
-                </ng-container>
-        </tr>
-        <tr *ngIf="item.type === 'footer'"
-            class="k-group-footer"
-            [style.height.px]="rowHeight"
-            kendoGridLogicalRow
-                [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
-                [totalColumns]="totalColumns"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
-            <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
-            </ng-container>
-            <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef && !isStackedMode"
-                kendoGridLogicalCell
+                }
+            </tr>
+        }
+        @if (item.type === 'footer') {
+            <tr
+                class="k-group-footer"
+                [style.height.px]="rowHeight"
+                kendoGridLogicalRow
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="0"
-                    aria-selected="false">
-            </td>
+                    [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
+                    [totalColumns]="totalColumns"
+                    [logicalCellsCount]="columns.length"
+                    [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
+                @if (!skipGroupDecoration) {
+                    @for (g of groups; track $index) {
+                        <td class="k-group-cell k-table-td k-table-group-td"></td>
+                    }
+                }
+                @if (detailTemplate?.templateRef && !isStackedMode) {
+                    <td class="k-hierarchy-cell k-table-td"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                            [logicalColIndex]="0"
+                            aria-selected="false">
+                    </td>
+                }
 
-            <ng-container *ngIf="!isStackedMode">
-                <td kendoGridLogicalCell
+                @if (!isStackedMode) {
+                    @for (column of footerColumns; track virtualColumns ? $index : column; let columnIndex = $index) {
+                        <td kendoGridLogicalCell
+                                [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                                [logicalColIndex]="logicalColIndex(column)"
+                            [attr.data-skip]="skipGroupDecoration"
+                            class="k-table-td">
+                            <ng-template
+                                [templateContext]="{
+                                    templateRef: $any(column).groupFooterTemplateRef,
+                                    group: $any(item.data),
+                                    field: $any(column).field,
+                                    column: column,
+                                    aggregates: $any(item.data)?.aggregates,
+                                    $implicit: $any(item.data)?.aggregates
+                                }">
+                            </ng-template>
+                       </td>
+                    }
+                } @else {
+                    <td kendoGridLogicalCell
                         [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                        [logicalColIndex]="logicalColIndex(column)"
-                    [attr.data-skip]="skipGroupDecoration"
-                    class="k-table-td"
-                    *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
-                    <ng-template
-                        [templateContext]="{
-                            templateRef: $any(column).groupFooterTemplateRef,
-                            group: $any(item.data),
-                            field: $any(column).field,
-                            column: column,
-                            aggregates: $any(item.data)?.aggregates,
-                            $implicit: $any(item.data)?.aggregates
-                        }">
-                    </ng-template>
-               </td>
-            </ng-container>
-
-            <ng-container *ngIf="isStackedMode">
-                <td kendoGridLogicalCell
-                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="hasDetailTemplate ? 1 : 0"
-                    [attr.data-skip]="skipGroupDecoration"
-                    class="k-table-td">
-                    <div class="k-grid-column-template">
-                        <ng-container *ngFor="let col of footerColumns">
-                            <div class="k-column-template-item" *ngIf="$any(col).groupFooterTemplateRef">
-                                <ng-template
-                                    [templateContext]="{
-                                        templateRef: $any(col).groupFooterTemplateRef,
-                                        group: $any(item.data),
-                                        field: $any(col).field,
-                                        column: col,
-                                        aggregates: $any(item.data)?.aggregates,
-                                        $implicit: $any(item.data)?.aggregates
-                                    }">
-                                </ng-template>
-                            </div>
-                        </ng-container>
-                    </div>
-                </td>
-            </ng-container>
-        </tr>
-    </ng-container>
-    <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "component", type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columns", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "detailTemplate", "item", "rowIndex", "dataItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+                        [logicalColIndex]="hasDetailTemplate ? 1 : 0"
+                        [attr.data-skip]="skipGroupDecoration"
+                        class="k-table-td">
+                        <div class="k-grid-column-template">
+                            @for (col of footerColumns; track $index) {
+                                @if ($any(col).groupFooterTemplateRef) {
+                                    <div class="k-column-template-item">
+                                        <ng-template
+                                            [templateContext]="{
+                                                templateRef: $any(col).groupFooterTemplateRef,
+                                                group: $any(item.data),
+                                                field: $any(col).field,
+                                                column: col,
+                                                aggregates: $any(item.data)?.aggregates,
+                                                $implicit: $any(item.data)?.aggregates
+                                            }">
+                                        </ng-template>
+                                    </div>
+                                }
+                            }
+                        </div>
+                    </td>
+                }
+            </tr>
+        }
+    }
+    @if (rowSticky) {
+        <kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
+    }
+    `, isInline: true, dependencies: [{ kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "component", type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columns", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "detailTemplate", "item", "rowIndex", "dataItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridTableBody]',
                     template: `
-    <ng-container *ngIf="editService.hasNewItem">
+    @if (editService.hasNewItem) {
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             [style.height.px]="rowHeight"
             kendoGridLogicalRow
@@ -824,200 +856,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount()"
                 [totalColumns]="totalColumns">
-            <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
-            </ng-container>
-            <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef && !isStackedMode"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="addRowLogicalIndex()"
-                    [logicalColIndex]="0"
-                    aria-selected="false"
-                >
-            </td>
-            <ng-container *ngIf="isStackedMode; else columnsTemplate">
-                <td *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;"
-                    class="k-table-td"
-                    kendoGridCell
-                        [rowIndex]="-1"
-                        [columnIndex]="0"
-                        [isNew]="true"
-                        [columns]="allColumns"
-                        [dataItem]="newDataItem"
-                    kendoGridLogicalCell
-                        [logicalRowIndex]="addRowLogicalIndex()"
-                        [logicalColIndex]="0">
-                </td>
-            </ng-container>
-            <ng-template #columnsTemplate>
-                <td *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;"
-                    class="k-table-td"
-                    kendoGridCell
-                        [rowIndex]="-1"
-                        [columnIndex]="lockedColumnsCount + columnIndex"
-                        [isNew]="true"
-                        [column]="column"
-                        [dataItem]="newDataItem"
-                    [class.k-grid-content-sticky]="column.sticky"
-                    [ngClass]="column.cssClass"
-                    [style.left]="column.sticky ? '0' : undefined"
-                    [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
-                    [attr.colspan]="column.colspan"
-                    [attr.role]="column.tableCellsRole"
+            @if (!skipGroupDecoration) {
+                @for (g of groups; track $index) {
+                    <td class="k-group-cell k-table-td k-table-group-td" role="presentation"></td>
+                }
+            }
+            @if (detailTemplate?.templateRef && !isStackedMode) {
+                <td class="k-hierarchy-cell k-table-td"
                     kendoGridLogicalCell
                         [logicalRowIndex]="addRowLogicalIndex()"
-                        [logicalColIndex]="logicalColIndex(column)"
-                        [colSpan]="column.colspan">
+                        [logicalColIndex]="0"
+                        aria-selected="false"
+                    >
                 </td>
-            </ng-template>
-        </tr>
-    </ng-container>
-    <tr *ngIf="!rowsToRender?.length" class="k-grid-norecords" role="row">
-        <td [attr.colspan]="colSpan" class="k-table-td">
-            <ng-template
-                *ngIf="noRecordsTemplate?.templateRef"
-                [templateContext]="{
-                    templateRef: noRecordsTemplate?.templateRef
-                 }">
-            </ng-template>
-            <ng-container *ngIf="!noRecordsTemplate?.templateRef">
-                {{noRecordsText}}
-            </ng-container>
-        </td>
-    </tr>
-    <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
-        <tr *ngIf="item.type === 'group'"
-            [style.height.px]="rowHeight"
-            kendoGridGroupHeader
-                [columns]="columns"
-                [groups]="groups"
-                [item]="$any(item)"
-                [hasDetails]="!!detailTemplate?.templateRef"
-                [skipGroupDecoration]="skipGroupDecoration"
-                [hasGroupHeaderColumn]="hasGroupHeaderColumn"
-                [groupHeaderColumns]="groupHeaderColumns"
-                [rowIndex]="rowIndex + 1"
-                [totalColumnsCount]="totalColumnsCount"
-            kendoGridLogicalRow
-                [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
-                [totalColumns]="totalColumns"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
+            }
+            @if (isStackedMode) {
+                @for (item of rowsToRender; track trackByWrapper($index, item); let rowIndex = $index) {
+                    <td
+                        class="k-table-td"
+                        kendoGridCell
+                            [rowIndex]="-1"
+                            [columnIndex]="0"
+                            [isNew]="true"
+                            [columns]="allColumns"
+                            [dataItem]="newDataItem"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="addRowLogicalIndex()"
+                            [logicalColIndex]="0">
+                    </td>
+                }
+            } @else {
+                @for (column of columns; track virtualColumns ? $index : column; let columnIndex = $index) {
+                    <td
+                        class="k-table-td"
+                        kendoGridCell
+                            [rowIndex]="-1"
+                            [columnIndex]="lockedColumnsCount + columnIndex"
+                            [isNew]="true"
+                            [column]="column"
+                            [dataItem]="newDataItem"
+                        [class.k-grid-content-sticky]="column.sticky"
+                        [ngClass]="column.cssClass"
+                        [style.left]="column.sticky ? '0' : undefined"
+                        [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
+                        [attr.colspan]="column.colspan"
+                        [attr.role]="column.tableCellsRole"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="addRowLogicalIndex()"
+                            [logicalColIndex]="logicalColIndex(column)"
+                            [colSpan]="column.colspan">
+                    </td>
+                }
+            }
         </tr>
-        <tr *ngIf="item.showDataItem"
-            [style.height.px]="rowHeight"
-            kendoGridLogicalRow
-                [dataRowIndex]="$any(item).index"
-                [dataItem]="item.data"
-                [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
-                [totalColumns]="totalColumns"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
-            class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
-            [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
-            [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
-            [class.k-master-row]="true"
-            [class.k-expanded]="item.isExpanded && !isStackedMode"
-            [class.k-grid-edit-row]="isEditingRow($any(item).index)"
-            [attr.aria-selected]="(lockedColumnsCount < 1 || isStackedMode) ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
-            [attr.data-kendo-grid-item-index]="$any(item).index"
-            [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)"
-            [class.k-highlighted]="item.isHighlighted">
-            <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
-            </ng-container>
-            <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef && !isStackedMode"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="0"
-                    [dataRowIndex]="$any(item).index"
-                    [dataItem]="item.data"
-                    [detailExpandCell]="true"
-                    aria-selected="false"
-                    role="gridcell"
-                    [attr.aria-expanded]="item.isExpanded">
-                <a
-                    *ngIf="detailTemplate.showIf(item.data, $any(item).index)"
-                    [attr.title]="detailButtonTitle(item)"
-                    [attr.aria-label]="detailButtonTitle(item)"
-                    href="#" tabindex="-1" (click)="toggleRow($any(item).index, item.data)">
-                    <kendo-icon-wrapper
-                        [name]="detailButtonIconName(item)"
-                        [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
-                </a>
+    }
+    @if (!rowsToRender?.length) {
+        <tr class="k-grid-norecords" role="row">
+            <td [attr.colspan]="colSpan" class="k-table-td">
+                @if (noRecordsTemplate?.templateRef) {
+                    <ng-template
+                        [templateContext]="{
+                            templateRef: noRecordsTemplate?.templateRef
+                         }">
+                    </ng-template>
+                } @else {
+                    {{noRecordsText}}
+                }
             </td>
-            <ng-container *ngIf="isStackedMode; else columnsTemplate">
-                <td kendoGridCell
-                    [rowIndex]="$any(item).index"
-                    [detailTemplate]="detailTemplate"
-                    [item]="item"
-                    [columnIndex]="0"
-                    [attr.data-kendo-grid-column-index]="0"
+        </tr>
+    }
+    @for (item of rowsToRender; track trackByWrapper($index, item); let rowIndex = $index) {
+        @if (item.type === 'group') {
+            <tr
+                [style.height.px]="rowHeight"
+                kendoGridGroupHeader
                     [columns]="columns"
-                    [dataItem]="item.data"
-                    [isLoading]="isLoading"
-                    [isVirtual]="isVirtual"
-                    [loadingTemplate]="cellLoadingTemplate"
-                    kendoGridLogicalCell
+                    [groups]="groups"
+                    [item]="$any(item)"
+                    [hasDetails]="!!detailTemplate?.templateRef"
+                    [skipGroupDecoration]="skipGroupDecoration"
+                    [hasGroupHeaderColumn]="hasGroupHeaderColumn"
+                    [groupHeaderColumns]="groupHeaderColumns"
+                    [rowIndex]="rowIndex + 1"
+                    [totalColumnsCount]="totalColumnsCount"
+                kendoGridLogicalRow
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="0"
+                    [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
+                    [totalColumns]="totalColumns"
+                    [logicalCellsCount]="columns.length"
+                    [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
+            </tr>
+        }
+        @if (item.showDataItem) {
+            <tr
+                [style.height.px]="rowHeight"
+                kendoGridLogicalRow
                     [dataRowIndex]="$any(item).index"
                     [dataItem]="item.data"
-                    [colIndex]="0"
-                    class="k-table-td"
-                    [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag">
-                </td>
-            </ng-container>
-            <ng-template #columnsTemplate>
-                <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
-                    <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
-                        kendoGridCell
+                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                    [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
+                    [totalColumns]="totalColumns"
+                    [logicalCellsCount]="columns.length"
+                    [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
+                class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
+                [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
+                [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
+                [class.k-master-row]="true"
+                [class.k-expanded]="item.isExpanded && !isStackedMode"
+                [class.k-grid-edit-row]="isEditingRow($any(item).index)"
+                [attr.aria-selected]="(lockedColumnsCount < 1 || isStackedMode) ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
+                [attr.data-kendo-grid-item-index]="$any(item).index"
+                [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)"
+                [class.k-highlighted]="item.isHighlighted">
+                @if (!skipGroupDecoration) {
+                    @for (g of groups; track $index) {
+                        <td class="k-group-cell k-table-td k-table-group-td" role="presentation"></td>
+                    }
+                }
+                @if (detailTemplate?.templateRef && !isStackedMode) {
+                    <td class="k-hierarchy-cell k-table-td"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                            [logicalColIndex]="0"
+                            [dataRowIndex]="$any(item).index"
+                            [dataItem]="item.data"
+                            [detailExpandCell]="true"
+                            aria-selected="false"
+                            role="gridcell"
+                            [attr.aria-expanded]="item.isExpanded">
+                        @if (detailTemplate.showIf(item.data, $any(item).index)) {
+                            <a
+                                [attr.title]="detailButtonTitle(item)"
+                                [attr.aria-label]="detailButtonTitle(item)"
+                                href="#" tabindex="-1" (click)="toggleRow($any(item).index, item.data)">
+                                <kendo-icon-wrapper
+                                    [name]="detailButtonIconName(item)"
+                                    [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
+                            </a>
+                        }
+                    </td>
+                }
+                @if (isStackedMode) {
+                    <td kendoGridCell
                         [rowIndex]="$any(item).index"
-                        [columnIndex]="lockedColumnsCount + columnIndex"
-                        [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
-                        [column]="column"
-                        [columns]="allColumns"
+                        [detailTemplate]="detailTemplate"
+                        [item]="item"
+                        [columnIndex]="0"
+                        [attr.data-kendo-grid-column-index]="0"
+                        [columns]="columns"
                         [dataItem]="item.data"
                         [isLoading]="isLoading"
                         [isVirtual]="isVirtual"
                         [loadingTemplate]="cellLoadingTemplate"
                         kendoGridLogicalCell
                         [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                        [logicalColIndex]="logicalColIndex(column)"
+                        [logicalColIndex]="0"
                         [dataRowIndex]="$any(item).index"
                         [dataItem]="item.data"
-                        [colIndex]="columnIndex"
-                        [colSpan]="column.colspan"
-                        [rowSpan]="item.cells[lockedColumnsCount + columnIndex]?.rowspan"
-                        [attr.role]="column.tableCellsRole"
+                        [colIndex]="0"
                         class="k-table-td"
-                        [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
-                        [class.k-grid-content-sticky]="column.sticky"
-                        [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                        [ngClass]="column.cssClass"
-                        [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
-                        [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
-                        [attr.colspan]="column.colspan"
-                        [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
-                        [class.k-highlighted]="item.cells[lockedColumnsCount + columnIndex]?.isHighlighted">
+                        [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag">
                     </td>
-                </ng-container>
-            </ng-template>
-        </tr>
-        <tr *ngIf="item.showDetailRow"
-            class="k-detail-row"
-            [style.height.px]="detailRowHeight"
-            kendoGridLogicalRow
-                [dataRowIndex]="$any(item).index"
-                [dataItem]="item.data"
-                [logicalRowIndex]="isStackedMode ? logicalRowIndex(rowIndex) : logicalRowIndex(rowIndex) + 1"
-                [logicalSlaveRow]="false"
-                [logicalCellsCount]="1">
-                <ng-container *ngIf="!isStackedMode">
-                    <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
+                } @else {
+                    @for (column of columns; track virtualColumns ? $index : column; let columnIndex = $index) {
+                        @if (!item.cells?.[lockedColumnsCount + columnIndex]?.skip) {
+                            <td
+                                kendoGridCell
+                                [rowIndex]="$any(item).index"
+                                [columnIndex]="lockedColumnsCount + columnIndex"
+                                [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
+                                [column]="column"
+                                [columns]="allColumns"
+                                [dataItem]="item.data"
+                                [isLoading]="isLoading"
+                                [isVirtual]="isVirtual"
+                                [loadingTemplate]="cellLoadingTemplate"
+                                kendoGridLogicalCell
+                                [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                                [logicalColIndex]="logicalColIndex(column)"
+                                [dataRowIndex]="$any(item).index"
+                                [dataItem]="item.data"
+                                [colIndex]="columnIndex"
+                                [colSpan]="column.colspan"
+                                [rowSpan]="item.cells[lockedColumnsCount + columnIndex]?.rowspan"
+                                [attr.role]="column.tableCellsRole"
+                                class="k-table-td"
+                                [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
+                                [class.k-grid-content-sticky]="column.sticky"
+                                [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
+                                [ngClass]="column.cssClass"
+                                [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
+                                [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
+                                [attr.colspan]="column.colspan"
+                                [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
+                                [class.k-highlighted]="item.cells[lockedColumnsCount + columnIndex]?.isHighlighted">
+                            </td>
+                        }
+                    }
+                }
+            </tr>
+        }
+        @if (item.showDetailRow) {
+            <tr
+                class="k-detail-row"
+                [style.height.px]="detailRowHeight"
+                kendoGridLogicalRow
+                    [dataRowIndex]="$any(item).index"
+                    [dataItem]="item.data"
+                    [logicalRowIndex]="isStackedMode ? logicalRowIndex(rowIndex) : logicalRowIndex(rowIndex) + 1"
+                    [logicalSlaveRow]="false"
+                    [logicalCellsCount]="1">
+                @if (!isStackedMode) {
+                    @for (g of groups; track $index) {
+                        <td class="k-group-cell k-table-td k-table-group-td"></td>
+                    }
                     <td class="k-hierarchy-cell k-table-td"></td>
                     <td class="k-detail-cell k-table-td"
                         [attr.colspan]="columnsSpan"
@@ -1038,8 +1090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             }">
                         </ng-template>
                     </td>
-                </ng-container>
-                <ng-container *ngIf="isStackedMode">
+                } @else {
                     <td class="k-detail-cell k-table-td"
                         [attr.colspan]="columnsSpan"
                         kendoGridLogicalCell
@@ -1060,79 +1111,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             }">
                         </ng-template>
                     </td>
-                </ng-container>
-        </tr>
-        <tr *ngIf="item.type === 'footer'"
-            class="k-group-footer"
-            [style.height.px]="rowHeight"
-            kendoGridLogicalRow
-                [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
-                [totalColumns]="totalColumns"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
-            <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
-            </ng-container>
-            <td class="k-hierarchy-cell k-table-td"
-                *ngIf="detailTemplate?.templateRef && !isStackedMode"
-                kendoGridLogicalCell
+                }
+            </tr>
+        }
+        @if (item.type === 'footer') {
+            <tr
+                class="k-group-footer"
+                [style.height.px]="rowHeight"
+                kendoGridLogicalRow
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="0"
-                    aria-selected="false">
-            </td>
+                    [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
+                    [totalColumns]="totalColumns"
+                    [logicalCellsCount]="columns.length"
+                    [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
+                @if (!skipGroupDecoration) {
+                    @for (g of groups; track $index) {
+                        <td class="k-group-cell k-table-td k-table-group-td"></td>
+                    }
+                }
+                @if (detailTemplate?.templateRef && !isStackedMode) {
+                    <td class="k-hierarchy-cell k-table-td"
+                        kendoGridLogicalCell
+                            [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                            [logicalColIndex]="0"
+                            aria-selected="false">
+                    </td>
+                }
 
-            <ng-container *ngIf="!isStackedMode">
-                <td kendoGridLogicalCell
+                @if (!isStackedMode) {
+                    @for (column of footerColumns; track virtualColumns ? $index : column; let columnIndex = $index) {
+                        <td kendoGridLogicalCell
+                                [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                                [logicalColIndex]="logicalColIndex(column)"
+                            [attr.data-skip]="skipGroupDecoration"
+                            class="k-table-td">
+                            <ng-template
+                                [templateContext]="{
+                                    templateRef: $any(column).groupFooterTemplateRef,
+                                    group: $any(item.data),
+                                    field: $any(column).field,
+                                    column: column,
+                                    aggregates: $any(item.data)?.aggregates,
+                                    $implicit: $any(item.data)?.aggregates
+                                }">
+                            </ng-template>
+                       </td>
+                    }
+                } @else {
+                    <td kendoGridLogicalCell
                         [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                        [logicalColIndex]="logicalColIndex(column)"
-                    [attr.data-skip]="skipGroupDecoration"
-                    class="k-table-td"
-                    *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
-                    <ng-template
-                        [templateContext]="{
-                            templateRef: $any(column).groupFooterTemplateRef,
-                            group: $any(item.data),
-                            field: $any(column).field,
-                            column: column,
-                            aggregates: $any(item.data)?.aggregates,
-                            $implicit: $any(item.data)?.aggregates
-                        }">
-                    </ng-template>
-               </td>
-            </ng-container>
-
-            <ng-container *ngIf="isStackedMode">
-                <td kendoGridLogicalCell
-                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="hasDetailTemplate ? 1 : 0"
-                    [attr.data-skip]="skipGroupDecoration"
-                    class="k-table-td">
-                    <div class="k-grid-column-template">
-                        <ng-container *ngFor="let col of footerColumns">
-                            <div class="k-column-template-item" *ngIf="$any(col).groupFooterTemplateRef">
-                                <ng-template
-                                    [templateContext]="{
-                                        templateRef: $any(col).groupFooterTemplateRef,
-                                        group: $any(item.data),
-                                        field: $any(col).field,
-                                        column: col,
-                                        aggregates: $any(item.data)?.aggregates,
-                                        $implicit: $any(item.data)?.aggregates
-                                    }">
-                                </ng-template>
-                            </div>
-                        </ng-container>
-                    </div>
-                </td>
-            </ng-container>
-        </tr>
-    </ng-container>
-    <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
+                        [logicalColIndex]="hasDetailTemplate ? 1 : 0"
+                        [attr.data-skip]="skipGroupDecoration"
+                        class="k-table-td">
+                        <div class="k-grid-column-template">
+                            @for (col of footerColumns; track $index) {
+                                @if ($any(col).groupFooterTemplateRef) {
+                                    <div class="k-column-template-item">
+                                        <ng-template
+                                            [templateContext]="{
+                                                templateRef: $any(col).groupFooterTemplateRef,
+                                                group: $any(item.data),
+                                                field: $any(col).field,
+                                                column: col,
+                                                aggregates: $any(item.data)?.aggregates,
+                                                $implicit: $any(item.data)?.aggregates
+                                            }">
+                                        </ng-template>
+                                    </div>
+                                }
+                            }
+                        </div>
+                    </td>
+                }
+            </tr>
+        }
+    }
+    @if (rowSticky) {
+        <kendo-resize-sensor (resize)="resizeHandler()"></kendo-resize-sensor>
+    }
     `,
                     standalone: true,
                     imports: [
-                        NgIf, LogicalRowDirective, NgFor, LogicalCellDirective, CellComponent, NgClass, NgStyle, TemplateContextDirective,
+                        LogicalRowDirective, LogicalCellDirective, CellComponent, NgClass, NgStyle, TemplateContextDirective,
                         GroupHeaderComponent, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent
                     ]
                 }]