Migrate Grid Lite samples to v0.4.0 declarative column API

package.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",

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

@@ -1,17 +1,19 @@
 <div class="grid-lite-wrapper">
   <section class="panel">
-    <igc-button variant="outlined">Column properties</igc-button>
-    <igc-switch 
+    <igc-switch
       label-position="before"
       [checked]="hasFormatters"
-      (igcChange)="toggleFormatters($event.detail.checked)">
+      (igcChange)="hasFormatters = $event.detail.checked">
       Value formatters:
     </igc-switch>
   </section>
-
-  <igc-grid-lite 
-    #gridLite
-    [columns]="columns" 
-    [data]="data">
+
+  <igc-grid-lite [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]="ratingTemplate"></igc-grid-lite-column>
   </igc-grid-lite>
 </div>

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

@@ -9,11 +9,9 @@
 }
 
 .panel {
-  margin: 1rem 0;
+  padding: 1rem;
   display: flex;
-  flex-flow: row nowrap;
   justify-content: space-between;
-  align-items: center;
 }
 
 igc-grid-lite {

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

@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { defineComponents, IgcButtonComponent, IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
 import { IgcGridLite } from 'igniteui-grid-lite';
@@ -16,96 +16,28 @@ defineComponents(IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent,
 })
 export class GridLiteColumnConfigDynamicComponent implements OnInit {
   private dataService = inject(GridLiteDataService);
-
-  @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-150', {
     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;
-        }
-      }
-    ];
   }
 
-  updateColumnProperty(key: string, prop: string, value: any) {
-    const grid = this.gridLite?.nativeElement as any;
-    if (grid && grid.updateColumns) {
-      grid.updateColumns({ key, [prop]: value });
-    }
-  }
+  protected formatCurrency = (params: any) => {
+    return this.formatter.format(params.value);
+  };
 
-  toggleFormatters(enabled: boolean) {
-    this.hasFormatters = enabled;
-    const grid = this.gridLite?.nativeElement as any;
-    if (grid && grid.updateColumns) {
-      const updates = ['price', 'total'].map(key => ({
-        key,
-        cellTemplate: enabled ? (params: any) => {
-          const span = document.createElement('span');
-          span.textContent = this.formatter.format(params.value);
-          return span;
-        } : undefined
-      }));
-      grid.updateColumns(updates);
-    }
-  }
+  protected ratingTemplate = (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.html

@@ -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]="ratingTemplate"></igc-grid-lite-column>
   </igc-grid-lite>
 </div>

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

@@ -16,45 +16,18 @@ defineComponents(IgcRatingComponent);
 })
 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;
-        }
-      }
-    ];
   }
+
+  protected ratingTemplate = (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.html

@@ -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]="ratingTemplate"></igc-grid-lite-column>
   </igc-grid-lite>
 </div>

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

@@ -16,59 +16,27 @@ defineComponents(IgcRatingComponent);
 })
 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-150', {
     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;
-        }
-      }
-    ];
   }
+
+  protected formatCurrency = (params: any) => {
+    return this.formatter.format(params.value);
+  };
+
+  protected ratingTemplate = (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-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html

@@ -1,7 +1,6 @@
 <div class="grid-lite-wrapper">
     <igc-button (click)="switchData()">Switch data</igc-button>
-    <igc-grid-lite 
-      #gridLite
+    <igc-grid-lite
       auto-generate
       [data]="data">
     </igc-grid-lite>