DataGrid - AI Column: Support headerCellTemplate/cellTemplate (DevExpress#31178)

Co-authored-by: Alyar <>

Author: Alyar666

packages/devextreme/js/__internal/grids/data_grid/__tests__/__mock__/model/data_grid.ts

@@ -0,0 +1,9 @@
+import DataGrid from '@js/ui/data_grid';
+
+import { GridCoreModel } from '../../../../grid_core/__tests__/__mock__/model/grid_core';
+
+export class DataGridModel extends GridCoreModel<DataGrid> {
+  public getInstance(): DataGrid {
+    return DataGrid.getInstance(this.root) as DataGrid;
+  }
+}

packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/grid_core.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { GridBase } from '@js/common/grids';
+
+const CLASSES = {
+  headerRow: 'dx-header-row',
+  dataRow: 'dx-data-row',
+};
+
+export abstract class GridCoreModel<TInstance extends GridBase = GridBase> {
+  constructor(protected readonly root: HTMLElement) {}
+
+  public getHeaderCell(columnIndex: number): HTMLElement {
+    return this.root.querySelectorAll(`.${CLASSES.headerRow} > td`)[columnIndex] as HTMLElement;
+  }
+
+  public getCellElement(rowIndex: number, columnIndex: number): HTMLElement {
+    return this.root.querySelectorAll(`.${CLASSES.dataRow}`)[rowIndex]?.querySelectorAll('td')[columnIndex] as HTMLElement;
+  }
+
+  public apiColumnOption(id: string, name?: string, value?: any): any {
+    switch (arguments.length) {
+      case 1:
+        return this.getInstance().columnOption(id);
+      case 2:
+        return this.getInstance().columnOption(id, name);
+      default:
+        this.getInstance().columnOption(id, name as string, value);
+        return undefined;
+    }
+  }
+
+  public abstract getInstance(): TInstance;
+}