diff --git a/browser/package-lock.json b/browser/package-lock.json
index e3b6b174f1..3fb90124ba 100644
--- a/browser/package-lock.json
+++ b/browser/package-lock.json
@@ -16,7 +16,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",
@@ -1912,55 +1912,61 @@
       ]
     },
     "node_modules/@shikijs/core": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.15.0.tgz",
-      "integrity": "sha512-8TOG6yG557q+fMsSVa8nkEDOZNTSxjbbR8l6lF2gyr6Np+jrPlslqDxQkN6rMXCECQ3isNPZAGszAfYoJOPGlg==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.22.0.tgz",
+      "integrity": "sha512-iAlTtSDDbJiRpvgL5ugKEATDtHdUVkqgHDm/gbD2ZS9c88mx7G1zSYjjOxp5Qa0eaW0MAQosFRmJSk354PRoQA==",
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.15.0",
+        "@shikijs/types": "3.22.0",
         "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4",
         "hast-util-to-html": "^9.0.5"
       }
     },
     "node_modules/@shikijs/engine-javascript": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.15.0.tgz",
-      "integrity": "sha512-ZedbOFpopibdLmvTz2sJPJgns8Xvyabe2QbmqMTz07kt1pTzfEvKZc5IqPVO/XFiEbbNyaOpjPBkkr1vlwS+qg==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.22.0.tgz",
+      "integrity": "sha512-jdKhfgW9CRtj3Tor0L7+yPwdG3CgP7W+ZEqSsojrMzCjD1e0IxIbwUMDDpYlVBlC08TACg4puwFGkZfLS+56Tw==",
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.15.0",
+        "@shikijs/types": "3.22.0",
         "@shikijs/vscode-textmate": "^10.0.2",
-        "oniguruma-to-es": "^4.3.3"
+        "oniguruma-to-es": "^4.3.4"
       }
     },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.15.0.tgz",
-      "integrity": "sha512-HnqFsV11skAHvOArMZdLBZZApRSYS4LSztk2K3016Y9VCyZISnlYUYsL2hzlS7tPqKHvNqmI5JSUJZprXloMvA==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.22.0.tgz",
+      "integrity": "sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==",
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.15.0",
+        "@shikijs/types": "3.22.0",
         "@shikijs/vscode-textmate": "^10.0.2"
       }
     },
     "node_modules/@shikijs/langs": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.15.0.tgz",
-      "integrity": "sha512-WpRvEFvkVvO65uKYW4Rzxs+IG0gToyM8SARQMtGGsH4GDMNZrr60qdggXrFOsdfOVssG/QQGEl3FnJ3EZ+8w8A==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.22.0.tgz",
+      "integrity": "sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==",
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.15.0"
+        "@shikijs/types": "3.22.0"
       }
     },
     "node_modules/@shikijs/themes": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.15.0.tgz",
-      "integrity": "sha512-8ow2zWb1IDvCKjYb0KiLNrK4offFdkfNVPXb1OZykpLCzRU6j+efkY+Y7VQjNlNFXonSw+4AOdGYtmqykDbRiQ==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.22.0.tgz",
+      "integrity": "sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==",
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.15.0"
+        "@shikijs/types": "3.22.0"
       }
     },
     "node_modules/@shikijs/types": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.15.0.tgz",
-      "integrity": "sha512-BnP+y/EQnhihgHy4oIAN+6FFtmfTekwOLsQbRw9hOKwqgNy8Bdsjq8B05oAt/ZgvIWWFrshV71ytOrlPfYjIJw==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.22.0.tgz",
+      "integrity": "sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==",
+      "license": "MIT",
       "dependencies": {
         "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4"
@@ -1969,7 +1975,8 @@
     "node_modules/@shikijs/vscode-textmate": {
       "version": "10.0.2",
       "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
-      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
+      "license": "MIT"
     },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
@@ -2226,6 +2233,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
       "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
       }
@@ -4202,6 +4210,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
       "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -4253,6 +4262,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
       "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -4262,6 +4272,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
       "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -4501,6 +4512,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
       "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -5039,6 +5051,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
       "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
       "dependencies": {
         "dequal": "^2.0.0"
       },
@@ -8217,6 +8230,7 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
       "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/unist": "^3.0.0",
@@ -8238,12 +8252,14 @@
     "node_modules/hast-util-to-html/node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
     },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
       "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0"
       },
@@ -8292,6 +8308,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
       "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -8357,14 +8374,14 @@
       }
     },
     "node_modules/igniteui-grid-lite": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.0.1.tgz",
-      "integrity": "sha512-QR+yu3lW8jtF5tfR+HChw+ksnTbMz8vIAEbPv0kJyNR0Dk2nCQSuw8z531psgl6ket2o1OoGDpkZJNgNNQ9T2g==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.4.0.tgz",
+      "integrity": "sha512-QZ12Q9C9FxrJIZIO0beOQMAZ2E9UADEqS0cjL2Qt2YP1DNge7+x+AzXCp8aOOzT5Y5E+O6O0u6u7JPdtc3RhxA==",
       "license": "MIT",
       "dependencies": {
         "@lit-labs/virtualizer": "~2.1.0",
         "@lit/context": "~1.1.5",
-        "igniteui-webcomponents": "~6.1.0",
+        "igniteui-webcomponents": "~6.5.0",
         "lit": "^3.3.0"
       },
       "engines": {
@@ -8372,18 +8389,71 @@
       }
     },
     "node_modules/igniteui-grid-lite/node_modules/igniteui-webcomponents": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.1.2.tgz",
-      "integrity": "sha512-q3a3Q28xzRwDBmfDprY0PsN9cs5xgqOJigXWWmbWAfcMgPg5dIrPyMDV6Aj6GD7u1RgPeoZmTP/pz9gTWNhHJA==",
-      "license": "SEE LICENSE IN LICENSE",
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.5.1.tgz",
+      "integrity": "sha512-cs/oqxuF7QowgwZ2LMTDqcpmcRqB4VWKNqshhA1dUTinxq20YjQKS/q+ix8K8sHgfg+QFXxPaOZruMLeubnIzw==",
+      "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.7.0",
         "@lit-labs/virtualizer": "^2.1.0",
         "@lit/context": "^1.1.0",
+        "igniteui-i18n-core": "^1.0.1",
         "lit": "^3.3.0"
       },
       "engines": {
         "node": ">=20"
+      },
+      "peerDependencies": {
+        "dompurify": "^3.3.0",
+        "igniteui-i18n-resources": "^1.0.1",
+        "marked": "^17.0.0",
+        "marked-shiki": "^1.2.0",
+        "shiki": "^3.20.0"
+      },
+      "peerDependenciesMeta": {
+        "dompurify": {
+          "optional": true
+        },
+        "igniteui-i18n-resources": {
+          "optional": true
+        },
+        "marked": {
+          "optional": true
+        },
+        "marked-shiki": {
+          "optional": true
+        },
+        "shiki": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/igniteui-grid-lite/node_modules/marked": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.2.tgz",
+      "integrity": "sha512-s5HZGFQea7Huv5zZcAGhJLT3qLpAfnY7v7GWkICUr0+Wd5TFEtdlRR2XUL5Gg+RH7u2Df595ifrxR03mBaw7gA==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/igniteui-i18n-core": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.2.tgz",
+      "integrity": "sha512-51szNhKG/3ckWkJKV6npAG50Fvi11a5e/lcKF9+unV9PlOpEm3tsf90s//8fXB9r28HSObgSRCVfKD+hfoNx7w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "igniteui-i18n-resources": "1.0.2"
+      },
+      "peerDependenciesMeta": {
+        "igniteui-i18n-resources": {
+          "optional": true
+        }
       }
     },
     "node_modules/igniteui-react": {
@@ -10387,9 +10457,10 @@
       }
     },
     "node_modules/mdast-util-to-hast": {
-      "version": "13.2.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
-      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/mdast": "^4.0.0",
@@ -10410,6 +10481,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
       "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
       }
