feat(grid-lite): Update all components to use declarative column API v0.4.0

Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>

Author: Copilot

package-lock.json

@@ -79,7 +79,7 @@
     "igniteui-angular-extras": "^21.0.0",
     "igniteui-angular-i18n": "^21.0.0",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-grid-lite": "^0.0.1",
+    "igniteui-grid-lite": "~0.4.0",
     "igniteui-live-editing": "^3.3.0",
     "igniteui-webcomponents": "^6.5.0",
     "marked": "^17.0.1",

package.json

@@ -11,7 +11,12 @@
 
   <igc-grid-lite 
     #gridLite
-    [columns]="columns" 
     [data]="data">
+    <igc-grid-lite-column field="id" header="ID" width="15rem" hidden></igc-grid-lite-column>
+    <igc-grid-lite-column field="name" header="Product Name" width="15rem"></igc-grid-lite-column>
+    <igc-grid-lite-column field="price" header="Price" data-type="number" width="15rem" [cellTemplate]="hasFormatters ? formatCurrency : undefined"></igc-grid-lite-column>
+    <igc-grid-lite-column field="sold" header="Units sold" data-type="number" width="15rem"></igc-grid-lite-column>
+    <igc-grid-lite-column field="total" header="Total sold" width="15rem" [cellTemplate]="hasFormatters ? formatCurrency : undefined"></igc-grid-lite-column>
+    <igc-grid-lite-column field="rating" header="Customer rating" data-type="number" width="15rem" [cellTemplate]="formatRating"></igc-grid-lite-column>
   </igc-grid-lite>
 </div>

src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html

