Migrate Grid Lite samples to v0.4.0 declarative column API with function components (#1028)

Author: Copilot

browser/package-lock.json

@@ -24,7 +24,7 @@
     "dompurify": "^3.3.0",
     "file-saver": "1.3.8",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-grid-lite": "^0.0.1",
+    "igniteui-grid-lite": "~0.4.0",
     "igniteui-react": "^19.4.0",
     "igniteui-react-charts": "19.3.2",
     "igniteui-react-core": "19.3.2",

browser/package.json

@@ -861,7 +861,7 @@ function updateIG(cb) {
         // these IG packages are sometimes updated:
         { version: "^6.3.0", name: "igniteui-webcomponents" },
         { version: "^19.4.0", name: "igniteui-react-dockmanager" },
-        { version: "^0.0.1", name: "igniteui-grid-lite" },
+        { version: "~0.4.0", name: "igniteui-grid-lite" },
         // main react packages
         { version: "^19.2.0", name: "react" },
         { version: "^19.2.0", name: "react-dom" },

browser/tasks/gulp-samples.js

@@ -14,7 +14,7 @@
     "lint": "eslint ./src/**/*.{ts,tsx}"
   },
   "dependencies": {
-    "igniteui-grid-lite": "^0.0.1",
+    "igniteui-grid-lite": "~0.4.0",
     "igniteui-react": "^19.4.0",
     "igniteui-webcomponents": "^6.3.0",
     "lit-html": "^3.2.0",

samples/grids/grid-lite/column-config-basic/package.json

@@ -16,82 +16,50 @@ import "./index.css";
 IgcGridLite.register();
 defineComponents(IgcRatingComponent);
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private formatter: Intl.NumberFormat;
-  private gridRef: React.RefObject<any>;
+const formatter = new Intl.NumberFormat('en-EN', {
+  style: 'currency',
+  currency: 'EUR'
+});
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.formatter = new Intl.NumberFormat('en-EN', {
-      style: 'currency',
-      currency: 'EUR'
-    });
-    this.gridRef = React.createRef();
-  }
+// Define cellTemplate functions outside component
+const currencyCellTemplate = (params: any) => {
+  const span = document.createElement('span');
+  span.textContent = formatter.format(params.value);
+  return span;
+};
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: ProductInfo[] = this.dataService.generateProducts(50);
-      
-      const 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;
-          }
-        }
-      ];
+const ratingCellTemplate = (params: any) => {
+  const rating = document.createElement('igc-rating');
+  rating.setAttribute('readonly', '');
+  rating.setAttribute('step', '0.01');
+  rating.setAttribute('value', params.value.toString());
+  return rating;
+};
 
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = data;
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
+
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const data: ProductInfo[] = dataService.generateProducts(50);
+      gridRef.current.data = data;
     }
-  }
+  }, []);
 
-  public render(): JSX.Element {
-    return (
-      <div className="container sample ig-typography">
-        <div className="grid-lite-wrapper">
-          <igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
-        </div>
+  return (
+    <div className="container sample ig-typography">
+      <div className="grid-lite-wrapper">
+        <igc-grid-lite ref={gridRef} id="grid-lite">
+          <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={currencyCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="sold" data-type="number" header="Units sold"></igc-grid-lite-column>
+          <igc-grid-lite-column field="total" header="Total sold" cellTemplate={currencyCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="rating" data-type="number" header="Customer rating" cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
+        </igc-grid-lite>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM

samples/grids/grid-lite/column-config-basic/src/index.tsx

@@ -14,7 +14,7 @@
     "lint": "eslint ./src/**/*.{ts,tsx}"
   },
   "dependencies": {
-    "igniteui-grid-lite": "^0.0.1",
+    "igniteui-grid-lite": "~0.4.0",
     "igniteui-react": "^19.4.0",
     "igniteui-webcomponents": "^6.3.0",
     "lit-html": "^3.2.0",

samples/grids/grid-lite/column-config-dynamic/package.json

@@ -23,10 +23,6 @@
     flex: 1;
 }
 
-igc-dropdown-item {
-    padding: 0.5rem 1rem;
-}
-
 .grid-lite-wrapper {
     width: 100%;
     height: 100%;