@@ -10417,7 +10489,8 @@
     "node_modules/mdast-util-to-hast/node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
     },
     "node_modules/mdast-util-to-hast/node_modules/micromark-util-character": {
       "version": "2.1.1",
@@ -10433,6 +10506,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-symbol": "^2.0.0",
         "micromark-util-types": "^2.0.0"
@@ -10451,7 +10525,8 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/mdast-util-to-hast/node_modules/micromark-util-sanitize-uri": {
       "version": "2.0.1",
@@ -10467,6 +10542,7 @@
           "url": "https://opencollective.com/unified"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-encode": "^2.0.0",
@@ -10486,7 +10562,8 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/mdast-util-to-hast/node_modules/micromark-util-types": {
       "version": "2.0.2",
@@ -10501,12 +10578,14 @@
           "type": "OpenCollective",
           "url": "https://opencollective.com/unified"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/mdast-util-to-hast/node_modules/unist-util-is": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
       "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
       },
@@ -10516,9 +10595,10 @@
       }
     },
     "node_modules/mdast-util-to-hast/node_modules/unist-util-visit": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
-      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "unist-util-is": "^6.0.0",
@@ -10533,6 +10613,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
       "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "unist-util-is": "^6.0.0"
@@ -11612,12 +11693,14 @@
     "node_modules/oniguruma-parser": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz",
-      "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="
+      "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==",
+      "license": "MIT"
     },
     "node_modules/oniguruma-to-es": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.3.tgz",
-      "integrity": "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.4.tgz",
+      "integrity": "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==",
+      "license": "MIT",
       "dependencies": {
         "oniguruma-parser": "^0.12.1",
         "regex": "^6.0.1",
@@ -12281,6 +12364,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
       "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -12726,9 +12810,10 @@
       }
     },
     "node_modules/regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz",
-      "integrity": "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "license": "MIT",
       "dependencies": {
         "regex-utilities": "^2.3.0"
       }
@@ -12750,6 +12835,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
       "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "license": "MIT",
       "dependencies": {
         "regex-utilities": "^2.3.0"
       }
@@ -12757,7 +12843,8 @@
     "node_modules/regex-utilities": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
-      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "license": "MIT"
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
@@ -14361,16 +14448,17 @@
       }
     },
     "node_modules/shiki": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.15.0.tgz",
-      "integrity": "sha512-kLdkY6iV3dYbtPwS9KXU7mjfmDm25f5m0IPNFnaXO7TBPcvbUOY72PYXSuSqDzwp+vlH/d7MXpHlKO/x+QoLXw==",
-      "dependencies": {
-        "@shikijs/core": "3.15.0",
-        "@shikijs/engine-javascript": "3.15.0",
-        "@shikijs/engine-oniguruma": "3.15.0",
-        "@shikijs/langs": "3.15.0",
-        "@shikijs/themes": "3.15.0",
-        "@shikijs/types": "3.15.0",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.22.0.tgz",
+      "integrity": "sha512-LBnhsoYEe0Eou4e1VgJACes+O6S6QC0w71fCSp5Oya79inkwkm15gQ1UF6VtQ8j/taMDh79hAB49WUk8ALQW3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "3.22.0",
+        "@shikijs/engine-javascript": "3.22.0",
+        "@shikijs/engine-oniguruma": "3.22.0",
+        "@shikijs/langs": "3.22.0",
+        "@shikijs/themes": "3.22.0",
+        "@shikijs/types": "3.22.0",
         "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4"
       }
@@ -14824,6 +14912,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
       "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -15158,6 +15247,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
       "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
       "dependencies": {
         "character-entities-html4": "^2.0.0",
         "character-entities-legacy": "^3.0.0"
@@ -15652,6 +15742,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
       "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -16126,6 +16217,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
       "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
       },
@@ -16137,7 +16229,8 @@
     "node_modules/unist-util-position/node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
     },
     "node_modules/unist-util-stringify-position": {
       "version": "3.0.3",
@@ -16445,6 +16538,7 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
       "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "vfile-message": "^4.0.0"
@@ -16458,6 +16552,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
       "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "unist-util-stringify-position": "^4.0.0"
@@ -16470,12 +16565,14 @@
     "node_modules/vfile-message/node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
     },
     "node_modules/vfile-message/node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
       "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
       },
@@ -16487,7 +16584,8 @@
     "node_modules/vfile/node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
     },
     "node_modules/vinyl": {
       "version": "2.2.0",
diff --git a/browser/package.json b/browser/package.json
index 5c2c33f197..e1e973f867 100644
--- a/browser/package.json
+++ b/browser/package.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",
diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js
index 0ee3e9ec49..76b690036f 100644
--- a/browser/tasks/gulp-samples.js
+++ b/browser/tasks/gulp-samples.js
@@ -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" },
diff --git a/samples/grids/grid-lite/column-config-basic/package.json b/samples/grids/grid-lite/column-config-basic/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/column-config-basic/package.json
+++ b/samples/grids/grid-lite/column-config-basic/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/column-config-basic/src/index.tsx b/samples/grids/grid-lite/column-config-basic/src/index.tsx
index 2aadabba08..00118c27f8 100644
--- a/samples/grids/grid-lite/column-config-basic/src/index.tsx
+++ b/samples/grids/grid-lite/column-config-basic/src/index.tsx
@@ -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
diff --git a/samples/grids/grid-lite/column-config-dynamic/package.json b/samples/grids/grid-lite/column-config-dynamic/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/column-config-dynamic/package.json
+++ b/samples/grids/grid-lite/column-config-dynamic/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx
index b910476fdc..f4b5a9acee 100644
--- a/samples/grids/grid-lite/column-config-dynamic/src/index.tsx
+++ b/samples/grids/grid-lite/column-config-dynamic/src/index.tsx
@@ -23,155 +23,194 @@ const formatter = new Intl.NumberFormat('en-EN', {
   currency: 'EUR',
 });
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-  private dropdownRef: React.RefObject<any>;
-  protected hasFormatters = true;
-  protected format = (params: any) => {
-    const span = document.createElement('span');
-    span.textContent = formatter.format(params.value);
-    return span;
-  };
-  protected columns = [
-    {
-      key: 'id',
-      hidden: true,
-      headerText: 'ID'
-    },
-    {
-      key: 'name',
-      headerText: 'Product Name'
-    },
-    {
-      key: 'price',
-      headerText: 'Price',
-      type: 'number',
-      cellTemplate: this.format
-    },
-    {
-      key: 'sold',
-      type: 'number',
-      headerText: 'Units sold'
-    },
-    {
-      key: 'total',
-      headerText: 'Total sold',
-      cellTemplate: this.format
-    },
-    {
-      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;
-      }
-    }
-  ];
+// Define cellTemplate functions outside component
+const currencyCellTemplate = (params: any) => {
+  const span = document.createElement('span');
+  span.textContent = formatter.format(params.value);
+  return span;
+};
+
+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;
+};
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-    this.dropdownRef = React.createRef();
-    this.toggleFormatters = this.toggleFormatters.bind(this);
-    this.toggleColumnProperty = this.toggleColumnProperty.bind(this);
+const initialColumns = [
+  {
+    field: 'id',
+    hidden: true,
+    header: 'ID',
+    resizable: true,
+    sortable: false,
+    filterable: false,
+    cellTemplate: undefined
+  },
+  {
+    field: 'name',
+    header: 'Product Name',
+    resizable: true,
+    sortable: false,
+    filterable: false,
+    cellTemplate: undefined
+  },
+  {
+    field: 'price',
+    header: 'Price',
+    dataType: 'number',
+    cellTemplate: currencyCellTemplate,
+    resizable: true,
+    sortable: false,
+    filterable: false
+  },
+  {
+    field: 'sold',
+    dataType: 'number',
+    header: 'Units sold',
+    resizable: true,
+    sortable: false,
+    filterable: false,
+    cellTemplate: undefined
+  },
+  {
+    field: 'total',
+    header: 'Total sold',
+    cellTemplate: currencyCellTemplate,
+    resizable: true,
+    sortable: false,
+    filterable: false
+  },
+  {
+    field: 'rating',
+    dataType: 'number',
+    header: 'Customer rating',
+    cellTemplate: ratingCellTemplate,
+    resizable: true,
+    sortable: false,
+    filterable: false
   }
+];
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: ProductInfo[] = this.dataService.generateProducts(50);
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
+  const dropdownRef = React.useRef<any>(null);
+  const [columns, setColumns] = React.useState(initialColumns);
+  const [hasFormatters, setHasFormatters] = React.useState(true);
 