@@ -20,72 +20,31 @@ export class GridLiteColumnConfigDynamicComponent implements OnInit {
   @ViewChild('gridLite', { static: false }) gridLite!: ElementRef;
 
   public data: ProductInfo[] = [];
-  public columns: any[] = [];
   public hasFormatters = true;
 
-  private formatter = new Intl.NumberFormat('en-EN', {
+  public formatter = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: 'EUR'
   });
 
   ngOnInit() {
     this.data = this.dataService.generateProducts(50);
-    
-    this.columns = [
-      { 
-        key: 'id', 
-        hidden: true, 
-        headerText: 'ID',
-        width: '15rem'
-      },
-      { 
-        key: 'name', 
-        headerText: 'Product Name',
-        width: '15rem'
-      },
-      {
-        key: 'price',
-        headerText: 'Price',
-        type: 'number',
-        width: '15rem',
-        cellTemplate: (params: any) => {
-          const span = document.createElement('span');
-          span.textContent = this.formatter.format(params.value);
-          return span;
-        }
-      },
-      { 
-        key: 'sold', 
-        type: 'number', 
-        headerText: 'Units sold',
-        width: '15rem'
-      },
-      { 
-        key: 'total', 
-        headerText: 'Total sold',
-        width: '15rem',
-        cellTemplate: (params: any) => {
-          const span = document.createElement('span');
-          span.textContent = this.formatter.format(params.value);
-          return span;
-        }
-      },
-      {
-        key: 'rating',
-        type: 'number',
-        headerText: 'Customer rating',
-        width: '15rem',
-        cellTemplate: (params: any) => {
-          const rating = document.createElement('igc-rating');
-          rating.setAttribute('readonly', '');
-          rating.setAttribute('step', '0.01');
-          rating.setAttribute('value', params.value.toString());
-          return rating;
-        }
-      }
-    ];
   }
 
+  formatCurrency = (params: any) => {
+    const span = document.createElement('span');
+    span.textContent = this.formatter.format(params.value);
+    return span;
+  };
+
+  formatRating = (params: any) => {
+    const rating = document.createElement('igc-rating');
+    rating.setAttribute('readonly', '');
+    rating.setAttribute('step', '0.01');
+    rating.setAttribute('value', params.value.toString());
+    return rating;
+  };
+
   updateColumnProperty(key: string, prop: string, value: any) {
     const grid = this.gridLite?.nativeElement as any;
     if (grid && grid.updateColumns) {

src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts

@@ -1,6 +1,9 @@
 <div class="grid-lite-wrapper">
-  <igc-grid-lite 
-    [columns]="columns" 
-    [data]="data">
+  <igc-grid-lite [data]="data">
+    <igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
+    <igc-grid-lite-column field="price" header="Price (€)" data-type="number"></igc-grid-lite-column>
+    <igc-grid-lite-column field="sold" header="Units Sold" data-type="number"></igc-grid-lite-column>
+    <igc-grid-lite-column field="total" header="Total Revenue" data-type="number"></igc-grid-lite-column>
+    <igc-grid-lite-column field="rating" header="Customer Rating ⭐" data-type="number" [cellTemplate]="formatRating"></igc-grid-lite-column>
   </igc-grid-lite>
 </div>

src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html

@@ -18,43 +18,16 @@ export class GridLiteColumnConfigHeadersComponent implements OnInit {
   private dataService = inject(GridLiteDataService);
 
   public data: ProductInfo[] = [];
-  public columns: any[] = [];
 
   ngOnInit() {
     this.data = this.dataService.generateProducts(50);
-    
-    this.columns = [
-      { 
-        key: 'name', 
-        headerText: 'Product Name' 
-      },
-      {
-        key: 'price',
-        headerText: 'Price (€)',
-        type: 'number'
-      },
-      { 
-        key: 'sold', 
-        type: 'number', 
-        headerText: 'Units Sold' 
-      },
-      { 
-        key: 'total', 
-        headerText: 'Total Revenue',
-        type: 'number'
-      },
-      {
-        key: 'rating',
-        type: 'number',
-        headerText: 'Customer Rating ⭐',
-        cellTemplate: (params: any) => {
-          const rating = document.createElement('igc-rating');
-          rating.setAttribute('readonly', '');
-          rating.setAttribute('step', '0.01');
-          rating.setAttribute('value', params.value.toString());
-          return rating;
-        }
-      }
-    ];
   }
+
+  formatRating = (params: any) => {
+    const rating = document.createElement('igc-rating');
+    rating.setAttribute('readonly', '');
+    rating.setAttribute('step', '0.01');
+    rating.setAttribute('value', params.value.toString());
+    return rating;
+  };
 }

src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts

@@ -1,6 +1,9 @@
 <div class="grid-lite-wrapper">
-  <igc-grid-lite 
-    [columns]="columns" 
-    [data]="data">
+  <igc-grid-lite [data]="data">
+    <igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
+    <igc-grid-lite-column field="price" header="Price" data-type="number" [cellTemplate]="formatCurrency"></igc-grid-lite-column>
+    <igc-grid-lite-column field="sold" header="Units sold" data-type="number"></igc-grid-lite-column>
+    <igc-grid-lite-column field="total" header="Total sold" [cellTemplate]="formatCurrency"></igc-grid-lite-column>
+    <igc-grid-lite-column field="rating" header="Customer rating" data-type="number" [cellTemplate]="formatRating"></igc-grid-lite-column>
   </igc-grid-lite>
 </div>

src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html

@@ -18,57 +18,27 @@ export class GridLiteColumnConfigSimpleComponent implements OnInit {
   private dataService = inject(GridLiteDataService);
 
   public data: ProductInfo[] = [];
-  public columns: any[] = [];
 
-  private formatter = new Intl.NumberFormat('en-EN', {
+  public formatter = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: 'EUR'
   });
 
   ngOnInit() {
     this.data = this.dataService.generateProducts(50);
-    
-    this.columns = [
-      { 
-        key: 'name', 
-        headerText: 'Product Name' 
-      },
-      {
-        key: 'price',
-        headerText: 'Price',
-        type: 'number',
-        cellTemplate: (params: any) => {
-          const span = document.createElement('span');
-          span.textContent = this.formatter.format(params.value);
-          return span;
-        }
-      },
-      { 
-        key: 'sold', 
-        type: 'number', 
-        headerText: 'Units sold' 
-      },
-      { 
-        key: 'total', 
-        headerText: 'Total sold',
-        cellTemplate: (params: any) => {
-          const span = document.createElement('span');
-          span.textContent = this.formatter.format(params.value);
-          return span;
-        }
-      },
-      {
-        key: 'rating',
-        type: 'number',
-        headerText: 'Customer rating',
-        cellTemplate: (params: any) => {
-          const rating = document.createElement('igc-rating');
-          rating.setAttribute('readonly', '');
-          rating.setAttribute('step', '0.01');
-          rating.setAttribute('value', params.value.toString());
-          return rating;
-        }
-      }
-    ];
   }
+
+  formatCurrency = (params: any) => {
+    const span = document.createElement('span');
+    span.textContent = this.formatter.format(params.value);
+    return span;
+  };
+
+  formatRating = (params: any) => {
+    const rating = document.createElement('igc-rating');
+    rating.setAttribute('readonly', '');
+    rating.setAttribute('step', '0.01');
+    rating.setAttribute('value', params.value.toString());
+    return rating;
+  };
 }

src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts

@@ -2,7 +2,7 @@
     <igc-button (click)="switchData()">Switch data</igc-button>
     <igc-grid-lite 
       #gridLite
-      auto-generate
+      [autoGenerateColumns]="true"
       [data]="data">
     </igc-grid-lite>
 </div>

src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html

@@ -21,24 +21,17 @@ export class GridLiteDataBindingDynamicComponent implements OnInit {
 
   public data: (ProductInfo | UserSimple)[] = [];
   public dataType: 'products' | 'users' = 'products';
-  public autoGenerate = true;
 
   ngOnInit() {
     this.data = this.dataService.generateProducts(50);
   }
 
   switchData() {
     this.dataType = this.dataType === 'products' ? 'users' : 'products';
-    const grid = this.gridLite?.nativeElement as any;
-    
-    if (grid) {
-      grid.columns = [];
-      if (this.dataType === 'products') {
-        this.data = this.dataService.generateProducts(50);
-      } else {
-        this.data = this.dataService.generateSimpleUsers(50);
-      }
-      grid.data = this.data;
+    if (this.dataType === 'products') {
+      this.data = this.dataService.generateProducts(50);
+    } else {
+      this.data = this.dataService.generateSimpleUsers(50);
     }
   }
 }