-      this.gridRef.current.columns = this.columns;
-      this.gridRef.current.data = data;
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const data: ProductInfo[] = dataService.generateProducts(50);
+      gridRef.current.data = data;
     }
-  }
+  }, []);
 
-  toggleFormatters(checked: boolean) {
-    if (this.gridRef.current) {
-      this.gridRef.current.updateColumns(
-        ['price', 'total'].map((key) => ({
-          key,
-          cellTemplate: checked ? this.format : undefined,
+  const toggleFormatters = React.useCallback((checked: boolean) => {
+    if (gridRef.current) {
+      gridRef.current.updateColumns(
+        ['price', 'total'].map((field) => ({
+          field,
+          cellTemplate: checked ? currencyCellTemplate : undefined,
         }))
       );
+      setColumns(prevColumns => 
+        prevColumns.map(col => 
+          col.field === 'price' || col.field === 'total'
+            ? { ...col, cellTemplate: checked ? currencyCellTemplate : undefined }
+            : col
+        )
+      );
     }
-  }
+  }, []);
 
-  toggleColumnProperty(columnKey: string, property: string, value: boolean) {
-    if (this.gridRef.current) {
-      this.gridRef.current.updateColumns({ key: columnKey, [property]: value });
+  const toggleColumnProperty = React.useCallback((columnField: string, property: string, value: boolean) => {
+    if (gridRef.current) {
+      gridRef.current.updateColumns({ field: columnField, [property]: value });
+      setColumns(prevColumns =>
+        prevColumns.map(col =>
+          col.field === columnField
+            ? { ...col, [property]: value }
+            : col
+        )
+      );
     }
-  }
+  }, []);
 
-  public render(): JSX.Element {
-    return (
-      <div className="container sample ig-typography">
-        <section className="panel">
-          <IgrDropdown
-            ref={this.dropdownRef}
-            keepOpenOnSelect={true}
-            flip={true}
-            onChange={(e: any) => {
-              this.dropdownRef.current?.clearSelection();
-            }}
-            id="column-select">
-            <div slot="target">
-              <IgrButton variant="outlined"><span>Column Properties</span></IgrButton>
-            </div>
-            {this.columns.map((column: any) => (
-              <IgrDropdownItem key={column.key}>
-                <div className="config">
-                  <span className="config-key">{column.headerText}</span>
-                  <IgrCheckbox
-                    labelPosition="before"
-                    checked={!column.hidden}
-                    onChange={(e: any) => this.toggleColumnProperty(column.key, 'hidden', !e.target.checked)}>
-                    Hidden
-                  </IgrCheckbox>
-                  <IgrCheckbox
-                    labelPosition="before"
-                    checked={column.resizable !== false}
-                    onChange={(e: any) => this.toggleColumnProperty(column.key, 'resizable', e.target.checked)}>
-                    Resizable
-                  </IgrCheckbox>
-                  <IgrCheckbox
-                    labelPosition="before"
-                    checked={column.filter === true}
-                    onChange={(e: any) => this.toggleColumnProperty(column.key, 'filter', e.target.checked)}>
-                    Filter
-                  </IgrCheckbox>
-                  <IgrCheckbox
-                    labelPosition="before"
-                    checked={column.sort === true}
-                    onChange={(e: any) => this.toggleColumnProperty(column.key, 'sort', e.target.checked)}>
-                    Sort
-                  </IgrCheckbox>
-                </div>
-              </IgrDropdownItem>
-            ))}
-          </IgrDropdown>
-          <IgrSwitch
-            id="formatters"
-            labelPosition="before"
-            checked={this.hasFormatters}
-            onChange={(e: any) => {
-              this.hasFormatters = e.target.checked;
-              this.toggleFormatters(this.hasFormatters);
-            }}>
-            Value formatters:
-          </IgrSwitch>
-        </section>
-        <div className="grid-lite-wrapper">
-          <igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
-        </div>
-      </div >
-    );
-  }
+  return (
+    <div className="container sample ig-typography">
+      <section className="panel">
+        <IgrDropdown
+          ref={dropdownRef}
+          keepOpenOnSelect={true}
+          flip={true}
+          onChange={(e: any) => {
+            dropdownRef.current?.clearSelection();
+          }}
+          id="column-select">
+          <div slot="target">
+            <IgrButton variant="outlined"><span>Column Properties</span></IgrButton>
+          </div>
+          {columns.map((column: any) => (
+            <IgrDropdownItem key={column.field}>
+              <div className="config">
+                <span className="config-key">{column.header}</span>
+                <IgrCheckbox
+                  labelPosition="before"
+                  checked={!column.hidden}
+                  onChange={(e: any) => toggleColumnProperty(column.field, 'hidden', !e.target.checked)}>
+                  Hidden
+                </IgrCheckbox>
+                <IgrCheckbox
+                  labelPosition="before"
+                  checked={column.resizable !== false}
+                  onChange={(e: any) => toggleColumnProperty(column.field, 'resizable', e.target.checked)}>
+                  Resizable
+                </IgrCheckbox>
+                <IgrCheckbox
+                  labelPosition="before"
+                  checked={column.filterable === true}
+                  onChange={(e: any) => toggleColumnProperty(column.field, 'filterable', e.target.checked)}>
+                  Filter
+                </IgrCheckbox>
+                <IgrCheckbox
+                  labelPosition="before"
+                  checked={column.sortable === true}
+                  onChange={(e: any) => toggleColumnProperty(column.field, 'sortable', e.target.checked)}>
+                  Sort
+                </IgrCheckbox>
+              </div>
+            </IgrDropdownItem>
+          ))}
+        </IgrDropdown>
+        <IgrSwitch
+          id="formatters"
+          labelPosition="before"
+          checked={hasFormatters}
+          onChange={(e: any) => {
+            setHasFormatters(e.target.checked);
+            toggleFormatters(e.target.checked);
+          }}>
+          Value formatters:
+        </IgrSwitch>
+      </section>
+      <div className="grid-lite-wrapper">
+        <igc-grid-lite ref={gridRef} id="grid-lite">
+          {columns.map((column: any) => (
+            <igc-grid-lite-column
+              key={column.field}
+              field={column.field}
+              header={column.header}
+              data-type={column.dataType}
+              hidden={column.hidden}
+              cellTemplate={column.cellTemplate}
+            ></igc-grid-lite-column>
+          ))}
+        </igc-grid-lite>
+      </div>
+    </div >
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/column-config-headers/package.json b/samples/grids/grid-lite/column-config-headers/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/column-config-headers/package.json
+++ b/samples/grids/grid-lite/column-config-headers/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/column-config-headers/src/index.tsx b/samples/grids/grid-lite/column-config-headers/src/index.tsx
index 76cd0ff186..da335033be 100644
--- a/samples/grids/grid-lite/column-config-headers/src/index.tsx
+++ b/samples/grids/grid-lite/column-config-headers/src/index.tsx
@@ -10,60 +10,30 @@ import "./index.css";
 // Register components
 IgcGridLite.register();
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-  }
-
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: User[] = this.dataService.generateUsers(50);
-      
-      const columns = [
-        { 
-          key: 'id', 
-          headerText: '🆔 ID',
-          width: '150px'
-        },
-        { 
-          key: 'firstName', 
-          headerText: '👤 First Name'
-        },
-        { 
-          key: 'lastName', 
-          headerText: '👤 Last Name'
-        },
-        { 
-          key: 'age', 
-          headerText: '🎂 Age',
-          type: 'number',
-          width: '100px'
-        },
-        { 
-          key: 'email', 
-          headerText: '📧 Email'
-        }
-      ];
-
-      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: User[] = dataService.generateUsers(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="id" header="🆔 ID" width="150px"></igc-grid-lite-column>
+          <igc-grid-lite-column field="firstName" header="👤 First Name"></igc-grid-lite-column>
+          <igc-grid-lite-column field="lastName" header="👤 Last Name"></igc-grid-lite-column>
+          <igc-grid-lite-column field="age" header="🎂 Age" data-type="number" width="100px"></igc-grid-lite-column>
+          <igc-grid-lite-column field="email" header="📧 Email"></igc-grid-lite-column>
+        </igc-grid-lite>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/data-binding/package.json b/samples/grids/grid-lite/data-binding/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/data-binding/package.json
+++ b/samples/grids/grid-lite/data-binding/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/data-binding/src/index.tsx b/samples/grids/grid-lite/data-binding/src/index.tsx
index 9f2e6e052c..fad354d3ae 100644
--- a/samples/grids/grid-lite/data-binding/src/index.tsx
+++ b/samples/grids/grid-lite/data-binding/src/index.tsx
@@ -16,21 +16,14 @@ import "./index.css";
 IgcGridLite.register();
 defineComponents(IgcButtonComponent);
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-  private showingProducts = true;
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
+  const [showingProducts, setShowingProducts] = React.useState(true);
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-    this.switchData = this.switchData.bind(this);
-  }
-
-  componentDidMount() {
-    if (this.gridRef.current) {
-      this.gridRef.current.data = this.dataService.generateProducts(50);
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      gridRef.current.data = dataService.generateProducts(50);
       
       window.addEventListener('error', (e) => {
         if (e.message === 'ResizeObserver loop completed with undelivered notifications.') {
@@ -38,34 +31,33 @@ export default class Sample extends React.Component<any, any> {
         }
       });
     }
-  }
+  }, []);
 
-  private switchData() {
-    if (this.gridRef.current) {
-      this.gridRef.current.columns = [];
+  const switchData = React.useCallback(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      gridRef.current.columns = [];
       
-      if (this.showingProducts) {
-        this.gridRef.current.data = this.dataService.generateUsers(50);
-        this.showingProducts = false;
+      if (showingProducts) {
+        gridRef.current.data = dataService.generateUsers(50);
+        setShowingProducts(false);
       } else {
-        this.gridRef.current.data = this.dataService.generateProducts(50);
-        this.showingProducts = true;
+        gridRef.current.data = dataService.generateProducts(50);
+        setShowingProducts(true);
       }
     }
-  }
+  }, [showingProducts]);
 
-  public render(): JSX.Element {
-    return (
-      <div className="container sample ig-typography">
-        <div className="controls-wrapper">
-          <button className="sample-button" onClick={this.switchData}>Switch Data</button>
-        </div>
-        <div className="grid-lite-wrapper">
-          <igc-grid-lite auto-generate="true" ref={this.gridRef} id="grid-lite"></igc-grid-lite>
-        </div>
+  return (
+    <div className="container sample ig-typography">
+      <div className="controls-wrapper">
+        <button className="sample-button" onClick={switchData}>Switch Data</button>
+      </div>
+      <div className="grid-lite-wrapper">
+        <igc-grid-lite auto-generate="true" ref={gridRef} id="grid-lite"></igc-grid-lite>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/filtering-config-events/package.json b/samples/grids/grid-lite/filtering-config-events/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/filtering-config-events/package.json
+++ b/samples/grids/grid-lite/filtering-config-events/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/filtering-config-events/src/index.tsx b/samples/grids/grid-lite/filtering-config-events/src/index.tsx
index a3ab2f553d..3829a8dc1b 100644
--- a/samples/grids/grid-lite/filtering-config-events/src/index.tsx
+++ b/samples/grids/grid-lite/filtering-config-events/src/index.tsx
@@ -11,78 +11,75 @@ import "./index.css";
 // Register components
 IgcGridLite.register();
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-  private logRef: React.RefObject<HTMLDivElement>;
-  private log: string[] = [];
+const getTime = () => `[${new Date().toLocaleTimeString()}]`;
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-    this.logRef = React.createRef<HTMLDivElement>();
-    this.state = { logContent: '' };
-  }
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
+  const logRef = React.useRef<HTMLDivElement>(null);
+  const [log, setLog] = React.useState<string[]>([]);
 
-  get time() {
-    return `[${new Date().toLocaleTimeString()}]`;
-  }
+  const updateLog = React.useCallback((message: string) => {
+    setLog(prevLog => {
+      const newLog = [...prevLog];
+      if (newLog.length > 10) {
+        newLog.shift();
+      }
+      newLog.push(message);
+      return newLog;
+    });
+  }, []);
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: User[] = this.dataService.generateUsers(50);
-      
-      const columns = [
-        { key: 'firstName', headerText: 'First name', filter: true },
-        { key: 'lastName', headerText: 'Last name', filter: true },
-        { key: 'age', headerText: 'Age', filter: true, type: 'number' },
-        { key: 'email', headerText: 'Email', filter: true }
-      ];
+  React.useEffect(() => {
+    if (logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [log]);
 
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = data;
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const data: User[] = dataService.generateUsers(50);
+      gridRef.current.data = data;
 
       // Listen to filter events
-      this.gridRef.current.addEventListener('filtering', (e: any) => {
+      const handleFiltering = (e: any) => {
         const { expressions, type } = e.detail;
-        this.updateLog(`${this.time} :: Event \`${e.type}\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`);
-      });
-      this.gridRef.current.addEventListener('filtered', (e: any) => {
-        this.updateLog(`${this.time} :: Event \`${e.type}\` for column '${e.detail.key}'`);
-      });
-    }
-  }
+        updateLog(`${getTime()} :: Event \`${e.type}\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`);
+      };
 
-  private updateLog(message: string) {
-    if (this.log.length > 10) {
-      this.log.shift();
+      const handleFiltered = (e: any) => {
+        updateLog(`${getTime()} :: Event \`${e.type}\` for column '${e.detail.key}'`);
+      };
+
+      gridRef.current.addEventListener('filtering', handleFiltering);
+      gridRef.current.addEventListener('filtered', handleFiltered);
+
+      return () => {
+        if (gridRef.current) {
+          gridRef.current.removeEventListener('filtering', handleFiltering);
+          gridRef.current.removeEventListener('filtered', handleFiltered);
+        }
+      };
     }
-    this.log.push(message);
-    this.renderLog();
-  }
+  }, [updateLog]);
 
-  private renderLog() {
-    const logContent = this.log
-      .map(entry => `<p><code>${entry}</code></p>`)
-      .join('');
-    this.setState({ logContent }, () => {
-      if (this.logRef.current) {
-        this.logRef.current.scrollTop = this.logRef.current.scrollHeight;
-      }
-    });
-  }
+  const logContent = log
+    .map(entry => `<p><code>${entry}</code></p>`)
+    .join('');
 
-  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 ref={this.logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: this.state.logContent }}></div>
-        </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="firstName" header="First name" filterable></igc-grid-lite-column>
+          <igc-grid-lite-column field="lastName" header="Last name" filterable></igc-grid-lite-column>
+          <igc-grid-lite-column field="age" header="Age" filterable data-type="number"></igc-grid-lite-column>
+          <igc-grid-lite-column field="email" header="Email" filterable></igc-grid-lite-column>
+        </igc-grid-lite>
+        <div ref={logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: logContent }}></div>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/filtering-config-remote/package.json b/samples/grids/grid-lite/filtering-config-remote/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/filtering-config-remote/package.json
+++ b/samples/grids/grid-lite/filtering-config-remote/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx
index 4f7147bd0a..663a31eb54 100644
--- a/samples/grids/grid-lite/filtering-config-remote/src/index.tsx
+++ b/samples/grids/grid-lite/filtering-config-remote/src/index.tsx
@@ -23,76 +23,64 @@ function groupBy<T extends object>(arr: T[], key: keyof T) {
   return out;
 }
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-  private allData: User[] = [];
+const mapExpressions = (arr: any[]) => {
+  return arr
+    .map(({ searchTerm, criteria, condition }: any, idx: number) => {
+      const c = condition;
+      return idx < 1
+        ? `${c.name}("${searchTerm}")`
+        : `${criteria?.toUpperCase()} ${c.name}("${searchTerm}")`;
+    })
+    .join(' ');
+};
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-    this.allData = this.dataService.generateUsers(100);
-    this.state = { queryString: '' };
+const buildUri = (state: any[], setQueryString: (qs: string) => void) => {
+  const out: string[] = [];
+  const qs = groupBy(state, 'key');
+  for (const [key, exprs] of Object.entries(qs)) {
+    out.push(`${key}(${mapExpressions(exprs)})`);
   }
+  setQueryString(`GET: /data?filter=${out.join('&')}`);
+};
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const columns = [
-        { key: 'firstName', headerText: 'First name', filter: true },
-        { key: 'lastName', headerText: 'Last name', filter: true },
-        { key: 'age', headerText: 'Age', filter: true, type: 'number' },
-        { key: 'email', headerText: 'Email' }
-      ];
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
+  const [queryString, setQueryString] = React.useState('');
 
-      const config = {
-        filter: async ({ data, grid }: any) => {
-          this.buildUri(grid.filterExpressions);
-          await new Promise((resolve) => setTimeout(resolve, 250));
-          return data;
-        },
-      };
+  const dataPipelineConfiguration = React.useMemo(() => ({
+    filter: async ({ data, grid }: any) => {
+      buildUri(grid.filterExpressions, setQueryString);
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      return data;
+    },
+  }), []);
 
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = this.allData;
-      this.gridRef.current.dataPipelineConfiguration = config;
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const allData: User[] = dataService.generateUsers(100);
+      gridRef.current.data = allData;
+      gridRef.current.dataPipelineConfiguration = dataPipelineConfiguration;
     }
-  }
-
-  protected mapExpressions(arr: any[]) {
-    return arr
-      .map(({ searchTerm, criteria, condition }: any, idx: number) => {
-        const c = condition;
-        return idx < 1
-          ? `${c.name}("${searchTerm}")`
-          : `${criteria?.toUpperCase()} ${c.name}("${searchTerm}")`;
-      })
-      .join(' ');
-  }
+  }, [dataPipelineConfiguration]);
 
-  protected buildUri(state: any[]) {
-    const out: string[] = [];
-    const qs = groupBy(state, 'key');
-    for (const [key, exprs] of Object.entries(qs)) {
-      out.push(`${key}(${this.mapExpressions(exprs)})`);
-    }
-    this.setState({ queryString: `GET: /data?filter=${out.join('&')}` });
-  }
-
-  public render(): JSX.Element {
-    return (
-      <div className="container sample ig-typography">
-        <div className="info-panel">
-          <div id="queryString">
-            <p><code>{this.state.queryString}</code></p>
-          </div>
-        </div>
-        <div className="grid-lite-wrapper">
-          <igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
+  return (
+    <div className="container sample ig-typography">
+      <div className="info-panel">
+        <div id="queryString">
+          <p><code>{queryString}</code></p>
         </div>
       </div>
-    );
-  }
+      <div className="grid-lite-wrapper">
+        <igc-grid-lite ref={gridRef} id="grid-lite">
+          <igc-grid-lite-column field="firstName" header="First name" filterable></igc-grid-lite-column>
+          <igc-grid-lite-column field="lastName" header="Last name" filterable></igc-grid-lite-column>
+          <igc-grid-lite-column field="age" header="Age" filterable data-type="number"></igc-grid-lite-column>
+          <igc-grid-lite-column field="email" header="Email"></igc-grid-lite-column>
+        </igc-grid-lite>
+      </div>
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/filtering-config/package.json b/samples/grids/grid-lite/filtering-config/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/filtering-config/package.json
+++ b/samples/grids/grid-lite/filtering-config/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/filtering-config/src/index.tsx b/samples/grids/grid-lite/filtering-config/src/index.tsx
index d4ad26d143..c4a8c77c0c 100644
--- a/samples/grids/grid-lite/filtering-config/src/index.tsx
+++ b/samples/grids/grid-lite/filtering-config/src/index.tsx
@@ -16,66 +16,38 @@ import "./index.css";
 IgcGridLite.register();
 defineComponents(IgcCheckboxComponent);
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
+// Define cellTemplate function outside component
+const activeCellTemplate = (params: any) => {
+  const checkbox = document.createElement('igc-checkbox');
+  if (params.value) {
+    checkbox.setAttribute('checked', '');
   }
+  return checkbox;
+};
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: User[] = this.dataService.generateUsers(50);
-      
-      const columns = [
-        { 
-          key: 'firstName', 
-          headerText: 'First name', 
-          filter: true 
-        },
-        { 
-          key: 'lastName', 
-          headerText: 'Last name', 
-          filter: true 
-        },
-        { 
-          key: 'age', 
-          headerText: 'Age', 
-          filter: true, 
-          type: 'number' 
-        },
-        {
-          key: 'active',
-          headerText: 'Active',
-          type: 'boolean',
-          filter: true,
-          cellTemplate: (params: any) => {
-            const checkbox = document.createElement('igc-checkbox');
-            if (params.value) {
-              checkbox.setAttribute('checked', '');
-            }
-            return checkbox;
-          }
-        }
-      ];
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
 
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = data;
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const data: User[] = dataService.generateUsers(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="firstName" header="First name" filterable></igc-grid-lite-column>
+          <igc-grid-lite-column field="lastName" header="Last name" filterable></igc-grid-lite-column>
+          <igc-grid-lite-column field="age" header="Age" filterable data-type="number"></igc-grid-lite-column>
+          <igc-grid-lite-column field="active" header="Active" data-type="boolean" filterable cellTemplate={activeCellTemplate}></igc-grid-lite-column>
+        </igc-grid-lite>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/overview/package.json b/samples/grids/grid-lite/overview/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/overview/package.json
+++ b/samples/grids/grid-lite/overview/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/overview/src/index.tsx b/samples/grids/grid-lite/overview/src/index.tsx
index 5e3a342f4e..d48f5934fd 100644
--- a/samples/grids/grid-lite/overview/src/index.tsx
+++ b/samples/grids/grid-lite/overview/src/index.tsx
@@ -24,126 +24,90 @@ defineComponents(
   IgcSelectComponent
 );
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private choices = ['Low', 'Standard', 'High'];
-  private gridRef: React.RefObject<any>;
+const choices = ['Low', 'Standard', 'High'];
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
+// Define cellTemplate functions outside component
+const avatarCellTemplate = (params: any) => {
+  const cell = document.createElement('igc-avatar');
+  cell.setAttribute('shape', 'circle');
+  cell.setAttribute('alt', 'User avatar');
+  cell.setAttribute('src', params.value);
+  return cell;
+};
+
+const priorityCellTemplate = (params: any) => {
+  const select = document.createElement('igc-select');
+  select.setAttribute('outlined', '');
+  select.setAttribute('flip', '');
+  select.setAttribute('value', params.value);
+  
+  choices.forEach(choice => {
+    const item = document.createElement('igc-select-item');
+    item.setAttribute('value', choice);
+    item.textContent = choice;
+    select.appendChild(item);
+  });
+  
+  return select;
+};
+
+const satisfactionCellTemplate = (params: any) => {
+  const rating = document.createElement('igc-rating');
+  rating.setAttribute('readonly', '');
+  rating.setAttribute('value', params.value.toString());
+  return rating;
+};
+
+const registeredAtCellTemplate = (params: any) => {
+  const span = document.createElement('span');
+  span.textContent = params.value.toLocaleString();
+  return span;
+};
+
+const activeCellTemplate = (params: any) => {
+  const checkbox = document.createElement('igc-checkbox');
+  if (params.value) {
+    checkbox.setAttribute('checked', '');
   }
+  return checkbox;
+};
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: User[] = this.dataService.generateUsers(1000);
-      
-      const columns = [
-        {
-          key: 'avatar',
-          headerText: 'Avatar',
-          cellTemplate: (params: any) => {
-            const cell = document.createElement('igc-avatar');
-            cell.setAttribute('shape', 'circle');
-            cell.setAttribute('alt', 'User avatar');
-            cell.setAttribute('src', params.value);
-            return cell;
-          }
-        },
-        {
-          key: 'firstName',
-          headerText: 'First name',
-          sort: true,
-          filter: true,
-          resizable: true
-        },
-        {
-          key: 'lastName',
-          headerText: 'Last name',
-          sort: true,
-          filter: true,
-          resizable: true
-        },
-        {
-          key: 'email',
-          headerText: 'Email Address'
-        },
-        {
-          key: 'priority',
-          headerText: 'Priority',
-          width: '12rem',
-          sort: {
-            comparer: (a: string, b: string) => this.choices.indexOf(a) - this.choices.indexOf(b),
-            caseSensitive: true
-          },
-          cellTemplate: (params: any) => {
-            const select = document.createElement('igc-select');
-            select.setAttribute('outlined', '');
-            select.setAttribute('flip', '');
-            select.setAttribute('value', params.value);
-            
-            this.choices.forEach(choice => {
-              const item = document.createElement('igc-select-item');
-              item.setAttribute('value', choice);
-              item.textContent = choice;
-              select.appendChild(item);
-            });
-            
-            return select;
-          }
-        },
-        {
-          key: 'satisfaction',
-          headerText: 'Satisfaction rating',
-          type: 'number',
-          sort: true,
-          filter: true,
-          cellTemplate: (params: any) => {
-            const rating = document.createElement('igc-rating');
-            rating.setAttribute('readonly', '');
-            rating.setAttribute('value', params.value.toString());
-            return rating;
-          }
-        },
-        {
-          key: 'registeredAt',
-          headerText: 'Registered @',
-          sort: true,
-          cellTemplate: (params: any) => {
-            const span = document.createElement('span');
-            span.textContent = params.value.toLocaleString();
-            return span;
-          }
-        },
-        {
-          key: 'active',
-          type: 'boolean',
-          headerText: 'Active',
-          cellTemplate: (params: any) => {
-            const checkbox = document.createElement('igc-checkbox');
-            if (params.value) {
-              checkbox.setAttribute('checked', '');
-            }
-            return checkbox;
-          }
-        }
-      ];
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
 
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = data;
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const data: User[] = dataService.generateUsers(1000);
+      
+      // Set custom sortConfiguration for priority column (can't be passed as prop)
+      const priorityCol = gridRef.current.columns.find((c: any) => c.field === 'priority');
+      if (priorityCol) {
+        priorityCol.sortConfiguration = {
+          comparer: (a: string, b: string) => choices.indexOf(a) - choices.indexOf(b)
+        };
+      }
+      
+      gridRef.current.data = data;
     }
-  }
+  }, []);
 
-  public render(): JSX.Element {
-    return (
-      <div className="container sample">
-        <div className="grid-lite-wrapper">
-          <igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
-        </div>
+  return (
+    <div className="container sample">
+      <div className="grid-lite-wrapper">
+        <igc-grid-lite ref={gridRef} id="grid-lite">
+          <igc-grid-lite-column field="avatar" header="Avatar" cellTemplate={avatarCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="firstName" header="First name" sortable filterable resizable></igc-grid-lite-column>
+          <igc-grid-lite-column field="lastName" header="Last name" sortable filterable resizable></igc-grid-lite-column>
+          <igc-grid-lite-column field="email" header="Email Address"></igc-grid-lite-column>
+          <igc-grid-lite-column field="priority" header="Priority" width="12rem" sortable sorting-case-sensitive cellTemplate={priorityCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="satisfaction" header="Satisfaction rating" data-type="number" sortable filterable cellTemplate={satisfactionCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="registeredAt" header="Registered @" sortable cellTemplate={registeredAtCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="active" data-type="boolean" header="Active" cellTemplate={activeCellTemplate}></igc-grid-lite-column>
+        </igc-grid-lite>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/sort-config-events/package.json b/samples/grids/grid-lite/sort-config-events/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/sort-config-events/package.json
+++ b/samples/grids/grid-lite/sort-config-events/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/sort-config-events/src/index.tsx b/samples/grids/grid-lite/sort-config-events/src/index.tsx
index c7f5c06483..0de195ae7a 100644
--- a/samples/grids/grid-lite/sort-config-events/src/index.tsx
+++ b/samples/grids/grid-lite/sort-config-events/src/index.tsx
@@ -15,130 +15,99 @@ import "./index.css";
 IgcGridLite.register();
 defineComponents(IgcRatingComponent);
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-  private logRef: React.RefObject<HTMLDivElement>;
-  private log: string[] = [];
+const getTimeStamp = (): string => `[${new Date().toLocaleTimeString()}]`;
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-    this.logRef = React.createRef<HTMLDivElement>();
-    this.state = { logContent: '' };
-    this.handleSorting = this.handleSorting.bind(this);
-    this.handleSorted = this.handleSorted.bind(this);
-  }
+// Define cellTemplate function outside component
+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;
+};
 
-  get timeStamp(): string {
-    return `[${new Date().toLocaleTimeString()}]`;
-  }
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
+  const logRef = React.useRef<HTMLDivElement>(null);
+  const [log, setLog] = React.useState<string[]>([]);
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: ProductInfo[] = this.dataService.generateProducts(100);
-      
-      const columns = [
-        { 
-          key: 'name', 
-          headerText: 'Name', 
-          sort: true 
-        },
-        { 
-          key: 'price', 
-          type: 'number', 
-          headerText: 'Price', 
-          sort: true 
-        },
-        {
-          key: 'rating',
-          type: 'number',
-          headerText: 'Rating',
-          sort: true,
-          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;
-          }
-        },
-        { 
-          key: 'sold', 
-          type: 'number', 
-          headerText: 'Sold', 
-          sort: true 
-        },
-        { 
-          key: 'total', 
-          type: 'number', 
-          headerText: 'Total', 
-          sort: true 
-        }
-      ];
-
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = data;
-
-      // Listen to sorting events
-      this.gridRef.current.addEventListener('sorting', this.handleSorting);
-      this.gridRef.current.addEventListener('sorted', this.handleSorted);
-    }
-  }
-
-  private updateLog(message: string) {
-    if (this.log.length > 10) {
-      this.log.shift();
-    }
-    this.log.push(message);
-    this.renderLog();
-  }
-
-  private renderLog() {
-    const logContent = this.log
-      .map(entry => `<p><code>${entry}</code></p>`)
-      .join('');
-    this.setState({ logContent }, () => {
-      if (this.logRef.current) {
-        this.logRef.current.scrollTop = this.logRef.current.scrollHeight;
+  const updateLog = React.useCallback((message: string) => {
+    setLog(prevLog => {
+      const newLog = [...prevLog];
+      if (newLog.length > 10) {
+        newLog.shift();
       }
+      newLog.push(message);
+      return newLog;
     });
-  }
+  }, []);
+
+  React.useEffect(() => {
+    if (logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [log]);
 
-  private handleSorting(event: any) {
+  const handleSorting = React.useCallback((event: any) => {
     const { detail, type } = event;
     const allowedColumns = ['price', 'total', 'sold'];
     
     if (!allowedColumns.includes(detail.key)) {
       event.preventDefault();
-      this.updateLog(
-        `${this.timeStamp} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'`
+      updateLog(
+        `${getTimeStamp()} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'`
       );
     } else {
-      this.updateLog(
-        `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}`
+      updateLog(
+        `${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}`
       );
     }
-  }
+  }, [updateLog]);
 
-  private handleSorted(event: any) {
+  const handleSorted = React.useCallback((event: any) => {
     const { detail, type } = event;
-    this.updateLog(
-      `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}`
+    updateLog(
+      `${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}`
     );
-  }
+  }, [updateLog]);
+
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const data: ProductInfo[] = dataService.generateProducts(100);
+      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 ref={this.logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: this.state.logContent }}></div>
-        </div>
+      // Listen to sorting events
+      gridRef.current.addEventListener('sorting', handleSorting);
+      gridRef.current.addEventListener('sorted', handleSorted);
+
+      return () => {
+        if (gridRef.current) {
+          gridRef.current.removeEventListener('sorting', handleSorting);
+          gridRef.current.removeEventListener('sorted', handleSorted);
+        }
+      };
+    }
+  }, [handleSorting, handleSorted]);
+
+  const logContent = log
+    .map(entry => `<p><code>${entry}</code></p>`)
+    .join('');
+
+  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="Name" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="price" data-type="number" header="Price" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="rating" data-type="number" header="Rating" sortable cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="sold" data-type="number" header="Sold" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="total" data-type="number" header="Total" sortable></igc-grid-lite-column>
+        </igc-grid-lite>
+        <div ref={logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: logContent }}></div>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/sort-config-grid/package.json b/samples/grids/grid-lite/sort-config-grid/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/sort-config-grid/package.json
+++ b/samples/grids/grid-lite/sort-config-grid/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/sort-config-grid/src/index.tsx b/samples/grids/grid-lite/sort-config-grid/src/index.tsx
index 16663efe6a..a125cfcc24 100644
--- a/samples/grids/grid-lite/sort-config-grid/src/index.tsx
+++ b/samples/grids/grid-lite/sort-config-grid/src/index.tsx
@@ -16,94 +16,54 @@ import "./index.css";
 IgcGridLite.register();
 defineComponents(IgcRatingComponent);
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-  private sortConfiguration: any = {
-    multiple: true,
-    triState: true
-  };
+// Define cellTemplate function outside component
+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;
+};
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-    this.updateConfig = this.updateConfig.bind(this);
-  }
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
+  const [sortingOptions, setSortingOptions] = React.useState<any>({
+    mode: 'multiple'
+  });
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: ProductInfo[] = this.dataService.generateProducts(100);
-      
-      const columns = [
-        { 
-          key: 'name', 
-          headerText: 'Name', 
-          sort: true 
-        },
-        { 
-          key: 'price', 
-          type: 'number', 
-          headerText: 'Price', 
-          sort: true 
-        },
-        {
-          key: 'rating',
-          type: 'number',
-          headerText: 'Rating',
-          sort: true,
-          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;
-          }
-        },
-        { 
-          key: 'sold', 
-          type: 'number', 
-          headerText: 'Sold', 
-          sort: true 
-        },
-        { 
-          key: 'total', 
-          type: 'number', 
-          headerText: 'Total', 
-          sort: true 
-        }
-      ];
-
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = data;
-      this.gridRef.current.sortConfiguration = this.sortConfiguration;
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const data: ProductInfo[] = dataService.generateProducts(100);
+      gridRef.current.data = data;
+      gridRef.current.sortingOptions = sortingOptions;
     }
-  }
+  }, [sortingOptions]);
 
-  private updateConfig(prop: string, checked: boolean) {
-    this.sortConfiguration = { ...this.sortConfiguration, [prop]: checked };
-    if (this.gridRef.current) {
-      this.gridRef.current.sortConfiguration = this.sortConfiguration;
+  const updateConfig = React.useCallback((prop: string, checked: boolean) => {
+    if (prop === 'multiple') {
+      setSortingOptions({ mode: checked ? 'multiple' : 'single' });
     }
-  }
+  }, []);
 
-  public render(): JSX.Element {
-    return (
-      <div className="container sample ig-typography">
-        <div className="controls-wrapper">
-          <IgrSwitch id="multisort" checked={true} onChange={(e: any) => this.updateConfig('multiple', e.target.checked)}>
-            Multiple Sort
-          </IgrSwitch>
-          <IgrSwitch id="triState" checked={true} onChange={(e: any) => this.updateConfig('triState', e.target.checked)}>
-            Tri-State
-          </IgrSwitch>
-        </div>
-        <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="controls-wrapper">
+        <IgrSwitch id="multisort" checked={true} onChange={(e: any) => updateConfig('multiple', e.target.checked)}>
+          Multiple Sort
+        </IgrSwitch>
+      </div>
+      <div className="grid-lite-wrapper">
+        <igc-grid-lite ref={gridRef} id="grid-lite">
+          <igc-grid-lite-column field="name" header="Name" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="price" data-type="number" header="Price" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="rating" data-type="number" header="Rating" sortable cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="sold" data-type="number" header="Sold" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="total" data-type="number" header="Total" sortable></igc-grid-lite-column>
+        </igc-grid-lite>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/sort-config-pipeline/package.json b/samples/grids/grid-lite/sort-config-pipeline/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/sort-config-pipeline/package.json
+++ b/samples/grids/grid-lite/sort-config-pipeline/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx b/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx
index 10bd2a83e4..e81ec57dc7 100644
--- a/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx
+++ b/samples/grids/grid-lite/sort-config-pipeline/src/index.tsx
@@ -16,115 +16,80 @@ import "./index.css";
 IgcGridLite.register();
 defineComponents(IgcRatingComponent, IgcCircularProgressComponent);
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-  private progressRef: React.RefObject<HTMLDivElement>;
+// Define cellTemplate function outside component
+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;
+};
 
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-    this.progressRef = React.createRef();
-    this.state = { queryString: '' };
+const buildUri = (state: any[]): string => {
+  const uri: string[] = [];
+  for (const expr of state) {
+    if (expr.direction === 'none') {
+      continue;
+    }
+    uri.push(
+      expr.direction === 'ascending'
+        ? `asc(${expr.key})`
+        : `desc(${expr.key})`
+    );
   }
+  return `GET: /data?sort_by=${uri.join(',')}`;
+};
 
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: ProductInfo[] = this.dataService.generateProducts(100);
-      
-      const columns = [
-        { 
-          key: 'name', 
-          headerText: 'Name', 
-          sort: true 
-        },
-        { 
-          key: 'price', 
-          type: 'number', 
-          headerText: 'Price', 
-          sort: true 
-        },
-        {
-          key: 'rating',
-          type: 'number',
-          headerText: 'Rating',
-          sort: true,
-          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;
-          }
-        },
-        { 
-          key: 'sold', 
-          type: 'number', 
-          headerText: 'Sold', 
-          sort: true 
-        },
-        { 
-          key: 'total', 
-          type: 'number', 
-          headerText: 'Total', 
-          sort: true 
-        }
-      ];
-
-      const dataPipelineConfiguration = {
-        sort: async ({ data, grid }: any) => {
-          if (this.progressRef.current) {
-            this.progressRef.current.classList.add('in-operation');
-          }
-          const queryString = grid.sortExpressions.length
-            ? this.buildUri(grid.sortExpressions)
-            : '';
-          this.setState({ queryString });
-          
-          await new Promise(resolve => setTimeout(resolve, 250));
-          if (this.progressRef.current) {
-            this.progressRef.current.classList.remove('in-operation');
-          }
-          return data;
-        }
-      };
+export default function Sample() {
+  const gridRef = React.useRef<any>(null);
+  const progressRef = React.useRef<HTMLDivElement>(null);
+  const [queryString, setQueryString] = React.useState('');
 
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = data;
-      this.gridRef.current.dataPipelineConfiguration = dataPipelineConfiguration;
+  const dataPipelineConfiguration = React.useMemo(() => ({
+    sort: async ({ data, grid }: any) => {
+      if (progressRef.current) {
+        progressRef.current.classList.add('in-operation');
+      }
+      const qs = grid.sortingExpressions.length
+        ? buildUri(grid.sortingExpressions)
+        : '';
+      setQueryString(qs);
+      
+      await new Promise(resolve => setTimeout(resolve, 250));
+      if (progressRef.current) {
+        progressRef.current.classList.remove('in-operation');
+      }
+      return data;
     }
-  }
+  }), []);
 
-  private buildUri(state: any[]): string {
-    const uri: string[] = [];
-    for (const expr of state) {
-      if (expr.direction === 'none') {
-        continue;
-      }
-      uri.push(
-        expr.direction === 'ascending'
-          ? `asc(${expr.key})`
-          : `desc(${expr.key})`
-      );
+  React.useEffect(() => {
+    if (gridRef.current) {
+      const dataService = new GridLiteDataService();
+      const data: ProductInfo[] = dataService.generateProducts(100);
+      gridRef.current.data = data;
+      gridRef.current.dataPipelineConfiguration = dataPipelineConfiguration;
     }
-    return `GET: /data?sort_by=${uri.join(',')}`;
-  }
+  }, [dataPipelineConfiguration]);
 
-  public render(): JSX.Element {
-    return (
-      <div className="container sample ig-typography">
-        <div className="info-panel">
-          <div id="queryString">
-            <p><code>{this.state.queryString}</code></p>
-          </div>
-        </div>
-        <div className="grid-lite-wrapper">
-          <igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
+  return (
+    <div className="container sample ig-typography">
+      <div className="info-panel">
+        <div id="queryString">
+          <p><code>{queryString}</code></p>
         </div>
       </div>
-    );
-  }
+      <div className="grid-lite-wrapper">
+        <igc-grid-lite ref={gridRef} id="grid-lite">
+          <igc-grid-lite-column field="name" header="Name" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="price" data-type="number" header="Price" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="rating" data-type="number" header="Rating" sortable cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
+          <igc-grid-lite-column field="sold" data-type="number" header="Sold" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="total" data-type="number" header="Total" sortable></igc-grid-lite-column>
+        </igc-grid-lite>
+      </div>
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/sort-config-sample/package.json b/samples/grids/grid-lite/sort-config-sample/package.json
index bcef229119..d158eead5f 100644
--- a/samples/grids/grid-lite/sort-config-sample/package.json
+++ b/samples/grids/grid-lite/sort-config-sample/package.json
@@ -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",
diff --git a/samples/grids/grid-lite/sort-config-sample/src/index.tsx b/samples/grids/grid-lite/sort-config-sample/src/index.tsx
index c2953a7665..0b2faa3d6e 100644
--- a/samples/grids/grid-lite/sort-config-sample/src/index.tsx
+++ b/samples/grids/grid-lite/sort-config-sample/src/index.tsx
@@ -11,58 +11,29 @@ import "./index.css";
 // Register components
 IgcGridLite.register();
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-  }
-
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: User[] = this.dataService.generateUsers(50);
-      
-      const columns = [
-        { 
-          key: 'firstName', 
-          headerText: 'First name', 
-          sort: true 
-        },
-        { 
-          key: 'lastName', 
-          headerText: 'Last name', 
-          sort: true 
-        },
-        { 
-          key: 'age', 
-          headerText: 'Age', 
-          sort: true, 
-          type: 'number' 
-        },
-        { 
-          key: 'email', 
-          headerText: 'Email',
-          sort: true
-        }
-      ];
-
-      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: User[] = dataService.generateUsers(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="firstName" header="First name" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="lastName" header="Last name" sortable></igc-grid-lite-column>
+          <igc-grid-lite-column field="age" header="Age" sortable data-type="number"></igc-grid-lite-column>
+          <igc-grid-lite-column field="email" header="Email" sortable></igc-grid-lite-column>
+        </igc-grid-lite>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM
diff --git a/samples/grids/grid-lite/styling-custom-theme/package.json b/samples/grids/grid-lite/styling-custom-theme/package.json
index 8c431949c5..2d0cfb484f 100644
--- a/samples/grids/grid-lite/styling-custom-theme/package.json
+++ b/samples/grids/grid-lite/styling-custom-theme/package.json
@@ -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-theming": "^24.0.2",
     "igniteui-webcomponents": "^6.3.0",
diff --git a/samples/grids/grid-lite/styling-custom-theme/src/index.tsx b/samples/grids/grid-lite/styling-custom-theme/src/index.tsx
index e947abd237..8ce1fde75f 100644
--- a/samples/grids/grid-lite/styling-custom-theme/src/index.tsx
+++ b/samples/grids/grid-lite/styling-custom-theme/src/index.tsx
@@ -16,77 +16,38 @@ import "./index.scss";
 IgcGridLite.register();
 defineComponents(IgcRatingComponent);
 
-export default class Sample extends React.Component<any, any> {
-  private dataService: GridLiteDataService;
-  private gridRef: React.RefObject<any>;
-
-  constructor(props: any) {
-    super(props);
-    this.dataService = new GridLiteDataService();
-    this.gridRef = React.createRef();
-  }
-
-  componentDidMount() {
-    if (this.gridRef.current) {
-      const data: ProductInfo[] = this.dataService.generateProducts(50);
-      
-      const columns = [
-        { 
-          key: 'name', 
-          headerText: 'Product', 
-          sort: true, 
-          filter: true 
-        },
-        {
-          key: 'price',
-          headerText: 'Price',
-          sort: true,
-          filter: true,
-          type: 'number'
-        },
-        {
-          key: 'sold',
-          headerText: 'Sold',
-          sort: true,
-          filter: true,
-          type: 'number'
-        },
-        {
-          key: 'total',
-          headerText: 'Total',
-          sort: true,
-          filter: true,
-          type: 'number'
-        },
-        {
-          key: 'rating',
-          headerText: 'Rating',
-          type: 'number',
-          sort: true,
-          filter: true,
-          cellTemplate: (params: any) => {
-            const rating = document.createElement('igc-rating');
-            rating.setAttribute('readonly', '');
-            rating.setAttribute('value', params.value.toString());
-            return rating;
-          }
-        }
-      ];
-
-      this.gridRef.current.columns = columns;
-      this.gridRef.current.data = data;
+// Define cellTemplate function outside component
+const ratingCellTemplate = (params: any) => {
+  const rating = document.createElement('igc-rating');
+  rating.setAttribute('readonly', '');
+  rating.setAttribute('value', params.value.toString());
+  return rating;
+};
+
+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" className="custom-styled"></igc-grid-lite>
-        </div>
+  }, []);
+
+  return (
+    <div className="container sample ig-typography">
+      <div className="grid-lite-wrapper">
+        <igc-grid-lite ref={gridRef} id="grid-lite" className="custom-styled">
+          <igc-grid-lite-column field="name" header="Product" sortable filterable></igc-grid-lite-column>
+          <igc-grid-lite-column field="price" header="Price" sortable filterable data-type="number"></igc-grid-lite-column>
+          <igc-grid-lite-column field="sold" header="Sold" sortable filterable data-type="number"></igc-grid-lite-column>
+          <igc-grid-lite-column field="total" header="Total" sortable filterable data-type="number"></igc-grid-lite-column>
+          <igc-grid-lite-column field="rating" header="Rating" data-type="number" sortable filterable cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
+        </igc-grid-lite>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 // rendering above component in the React DOM