diff --git a/live-editing/Routes.ts b/live-editing/Routes.ts
index 8b37443186..969036b830 100644
--- a/live-editing/Routes.ts
+++ b/live-editing/Routes.ts
@@ -9,6 +9,7 @@ import * as TreeGridDvRoutingModule from '../projects/app-lob/src/app/tree-grid/
 import * as DataDisplayRouting from '../src/app/data-display/data-display.routes';
 import * as DataEntriesRouting from '../src/app/data-entries/data-entries.routes';
 import * as GridRouting from '../src/app/grid/grids.routes';
+import * as GridLiteRouting from '../src/app/grid-lite/grid-lite.routes';
 import * as PivotGridRouting from '../src/app/pivot-grid/pivot-grids.routes';
 import * as HierarchicalGridRouting from '../src/app/hierarchical-grid/hierarchical-grid.routes';
 import * as InteractionsRouting from '../src/app/interactions/interactions.routes';
@@ -68,6 +69,10 @@ export const MODULE_ROUTES = [
         path: 'grid',
         routes: GridRouting.GridsRoutes
     },
+    {
+        path: 'grid-lite',
+        routes: GridLiteRouting.GridLiteRoutes
+    },
     {
         path: 'pivot-grid',
         routes: PivotGridRouting.PivotGridsRoutes
diff --git a/live-editing/configs/BaseConfig.ts b/live-editing/configs/BaseConfig.ts
index d8f4d4f0dc..0aa9662bbf 100644
--- a/live-editing/configs/BaseConfig.ts
+++ b/live-editing/configs/BaseConfig.ts
@@ -7,5 +7,7 @@ export const BaseAppConfig = {
     providers: [
         { 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' }
     ],
-    router: false
-}
\ No newline at end of file
+    routesConfig: {
+        router: false
+    }
+}
diff --git a/live-editing/configs/GridCRMConfigGenerator.ts b/live-editing/configs/GridCRMConfigGenerator.ts
index dd0100d557..dd36ae0233 100644
--- a/live-editing/configs/GridCRMConfigGenerator.ts
+++ b/live-editing/configs/GridCRMConfigGenerator.ts
@@ -26,8 +26,7 @@ export class GridCRMConfigGenerator implements IConfigGenerator {
                 ],
                 providers: [
                     { 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' }
-                ],
-                router: true
+                ]
             }
             /*appConfig: BaseAppConfig*/
 
diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts
index 4c27d5eeb9..450a500884 100644
--- a/live-editing/configs/GridConfigGenerator.ts
+++ b/live-editing/configs/GridConfigGenerator.ts
@@ -452,11 +452,17 @@ export class GridConfigGenerator implements IConfigGenerator {
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts',
                 '/src/app/grid/grid-save-state/localData.ts',
                 '/src/app/grid/grid-save-state/about.component.ts',
-                '/src/app/grid/grid-save-state/about.component.html'
+                '/src/app/grid/grid-save-state/about.component.html',
+                '/src/app/grid/grid-save-state/routes.ts'
             ],
-            appConfig: BaseAppConfig
+            appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './grid/grid-save-state/routes'
+                }
+            }
         });
-        gridSaveStateSampleConfig.usesRouting = true;
         configs.push(gridSaveStateSampleConfig);
 
         configs.push(new Config({
diff --git a/live-editing/configs/GridLiteConfigGenerator.ts b/live-editing/configs/GridLiteConfigGenerator.ts
new file mode 100644
index 0000000000..fa50c8afdf
--- /dev/null
+++ b/live-editing/configs/GridLiteConfigGenerator.ts
@@ -0,0 +1,140 @@
+import { Config, IConfigGenerator } from 'igniteui-live-editing'
+import { BaseAppConfig } from './BaseConfig';
+
+export class GridLiteConfigGenerator implements IConfigGenerator {
+    public additionalImports = {
+        //GridLiteDataService: '../../src/app/grid-lite/grid-lite-data.service.ts'
+    };
+
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        configs.push(new Config({
+            component: 'GridLiteOverviewComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteColumnConfigSimpleComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteColumnConfigDynamicComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteColumnConfigHeadersComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteDataBindingDynamicComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteFilteringSimpleComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteFilteringEventsComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteFilteringPipelineComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteSortingSimpleComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteSortingEventsComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteSortingGridConfigComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteSortingPipelineComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteStylingCustomComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        configs.push(new Config({
+            component: 'GridLiteStylingThemesComponent',
+            additionalDependencies: ['igniteui-grid-lite'],
+            additionalFiles: [
+                '/src/app/grid-lite/grid-lite-data.service.ts'
+            ],
+            appConfig: BaseAppConfig
+        }));
+
+        return configs;
+    };
+}
\ No newline at end of file
diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts
index 7780d0d0cc..1b8d63c1ba 100644
--- a/live-editing/configs/HierarchicalGridConfigGenerator.ts
+++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable max-len */
-import {ReactiveFormsModule} from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import {
     IgxActionStripModule,
@@ -517,12 +517,18 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
                 '/src/app/data/singersData.ts',
                 '/src/app/hierarchical-grid/models.ts',
                 '/src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.ts',
-                '/src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.html'
+                '/src/app/hierarchical-grid/hierarchical-grid-save-state/about.component.html',
+                '/src/app/hierarchical-grid/hierarchical-grid-save-state/routes.ts'
             ],
-            appConfig: BaseAppConfig,
+            appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './hierarchical-grid/hierarchical-grid-save-state/routes'
+                }
+            },
             component: 'HGridSaveStateComponent'
         });
-        hGridSaveStateSampleConfig.usesRouting = true;
         configs.push(hGridSaveStateSampleConfig);
 
         configs.push(new Config({
diff --git a/live-editing/configs/PivotGridConfigGenerator.ts b/live-editing/configs/PivotGridConfigGenerator.ts
index 1c451d3c14..a9676ce379 100644
--- a/live-editing/configs/PivotGridConfigGenerator.ts
+++ b/live-editing/configs/PivotGridConfigGenerator.ts
@@ -42,14 +42,21 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
         }));
 
         configs.push(new Config({
-            additionalFiles: 
+            additionalFiles:
             [
                 '/src/app/directives/prevent-scroll.directive.ts',
                 '/src/app/data/dataToAnalyze.ts',
                 '/src/app/pivot-grid/pivot-state-persistence/about.component.ts',
                 '/src/app/pivot-grid/pivot-state-persistence/about.component.html',
+                '/src/app/pivot-grid/pivot-state-persistence/routes.ts'
             ],
-            appConfig: BaseAppConfig,
+             appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './pivot-grid/pivot-state-persistence/routes'
+                }
+            },
             component: 'PivotGridStatePersistenceSampleComponent'
         }));
 
diff --git a/live-editing/configs/TabBarConfigGenerator.ts b/live-editing/configs/TabBarConfigGenerator.ts
index 10701008b4..597cd869a1 100644
--- a/live-editing/configs/TabBarConfigGenerator.ts
+++ b/live-editing/configs/TabBarConfigGenerator.ts
@@ -37,8 +37,8 @@ export class TabBarConfigGenerator implements IConfigGenerator {
                 "/src/app/layouts/tabbar/views/view3/view3.component.ts",
                 "/src/app/layouts/tabbar/views/view3/view3.component.html"
             ],
-            /* TODO: Adding the correct router config needs to be done separately */
-            appConfig: { ...BaseAppConfig, ...{ router: true }},
+            /* Note: the Tabbar samples are not used anymore */
+            appConfig: { ...BaseAppConfig, ...{ routesConfig: { router: true } }},
             shortenComponentPathBy: "/layouts/tabbar/"
         }));
 
diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts
index 2773942d7a..6a69385dd0 100644
--- a/live-editing/configs/TabsConfigGenerator.ts
+++ b/live-editing/configs/TabsConfigGenerator.ts
@@ -45,10 +45,16 @@ export class TabsConfigGenerator implements IConfigGenerator {
                 "/src/app/layouts/tabs/views/view2/view2.component.ts",
                 "/src/app/layouts/tabs/views/view2/view2.component.html",
                 "/src/app/layouts/tabs/views/view3/view3.component.ts",
-                "/src/app/layouts/tabs/views/view3/view3.component.html"
+                "/src/app/layouts/tabs/views/view3/view3.component.html",
+                "/src/app/layouts/tabs/tabs-sample-4/routes.ts"
             ],
-            /* TODO: Adding the correct router config needs to be done separately */
-            appConfig: { ...BaseAppConfig, ...{ router: true }},
+             appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './tabs-sample-4/routes'
+                }
+            },
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts
index e1e847104a..afdaf948b6 100644
--- a/live-editing/configs/TreeGridConfigGenerator.ts
+++ b/live-editing/configs/TreeGridConfigGenerator.ts
@@ -672,12 +672,19 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
                 '/src/app/directives/prevent-scroll.directive.ts',
                 '/src/app/tree-grid/tree-grid-save-state/data.ts',
                 '/src/app/tree-grid/tree-grid-save-state/about.component.ts',
-                '/src/app/tree-grid/tree-grid-save-state/about.component.html'],
-            appConfig: BaseAppConfig,
+                '/src/app/tree-grid/tree-grid-save-state/about.component.html',
+                '/src/app/tree-grid/tree-grid-save-state/routes.ts'
+            ],
+            appConfig: {
+                ...BaseAppConfig,
+                routesConfig: {
+                    router: true,
+                    routesImportPath: './tree-grid-save-state/routes'
+                }
+            },
             component: 'TGridSaveStateComponent',
             shortenComponentPathBy: '/tree-grid/'
         });
-        treeGridSaveStateSampleConfig.usesRouting = true;
         configs.push(treeGridSaveStateSampleConfig);
 
         configs.push(new Config({
diff --git a/live-editing/generators/ConfigGenerators.ts b/live-editing/generators/ConfigGenerators.ts
index f3e2cac078..737037792f 100644
--- a/live-editing/generators/ConfigGenerators.ts
+++ b/live-editing/generators/ConfigGenerators.ts
@@ -1,5 +1,3 @@
-import { Config, IConfigGenerator } from 'igniteui-live-editing'
-import { BaseAppConfig } from './BaseConfig';;
 import { ActionStripConfigGenerator } from '../configs/ActionStripConfigGenerator';
 import { AutocompleteConfigGenerator } from '../configs/AutocompleteConfigGenerator';
 import { AvatarConfigGenerator } from '../configs/AvatarConfigGenerator';
@@ -64,6 +62,7 @@ import { PaginationConfigGenerator } from '../configs/PaginationConfigGenerator'
 import { PivotGridConfigGenerator } from '../configs/PivotGridConfigGenerator';
 import { QueryBuilderConfigGenerator } from '../configs/QueryBuilderConfigGenerator';
 import { TileManagerConfigGenerator } from '../configs/TileManagerConfigGenerator';
+import { GridLiteConfigGenerator } from '../configs/GridLiteConfigGenerator';
 
 export const CONFIG_GENERATORS =
     [
@@ -118,6 +117,7 @@ export const CONFIG_GENERATORS =
         HierarchicalGridConfigGenerator,
         TreeGridConfigGenerator,
         PivotGridConfigGenerator,
+        GridLiteConfigGenerator,
 
         // other:
         ActionStripConfigGenerator,
diff --git a/package-lock.json b/package-lock.json
index 29b0a9b516..7ac2f114a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,13 +35,14 @@
         "express": "^4.18.2",
         "file-saver": "^2.0.2",
         "hammerjs": "^2.0.8",
-        "igniteui-angular": "^20.1.6",
-        "igniteui-angular-charts": "^19.0.1",
-        "igniteui-angular-core": "^19.0.1",
-        "igniteui-angular-extras": "^20.0.0",
-        "igniteui-angular-i18n": "^20.1.6",
+        "igniteui-angular": "^20.1.10",
+        "igniteui-angular-charts": "^20.1.0",
+        "igniteui-angular-core": "^20.1.0",
+        "igniteui-angular-extras": "^20.0.2",
+        "igniteui-angular-i18n": "^20.1.4",
         "igniteui-dockmanager": "^1.17.0",
-        "igniteui-live-editing": "^3.1.1",
+        "igniteui-grid-lite": "^0.0.1",
+        "igniteui-live-editing": "^3.2.0",
         "igniteui-webcomponents": "^6.2.0",
         "minireset.css": "0.0.6",
         "postcss": "^8.5.5",
@@ -12561,14 +12562,14 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/igniteui-angular": {
-      "version": "20.1.6",
-      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-20.1.6.tgz",
-      "integrity": "sha512-8JiuQTKFWEhBe8x8MfU7IVpr0uW3uxB4XCgsB9tQUicJvsPOrdIUmu9b36G96FhUoKimIumpjY5K6o9d1cVpOA==",
+      "version": "20.1.10",
+      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-20.1.10.tgz",
+      "integrity": "sha512-RmerKb47MUXTSE6TOl4fgDNW2IERHhn6GnFncSFZDsjzfCSEttUy5T1BZgEAsIWxIwfV7M9HI39xJuLl2OItDQ==",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@igniteui/material-icons-extended": "^3.1.0",
         "fflate": "^0.8.1",
-        "igniteui-theming": "^22.0.0",
+        "igniteui-theming": "^23.0.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "tslib": "^2.3.0"
@@ -12591,38 +12592,38 @@
       }
     },
     "node_modules/igniteui-angular-charts": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-charts/-/igniteui-angular-charts-19.1.0.tgz",
-      "integrity": "sha512-GtWTI8gmJk5MpbUUGjK2ATJfyfl1sxbfEdR23xAvI7XrOvwpJnsGAf4QKeGg45XOS4fyF5hGBl/HN95m9lyoSw==",
+      "version": "20.1.0",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-charts/-/igniteui-angular-charts-20.1.0.tgz",
+      "integrity": "sha512-VwVsWRjHHMAjXHmrN2ddFqJwyRaXCVo52zaXyydc/Iq7VOK7pwruGdsiDbOj/5uFbMDpYu5O9x7DZ7T09mJwPA==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "@angular/common": "^19.0.0",
-        "@angular/compiler": "^19.0.0",
-        "@angular/core": "^19.0.0",
-        "igniteui-angular-core": "19.1.0"
+        "@angular/common": "^20.0.0",
+        "@angular/compiler": "^20.0.0",
+        "@angular/core": "^20.0.0",
+        "igniteui-angular-core": "20.1.0"
       }
     },
     "node_modules/igniteui-angular-core": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-core/-/igniteui-angular-core-19.1.0.tgz",
-      "integrity": "sha512-8SKEDy4qn+Ft6hTrjN0OZOIM1WSvr3ULPGmRJY08qsTYWuRBhW2ZIx4/TxCvXbnO0mJv3nLUMtNGWLAH92s0MA==",
+      "version": "20.1.0",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-core/-/igniteui-angular-core-20.1.0.tgz",
+      "integrity": "sha512-KsOmwRjJp6vwaYpznhB8byZq8smMH3KLB+NNU1SU+O4iSx4inSBfYTa09pn9Hov+I/k1CfX90n0NqchMs5pgqg==",
       "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)",
       "dependencies": {
         "tslib": "^2.3.1"
       },
       "peerDependencies": {
-        "@angular/common": "^19.0.0",
-        "@angular/compiler": "^19.0.0",
-        "@angular/core": "^19.0.0"
+        "@angular/common": "^20.0.0",
+        "@angular/compiler": "^20.0.0",
+        "@angular/core": "^20.0.0"
       }
     },
     "node_modules/igniteui-angular-extras": {
-      "version": "20.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-20.0.0.tgz",
-      "integrity": "sha512-chYEtnynwEUiJQqlNG3n79FChxHBA/y9WclKcVvzvpldwRZX3ctQh22cUH/G/rCT4gc98GV1qbwvogHAL017OA==",
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/igniteui-angular-extras/-/igniteui-angular-extras-20.0.2.tgz",
+      "integrity": "sha512-/jWLKtL2Ls0+erb7IBhApVM2KsAKlotEC713xo5NgGvBr78S/cdKQFfLNsrfCYHddqur/KEmamhZtfz/0e5e9Q==",
       "dependencies": {
         "igniteui-trial-watermark": "^3.0.2",
         "tslib": "^2.0.0"
@@ -12631,8 +12632,8 @@
         "@angular/common": "20",
         "@angular/core": "20",
         "igniteui-angular": "20",
-        "igniteui-angular-charts": "19",
-        "igniteui-angular-core": "19"
+        "igniteui-angular-charts": "20",
+        "igniteui-angular-core": "20"
       }
     },
     "node_modules/igniteui-angular-i18n": {
@@ -12656,16 +12657,46 @@
       "integrity": "sha512-q6thtu+7R6MOB+i9GorFPCcWeOImW43BzCAtKnDAYWwaoueb8Lg1EhBkIhAyfEIH+yZ/9c5lnZdU61/GRPoP+g==",
       "license": "Apache-2.0"
     },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "@lit-labs/virtualizer": "~2.1.0",
+        "@lit/context": "~1.1.5",
+        "igniteui-webcomponents": "~6.1.0",
+        "lit": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "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",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.0",
+        "@lit-labs/virtualizer": "^2.1.0",
+        "@lit/context": "^1.1.0",
+        "lit": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/igniteui-live-editing": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.1.1.tgz",
-      "integrity": "sha512-WyoNlXS5yazjfhRcv01HnvRIiTrCMHMmQ/Ko3eNDSijsZPQLtjckb9vcj6jDeowNyG+GT4d8hE/S6hEoYXTpUg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/igniteui-live-editing/-/igniteui-live-editing-3.2.0.tgz",
+      "integrity": "sha512-GfDDql8G9GjqtmmaDmB13fvqzaZtO34Db/hhJnYud8MThPq7oECl37jrzvRMxBSXRIFKpZ4SLPneb7UlWz93hA==",
       "license": "MIT"
     },
     "node_modules/igniteui-theming": {
-      "version": "22.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.1.0.tgz",
-      "integrity": "sha512-Fi3QaVXTX6sLfEAXEQn96yfw3xWpHCIibOl8joWXH6H3GWjAgupF6WHBSewOPeS9z9Ei5Lh/MfmktW8jaqwiaQ==",
+      "version": "23.2.1",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-23.2.1.tgz",
+      "integrity": "sha512-kg7X70GDX8sj2JSdwXXVZ0x32F1bovqfu/qc28NEDO+TRODS5CTFfuey7tnochhp6hlTnv/KXXVkRJYia4iCHQ==",
       "license": "MIT"
     },
     "node_modules/igniteui-trial-watermark": {
diff --git a/package.json b/package.json
index fe036cce0f..50cf14afcf 100644
--- a/package.json
+++ b/package.json
@@ -72,13 +72,14 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^20.1.6",
-    "igniteui-angular-charts": "^19.0.1",
-    "igniteui-angular-core": "^19.0.1",
-    "igniteui-angular-extras": "^20.0.0",
-    "igniteui-angular-i18n": "^20.1.6",
+    "igniteui-angular": "^20.1.10",
+    "igniteui-angular-charts": "^20.1.0",
+    "igniteui-angular-core": "^20.1.0",
+    "igniteui-angular-extras": "^20.0.2",
+    "igniteui-angular-i18n": "^20.1.4",
     "igniteui-dockmanager": "^1.17.0",
-    "igniteui-live-editing": "^3.1.1",
+    "igniteui-grid-lite": "^0.0.1",
+    "igniteui-live-editing": "^3.2.0",
     "igniteui-webcomponents": "^6.2.0",
     "minireset.css": "0.0.6",
     "postcss": "^8.5.5",
diff --git a/projects/app-lob/src/app/app.routes.server.ts b/projects/app-lob/src/app/app.routes.server.ts
index 0c54bd67c9..65ab8a3247 100644
--- a/projects/app-lob/src/app/app.routes.server.ts
+++ b/projects/app-lob/src/app/app.routes.server.ts
@@ -1,28 +1,28 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
-    {
-        path: 'grid/grid',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'treegrid-finjs',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'samples/treegrid-finjs',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'grid-finjs-dock-manager/**',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'samples/grid-finjs-dock-manager/**',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
+//    {
+//        path: 'grid/grid',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'treegrid-finjs',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'samples/treegrid-finjs',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'grid-finjs-dock-manager/**',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'samples/grid-finjs-dock-manager/**',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
     {
         path: '**',
-        renderMode: RenderMode.Prerender
+        renderMode: RenderMode.Client // SSR disabled for all routes
     }
 ];
diff --git a/projects/app-lob/src/app/app.routes.ts b/projects/app-lob/src/app/app.routes.ts
index 2562d66bfa..592250f6ea 100644
--- a/projects/app-lob/src/app/app.routes.ts
+++ b/projects/app-lob/src/app/app.routes.ts
@@ -45,6 +45,11 @@ export const SamplesRoutes: Routes = [
         loadChildren: () => import('./grid-dynamic-chart-data/grid-dynamic-chart-data.routes')
         .then(m => m.GridDynamicChartRoutes),
         path: 'grid-dynamic-chart-data'
+    },
+    {
+        data: ['PivotGridsModule'],
+        loadChildren: () => import('./pivot-grid/pivot-grids.routes').then(m => m.PivotGridsRoutes),
+        path: 'pivot-grid'
     }
 ];
 
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
index e2b9e26abd..689c101204 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
@@ -1,7 +1,4 @@
 
-<app-page-header title="Data Analysis Grid">
-    Excel like data analysis showcase application with Ignite UI Angular components and extras
-</app-page-header>
 <div class="grid-chart-contextmenu-wrapper">
     <igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' [data]="data">
         <igx-column field="id" [hidden]="true"></igx-column>
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts
index 36392c552e..e3a58d98a3 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts
@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras';
+import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE } from 'igniteui-angular-extras';
 
 import { FinancialData } from '../data/financialData';
 import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular';
@@ -10,7 +10,7 @@ import { DecimalPipe, CurrencyPipe } from '@angular/common';
     selector: 'app-grid-dynamic-chart-data',
     templateUrl: './grid-dynamic-chart-data.component.html',
     styleUrls: ['./grid-dynamic-chart-data.component.scss'],
-    imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
+    imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
 })
 export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {
 
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
index 7bcaa33c2b..17c88a1cf1 100644
--- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
+++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
@@ -74,13 +74,15 @@
         </div>
       </ng-template>
     </igx-column>
-    <igx-column [field]="'Chart'" [width]="'60px'" [hidden]="false" [filterable]="false">
-      <ng-template igxCell let-cell="cell" class="center-text">
-        <button class="button-icon" igxIconButton="flat" tabindex="-1">
-          <igx-icon family="material" (click)="chartColumnAction(cell)">insert_chart_outlined</igx-icon>
-        </button>
-      </ng-template>
-    </igx-column>
+    @if (allowChart) {
+      <igx-column [field]="'Chart'" [width]="'60px'" [filterable]="false">
+        <ng-template igxCell let-cell="cell" class="center-text">
+          <button class="button-icon" igxIconButton="flat" tabindex="-1">
+            <igx-icon family="material" (click)="chartColumnAction(cell)">insert_chart_outlined</igx-icon>
+          </button>
+        </ng-template>
+      </igx-column>
+    }
 
     <igx-column [field]="'change'" [width]="'120px'" dataType="number" [headerClasses]="'headerAlignSyle'"
       [sortable]="true" [cellClasses]="trendsChange" >
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts
index 1dc58f623a..a0b2341874 100644
--- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts
+++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts
@@ -1,23 +1,23 @@
 /* eslint-disable max-len */
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
 import { CellType, DefaultSortingStrategy, GridSelectionMode, IGridKeydownEventArgs, IgxGridComponent, IgxOverlayOutletDirective, IRowSelectionEventArgs, OverlaySettings, SortingDirection, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective } from 'igniteui-angular';
 import { BehaviorSubject } from 'rxjs';
 import { Contract, REGIONS, Stock } from '../data/financialData';
-import { SignalRService } from '../services/signal-r.service';
-import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
+import { SignalRService } from '../services/signal-r.service';
+import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
 import { FormsModule } from '@angular/forms';
 
-@Component({
-    selector: 'app-finjs-grid',
-    templateUrl: './grid-finjs.component.html',
-    styleUrls: ['./grid-finjs.component.scss'],
-    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
+@Component({
+    selector: 'app-finjs-grid',
+    templateUrl: './grid-finjs.component.html',
+    styleUrls: ['./grid-finjs.component.scss'],
+    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
 })
-export class GridFinJSComponent implements OnInit {
-    private el = inject(ElementRef);
-    private document = inject<Document>(DOCUMENT);
-    dataService = inject(SignalRService);
+export class GridFinJSComponent implements OnInit {
+    private el = inject(ElementRef);
+    private document = inject<Document>(DOCUMENT);
+    dataService = inject(SignalRService);
 
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
     @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet: IgxOverlayOutletDirective;
@@ -25,6 +25,8 @@ export class GridFinJSComponent implements OnInit {
     @Output() public keyDown = new EventEmitter();
     @Output() public chartColumnKeyDown = new EventEmitter<Stock>();
 
+    @Input() public allowChart = false;
+
     public contracts = Contract;
     public regions = REGIONS;
     public selectionMode: GridSelectionMode = 'multiple';
diff --git a/projects/app-lob/src/app/grid-finjs/main.component.html b/projects/app-lob/src/app/grid-finjs/main.component.html
index eb2f501684..e1306dd015 100644
--- a/projects/app-lob/src/app/grid-finjs/main.component.html
+++ b/projects/app-lob/src/app/grid-finjs/main.component.html
@@ -6,6 +6,7 @@
         (playAction)="onPlayAction($event)">
     </app-finjs-controllers>
     <app-finjs-grid #finGrid
+        [allowChart]="true"
         (selectedDataChanged)="setChartData($event)"
         (keyDown)="dialog.open()"
         (chartColumnKeyDown)="openSingleRowChart($event)">
diff --git a/projects/app-lob/src/app/grid-finjs/main.component.ts b/projects/app-lob/src/app/grid-finjs/main.component.ts
index 81c8fbd224..a8130ee115 100644
--- a/projects/app-lob/src/app/grid-finjs/main.component.ts
+++ b/projects/app-lob/src/app/grid-finjs/main.component.ts
@@ -1,16 +1,15 @@
 import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
 import { IgxDialogComponent, IgxOverlayOutletDirective, OverlaySettings, IgxDialogTitleDirective, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective } from 'igniteui-angular';
-import { IgxCategoryChartComponent, IgxCategoryChartCoreModule } from 'igniteui-angular-charts';
+import { IgxCategoryChartComponent, IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { Stock } from '../data/financialData';
 import { ControllerComponent } from './controllers.component';
 import { GridFinJSComponent } from './grid-finjs.component';
 
-@Component({
-    selector: 'app-finjs-main',
-    styleUrls: ['./main.component.scss'],
-    templateUrl: './main.component.html',
-    imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartCoreModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
+@Component({
+    selector: 'app-finjs-main',
+    styleUrls: ['./main.component.scss'],
+    templateUrl: './main.component.html',
+    imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
 })
 export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
     @ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
@@ -99,7 +98,7 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
     public setChartData(args: Stock[]): void {
         this.chartData = [];
         args.forEach(rowKey => {
-            const row: Stock = this.finGrid.grid.getRowByKey(rowKey).data;
+            const row: Stock = this.finGrid.grid.getRowByKey(rowKey.id).data;
             this.chartData.push(row);
             this.chart.notifyInsertItem(this.chartData, this.chartData.length - 1, row);
         });
diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts
index a3caf58201..6fadf6ef8f 100644
--- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts
+++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Component, ViewChild } from '@angular/core';
 import { IgxColumnComponent, IgxGridComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective } from 'igniteui-angular';
-import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartCoreModule } from 'igniteui-angular-charts';
+import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { employeesData } from '../../data/employeesData';
 import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive';
 
@@ -9,7 +9,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/dir
     selector: 'app-grid-master-detail',
     styleUrls: ['./grid-master-detail.component.scss'],
     templateUrl: 'grid-master-detail.component.html',
-    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartCoreModule]
+    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule]
 })
 
 export class GridMasterDetailSampleComponent {
diff --git a/projects/app-lob/src/app/index/index.component.ts b/projects/app-lob/src/app/index/index.component.ts
index 6e5b01e95a..bb56290608 100644
--- a/projects/app-lob/src/app/index/index.component.ts
+++ b/projects/app-lob/src/app/index/index.component.ts
@@ -2,7 +2,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, DOCUMEN
 import { NavigationStart, Route, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { IgxNavigationDrawerComponent, IgxLayoutDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconButtonDirective, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective, IgxFlexDirective, IgxNavbarComponent } from 'igniteui-angular';
 import { filter } from 'rxjs/operators';
-import { pivotGridsRoutesData } from '../../../../../src/app/pivot-grid/pivot-grid-routes-data';
+import { pivotGridsRoutesData } from '../pivot-grid/pivot-grid-routes-data';
 import { gridDynamicChartRoutesData } from '../grid-dynamic-chart-data/grid-dynamic-chart-data-routes-data';
 import { finJsDockManagerGridRoutes } from '../grid-finjs-dock-manager/grid-finjs-dock-manager-routes-data';
 import { gridfinjsRoutesData} from '../grid-finjs/grid-finjs-routes-data';
diff --git a/projects/app-lob/src/app/pivot-grid/pivot-grid-routes-data.ts b/projects/app-lob/src/app/pivot-grid/pivot-grid-routes-data.ts
new file mode 100644
index 0000000000..299f6ad504
--- /dev/null
+++ b/projects/app-lob/src/app/pivot-grid/pivot-grid-routes-data.ts
@@ -0,0 +1,12 @@
+// tslint:disable:object-literal-sort-keys
+export const pivotGridsRoutesData = {
+    'pivot-grid-basic': { displayName: 'Basic Pivot Grid', parentName: 'Pivot Grid' },
+    'pivot-grid-datasource': { displayName: 'Pivot Grid With Datasource Component', parentName: 'Pivot Grid' },
+    'pivot-grid-noop': { displayName: 'Noop Pivot Grid', parentName: 'Pivot Grid' },
+    'pivot-grid-export': { displayName: 'Pivot Grid Export', parentName: 'Pivot Grid' },
+    'pivot-grid-features': { displayName: 'Pivot Grid With Features', parentName: 'Pivot Grid' },
+    'pivot-grid-state-persistence': { displayName: 'Pivot Grid With State Persistence', parentName: 'Pivot Grid' },
+    'pivot-grid-noop-persistence': { displayName: 'Pivot Noop Grid with State Persistence', parentName: 'Pivot Grid' },
+    'pivot-grid-about': { displayName: 'Pivot Grid About', parentName: 'Pivot Grid' },
+    'pivot-grid-layout': { displayName: 'Pivot Grid Layout', parentName: 'Pivot Grid' }
+};
\ No newline at end of file
diff --git a/projects/app-lob/src/app/pivot-grid/pivot-grids.routes.ts b/projects/app-lob/src/app/pivot-grid/pivot-grids.routes.ts
new file mode 100644
index 0000000000..394c0616d7
--- /dev/null
+++ b/projects/app-lob/src/app/pivot-grid/pivot-grids.routes.ts
@@ -0,0 +1,62 @@
+/* eslint-disable max-len */
+import { Routes } from '@angular/router';
+// Import components from the main project
+import { PivotGridBasicSampleComponent } from '../../../../../src/app/pivot-grid/pivot-basic-sample/pivot-grid-basic-sample.component';
+import { PivotDataSelectorSampleComponent } from '../../../../../src/app/pivot-grid/pivot-datasource/pivot-data-selector-sample.component';
+import { PivotFeaturesComponent } from '../../../../../src/app/pivot-grid/pivot-features/pivot-features.component';
+import { PivotExportComponent } from '../../../../../src/app/pivot-grid/pivot-export/pivot-export.component';
+import { PivotGridNoopPersistenceSampleComponent } from '../../../../../src/app/pivot-grid/pivot-grid-noop-persistence/pivot-grid-noop-persistence-sample.component';
+import { PivotGridNoopSampleComponent } from '../../../../../src/app/pivot-grid/pivot-grid-noop/pivot-grid-noop-sample.component';
+import { pivotGridsRoutesData } from './pivot-grid-routes-data';
+import { PivotGridAboutComponent } from '../../../../../src/app/pivot-grid/pivot-state-persistence/about.component';
+import { PivotGridStatePersistenceSampleComponent } from '../../../../../src/app/pivot-grid/pivot-state-persistence/pivot-grid-state-persistence-sample.component';
+import { PivotGridLayoutComponent } from '../../../../../src/app/pivot-grid/pivot-layout/pivot-layout.component'
+// tslint:enable:max-line-length
+
+export const PivotGridsRoutes: Routes = [
+    {
+        component: PivotGridBasicSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-basic'],
+        path: 'pivot-grid-basic'
+    },
+    {
+        component: PivotExportComponent,
+        data: pivotGridsRoutesData['pivot-grid-export'],
+        path: 'pivot-grid-export'
+    },
+    {
+        component: PivotFeaturesComponent,
+        data: pivotGridsRoutesData['pivot-grid-features'],
+        path: 'pivot-grid-features'
+    },
+    {
+        component: PivotDataSelectorSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-datasource'],
+        path: 'pivot-grid-datasource'
+    },
+    {
+        component: PivotGridNoopSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-noop'],
+        path: 'pivot-grid-noop'
+    },
+    {
+        component: PivotGridStatePersistenceSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-state-persistence'],
+        path: 'pivot-grid-state-persistence'
+    },
+    {
+        component: PivotGridNoopPersistenceSampleComponent,
+        data: pivotGridsRoutesData['pivot-grid-noop-persistence'],
+        path: 'pivot-grid-noop-persistence'
+    },
+    {
+        component: PivotGridAboutComponent,
+        data: pivotGridsRoutesData['pivot-grid-about'],
+        path: 'pivot-grid-about'
+    },
+    {
+        component: PivotGridLayoutComponent,
+        data: pivotGridsRoutesData['pivot-grid-layout'],
+        path: 'pivot-grid-layout'
+    }
+];
\ No newline at end of file
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index d83b139643..e89bdcf71d 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -57,6 +57,10 @@ export const SamplesRoutes: Routes = [
         loadChildren: () => import('./grid/grids.routes').then(m => m.GridsRoutes),
         path: 'grid'
     },
+    {
+        loadChildren: () => import('./grid-lite/grid-lite.routes').then(m => m.GridLiteRoutes),
+        path: 'grid-lite'
+    },
     {
         loadChildren: () => import('./pivot-grid/pivot-grids.routes').then(m => m.PivotGridsRoutes),
         path: 'pivot-grid'
diff --git a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html
new file mode 100644
index 0000000000..43bfef6008
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html
@@ -0,0 +1,17 @@
+<div class="grid-lite-wrapper">
+  <section class="panel">
+    <igc-button variant="outlined">Column properties</igc-button>
+    <igc-switch 
+      label-position="before"
+      [checked]="hasFormatters"
+      (igcChange)="toggleFormatters($event.detail.checked)">
+      Value formatters:
+    </igc-switch>
+  </section>
+  
+  <igc-grid-lite 
+    #gridLite
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss
new file mode 100644
index 0000000000..e5cc3df9ac
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss
@@ -0,0 +1,21 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: calc(100% - 50px);
+}
+
+.panel {
+  margin: 1rem 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
diff --git a/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts
new file mode 100644
index 0000000000..fe2717ecac
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts
@@ -0,0 +1,111 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcButtonComponent, IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent, IgcButtonComponent);
+
+@Component({
+  selector: 'app-grid-lite-column-config-dynamic',
+  templateUrl: './grid-lite-column-config-dynamic.component.html',
+  styleUrls: ['./grid-lite-column-config-dynamic.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteColumnConfigDynamicComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  @ViewChild('gridLite', { static: false }) gridLite!: ElementRef;
+  
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+  public hasFormatters = true;
+
+  private formatter = new Intl.NumberFormat('en-EN', {
+    style: 'currency',
+    currency: 'EUR'
+  });
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(50);
+    
+    this.columns = [
+      { 
+        key: 'id', 
+        hidden: true, 
+        headerText: 'ID',
+        width: '15rem'
+      },
+      { 
+        key: 'name', 
+        headerText: 'Product Name',
+        width: '15rem'
+      },
+      {
+        key: 'price',
+        headerText: 'Price',
+        type: 'number',
+        width: '15rem',
+        cellTemplate: (params: any) => {
+          const span = document.createElement('span');
+          span.textContent = this.formatter.format(params.value);
+          return span;
+        }
+      },
+      { 
+        key: 'sold', 
+        type: 'number', 
+        headerText: 'Units sold',
+        width: '15rem'
+      },
+      { 
+        key: 'total', 
+        headerText: 'Total sold',
+        width: '15rem',
+        cellTemplate: (params: any) => {
+          const span = document.createElement('span');
+          span.textContent = this.formatter.format(params.value);
+          return span;
+        }
+      },
+      {
+        key: 'rating',
+        type: 'number',
+        headerText: 'Customer rating',
+        width: '15rem',
+        cellTemplate: (params: any) => {
+          const rating = document.createElement('igc-rating');
+          rating.setAttribute('readonly', '');
+          rating.setAttribute('step', '0.01');
+          rating.setAttribute('value', params.value.toString());
+          return rating;
+        }
+      }
+    ];
+  }
+
+  updateColumnProperty(key: string, prop: string, value: any) {
+    const grid = this.gridLite?.nativeElement as any;
+    if (grid && grid.updateColumns) {
+      grid.updateColumns({ key, [prop]: value });
+    }
+  }
+
+  toggleFormatters(enabled: boolean) {
+    this.hasFormatters = enabled;
+    const grid = this.gridLite?.nativeElement as any;
+    if (grid && grid.updateColumns) {
+      const updates = ['price', 'total'].map(key => ({
+        key,
+        cellTemplate: enabled ? (params: any) => {
+          const span = document.createElement('span');
+          span.textContent = this.formatter.format(params.value);
+          return span;
+        } : undefined
+      }));
+      grid.updateColumns(updates);
+    }
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html
new file mode 100644
index 0000000000..9b6326efb4
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html
@@ -0,0 +1,6 @@
+<div class="grid-lite-wrapper">
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.scss b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.scss
new file mode 100644
index 0000000000..0c5a800394
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.scss
@@ -0,0 +1,13 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
diff --git a/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts
new file mode 100644
index 0000000000..cefaadf5ef
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts
@@ -0,0 +1,60 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcRatingComponent);
+
+@Component({
+  selector: 'app-grid-lite-column-config-headers',
+  templateUrl: './grid-lite-column-config-headers.component.html',
+  styleUrls: ['./grid-lite-column-config-headers.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteColumnConfigHeadersComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(50);
+    
+    this.columns = [
+      { 
+        key: 'name', 
+        headerText: 'Product Name' 
+      },
+      {
+        key: 'price',
+        headerText: 'Price (€)',
+        type: 'number'
+      },
+      { 
+        key: 'sold', 
+        type: 'number', 
+        headerText: 'Units Sold' 
+      },
+      { 
+        key: 'total', 
+        headerText: 'Total Revenue',
+        type: 'number'
+      },
+      {
+        key: 'rating',
+        type: 'number',
+        headerText: 'Customer Rating ⭐',
+        cellTemplate: (params: any) => {
+          const rating = document.createElement('igc-rating');
+          rating.setAttribute('readonly', '');
+          rating.setAttribute('step', '0.01');
+          rating.setAttribute('value', params.value.toString());
+          return rating;
+        }
+      }
+    ];
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html
new file mode 100644
index 0000000000..9b6326efb4
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html
@@ -0,0 +1,6 @@
+<div class="grid-lite-wrapper">
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.scss b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.scss
new file mode 100644
index 0000000000..0c5a800394
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.scss
@@ -0,0 +1,13 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
diff --git a/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts
new file mode 100644
index 0000000000..86cc1c7ad7
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts
@@ -0,0 +1,74 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcRatingComponent);
+
+@Component({
+  selector: 'app-grid-lite-column-config-simple',
+  templateUrl: './grid-lite-column-config-simple.component.html',
+  styleUrls: ['./grid-lite-column-config-simple.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteColumnConfigSimpleComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+
+  private formatter = new Intl.NumberFormat('en-EN', {
+    style: 'currency',
+    currency: 'EUR'
+  });
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(50);
+    
+    this.columns = [
+      { 
+        key: 'name', 
+        headerText: 'Product Name' 
+      },
+      {
+        key: 'price',
+        headerText: 'Price',
+        type: 'number',
+        cellTemplate: (params: any) => {
+          const span = document.createElement('span');
+          span.textContent = this.formatter.format(params.value);
+          return span;
+        }
+      },
+      { 
+        key: 'sold', 
+        type: 'number', 
+        headerText: 'Units sold' 
+      },
+      { 
+        key: 'total', 
+        headerText: 'Total sold',
+        cellTemplate: (params: any) => {
+          const span = document.createElement('span');
+          span.textContent = this.formatter.format(params.value);
+          return span;
+        }
+      },
+      {
+        key: 'rating',
+        type: 'number',
+        headerText: 'Customer rating',
+        cellTemplate: (params: any) => {
+          const rating = document.createElement('igc-rating');
+          rating.setAttribute('readonly', '');
+          rating.setAttribute('step', '0.01');
+          rating.setAttribute('value', params.value.toString());
+          return rating;
+        }
+      }
+    ];
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html
new file mode 100644
index 0000000000..52f0b2fd65
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html
@@ -0,0 +1,8 @@
+<div class="grid-lite-wrapper">
+    <igc-button (click)="switchData()">Switch data</igc-button>
+    <igc-grid-lite 
+      #gridLite
+      auto-generate
+      [data]="data">
+    </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.scss b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.scss
new file mode 100644
index 0000000000..7eb01b5bc7
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.scss
@@ -0,0 +1,14 @@
+:host {
+  contain: content;
+  --ig-size: 1;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: calc(100% - 50px);
+}
+
+igc-grid-lite {
+  margin-top: 1rem;
+  min-height: 65vh;
+}
diff --git a/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.ts b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.ts
new file mode 100644
index 0000000000..5f2c4d1ce5
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.ts
@@ -0,0 +1,44 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo, UserSimple } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcButtonComponent);
+
+@Component({
+  selector: 'app-grid-lite-data-binding-dynamic',
+  templateUrl: './grid-lite-data-binding-dynamic.component.html',
+  styleUrls: ['./grid-lite-data-binding-dynamic.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteDataBindingDynamicComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  @ViewChild('gridLite', { static: false }) gridLite!: ElementRef;
+  
+  public data: (ProductInfo | UserSimple)[] = [];
+  public dataType: 'products' | 'users' = 'products';
+  public autoGenerate = true;
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(50);
+  }
+
+  switchData() {
+    this.dataType = this.dataType === 'products' ? 'users' : 'products';
+    const grid = this.gridLite?.nativeElement as any;
+    
+    if (grid) {
+      grid.columns = [];
+      if (this.dataType === 'products') {
+        this.data = this.dataService.generateProducts(50);
+      } else {
+        this.data = this.dataService.generateSimpleUsers(50);
+      }
+      grid.data = this.data;
+    }
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-data.service.ts b/src/app/grid-lite/grid-lite-data.service.ts
new file mode 100644
index 0000000000..7a75559fdc
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-data.service.ts
@@ -0,0 +1,129 @@
+import { Injectable } from '@angular/core';
+
+export type UserSimple = {
+  id: string;
+  username: string;
+  email: string;
+  subscribed: boolean;
+};
+
+export type ProductInfo = {
+  id: string;
+  name: string;
+  price: number;
+  sold: number;
+  rating: number;
+  total: number;
+};
+
+export type User = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+  avatar: string;
+  active: boolean;
+  priority: 'Low' | 'Standard' | 'High';
+  satisfaction: number;
+  registeredAt: Date;
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GridLiteDataService {
+  private counter = 0;
+
+  private firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry', 
+    'Ivy', 'Jack', 'Kate', 'Liam', 'Mia', 'Noah', 'Olivia', 'Peter', 'Quinn', 'Rachel'];
+  private lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 
+    'Rodriguez', 'Martinez', 'Wilson', 'Anderson', 'Taylor', 'Thomas', 'Moore', 'Jackson', 'White', 'Harris'];
+  private productNames = ['Widget', 'Gadget', 'Doohickey', 'Thingamajig', 'Gizmo', 'Contraption', 
+    'Device', 'Tool', 'Apparatus', 'Instrument', 'Machine', 'Equipment'];
+  private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
+
+  private randomInt(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  private randomFloat(min: number, max: number, precision = 2): number {
+    // Get a random float in [0,1) using crypto.getRandomValues
+    const array = new Uint32Array(1);
+    window.crypto.getRandomValues(array);
+    // Divide by 2^32 to get a float in [0,1)
+    const random01 = array[0] / 2 ** 32;
+    return parseFloat((random01 * (max - min) + min).toFixed(precision));
+  }
+
+  private randomElement<T>(array: T[]): T {
+    return array[this.randomInt(0, array.length - 1)];
+  }
+
+  private randomBoolean(): boolean {
+    const array = new Uint8Array(1);
+    window.crypto.getRandomValues(array);
+    return (array[0] & 1) === 0;
+  }
+
+  private generateId(): string {
+    return `${Date.now()}-${this.counter++}-${this.randomInt(1000, 9999)}`;
+  }
+
+  createProductInfo(): ProductInfo {
+    const price = this.randomFloat(50, 500, 2);
+    const sold = this.randomInt(10, 100);
+    const total = parseFloat((price * sold).toFixed(2));
+
+    return {
+      price,
+      sold,
+      total,
+      id: this.generateId(),
+      name: `${this.randomElement(this.productNames)} ${this.randomElement(['Pro', 'Plus', 'Max', 'Ultra', 'Mini', 'Lite'])}`,
+      rating: this.randomFloat(0, 5, 1)
+    };
+  }
+
+  createUserSimple(): UserSimple {
+    const firstName = this.randomElement(this.firstNames);
+    const lastName = this.randomElement(this.lastNames);
+    return {
+      id: this.generateId(),
+      username: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${this.randomInt(1, 99)}`,
+      email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
+      subscribed: this.randomBoolean()
+    };
+  }
+
+  createUser(): User {
+    const firstName = this.randomElement(this.firstNames);
+    const lastName = this.randomElement(this.lastNames);
+    const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`;
+
+    return {
+      id: this.generateId(),
+      firstName,
+      lastName,
+      age: this.randomInt(18, 90),
+      email,
+      avatar: `https://i.pravatar.cc/150?img=${this.randomInt(1, 70)}`,
+      active: this.randomBoolean(),
+      priority: this.randomElement(this.priorities),
+      satisfaction: this.randomInt(0, 5),
+      registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000))
+    };
+  }
+
+  generateUsers(count: number): User[] {
+    return Array.from({ length: count }, () => this.createUser());
+  }
+
+  generateProducts(count: number): ProductInfo[] {
+    return Array.from({ length: count }, () => this.createProductInfo());
+  }
+
+  generateSimpleUsers(count: number): UserSimple[] {
+    return Array.from({ length: count }, () => this.createUserSimple());
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.html b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.html
new file mode 100644
index 0000000000..e6cdea1be9
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.html
@@ -0,0 +1,13 @@
+<div class="grid-lite-wrapper">
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data"
+    (filtering)="handleFiltering($event)"
+    (filtered)="handleFiltered($event)">
+  </igc-grid-lite>
+  <div class="log">
+    @for (entry of log; track entry) {
+      <p><code>{{ entry }}</code></p>
+    }
+  </div>
+</div>
diff --git a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.scss b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.scss
new file mode 100644
index 0000000000..5855b949cb
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.scss
@@ -0,0 +1,23 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
+
+.log {
+  margin-top: 0.5rem;
+  border: 1px solid #ccc;
+  padding: 1rem;
+  min-height: 1rem;
+  font-size: 0.75rem;
+  max-height: 5rem;
+  overflow-y: auto;
+}
diff --git a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts
new file mode 100644
index 0000000000..811ab58186
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts
@@ -0,0 +1,83 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, User } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcCheckboxComponent);
+
+@Component({
+  selector: 'app-grid-lite-filtering-events',
+  templateUrl: './grid-lite-filtering-events.component.html',
+  styleUrls: ['./grid-lite-filtering-events.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteFilteringEventsComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: User[] = [];
+  public columns: any[] = [];
+  public log: string[] = [];
+
+  ngOnInit() {
+    this.data = this.dataService.generateUsers(50);
+    
+    this.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;
+        }
+      }
+    ];
+  }
+
+  private get timeStamp(): string {
+    return `[${new Date().toLocaleTimeString()}]`;
+  }
+
+  private updateLog(message: string) {
+    if (this.log.length > 10) {
+      this.log.shift();
+    }
+    this.log = [...this.log, message];
+  }
+
+  handleFiltering(event: any) {
+    const { expressions, type } = event.detail;
+    this.updateLog(
+      `${this.timeStamp} :: Event 'filtering' :: Filter operation of type '${type}' for column '${expressions[0].key}'`
+    );
+  }
+
+  handleFiltered(event: any) {
+    this.updateLog(
+      `${this.timeStamp} :: Event 'filtered' for column '${event.detail.key}'`
+    );
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html
new file mode 100644
index 0000000000..650a29cac9
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html
@@ -0,0 +1,17 @@
+<div class="grid-lite-wrapper">
+  <div>
+    <h5>Generated request</h5>
+    <p><code>{{ queryString }}</code></p>
+  </div>
+  <section class="grid-section">
+    <igc-circular-progress
+      [class.in-operation]="inOperation"
+      indeterminate>
+    </igc-circular-progress>
+    <igc-grid-lite 
+      [columns]="columns" 
+      [data]="data"
+      [dataPipelineConfiguration]="dataPipelineConfiguration">
+    </igc-grid-lite>
+  </section>
+</div>
diff --git a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.scss b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.scss
new file mode 100644
index 0000000000..fa74b8eebe
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.scss
@@ -0,0 +1,42 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-section {
+  position: relative;
+}
+
+igc-circular-progress {
+  visibility: hidden;
+  --diameter: 4rem;
+  background-color: rgba(255, 255, 255, 0.5);
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.in-operation {
+  visibility: visible;
+  pointer-events: all;
+  user-select: contain;
+}
+
+p {
+  border: 1px solid #ccc;
+  padding: 1rem;
+  min-height: 1rem;
+  font-size: 0.75rem;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
diff --git a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts
new file mode 100644
index 0000000000..16dc1ebdc5
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts
@@ -0,0 +1,103 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcCheckboxComponent, IgcCircularProgressComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, User } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcCheckboxComponent, IgcCircularProgressComponent);
+
+@Component({
+  selector: 'app-grid-lite-filtering-pipeline',
+  templateUrl: './grid-lite-filtering-pipeline.component.html',
+  styleUrls: ['./grid-lite-filtering-pipeline.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteFilteringPipelineComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: User[] = [];
+  public columns: any[] = [];
+  public dataPipelineConfiguration: any;
+  public inOperation = false;
+  public queryString = '';
+
+  ngOnInit() {
+    this.data = this.dataService.generateUsers(50);
+    
+    this.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;
+        }
+      }
+    ];
+
+    this.dataPipelineConfiguration = {
+      filter: async ({ data, grid }: any) => {
+        this.inOperation = true;
+        this.buildUri(grid.filterExpressions);
+        await new Promise(resolve => setTimeout(resolve, 250));
+        this.inOperation = false;
+        return data;
+      }
+    };
+  }
+
+  private buildUri(state: any[]) {
+    const grouped = this.groupBy(state, 'key');
+    const out: string[] = [];
+    
+    for (const [key, exprs] of Object.entries(grouped)) {
+      out.push(`${key}(${this.mapExpressions(exprs as any[])})`);
+    }
+    
+    this.queryString = `GET: /data?filter=${out.join('&')}`;
+  }
+
+  private groupBy<T extends object>(arr: T[], key: keyof T): Record<string, T[]> {
+    const out: Record<string, T[]> = {};
+    for (const each of arr) {
+      const slot = each[key] as string;
+      if (!out[slot]) {
+        out[slot] = [];
+      }
+      out[slot].push(each);
+    }
+    return out;
+  }
+
+  private mapExpressions(arr: any[]): string {
+    return arr.map(({ searchTerm, criteria, condition }, idx) => {
+      const c = condition;
+      return idx < 1
+        ? `${c.name}("${searchTerm}")`
+        : `${criteria?.toUpperCase()} ${c.name}("${searchTerm}")`;
+    }).join(' ');
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html
new file mode 100644
index 0000000000..9b6326efb4
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html
@@ -0,0 +1,6 @@
+<div class="grid-lite-wrapper">
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.scss b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.scss
new file mode 100644
index 0000000000..0c5a800394
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.scss
@@ -0,0 +1,13 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
diff --git a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts
new file mode 100644
index 0000000000..8c6e2360ed
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts
@@ -0,0 +1,58 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, User } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcCheckboxComponent);
+
+@Component({
+  selector: 'app-grid-lite-filtering-simple',
+  templateUrl: './grid-lite-filtering-simple.component.html',
+  styleUrls: ['./grid-lite-filtering-simple.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteFilteringSimpleComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: User[] = [];
+  public columns: any[] = [];
+
+  ngOnInit() {
+    this.data = this.dataService.generateUsers(50);
+    
+    this.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;
+        }
+      }
+    ];
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html
new file mode 100644
index 0000000000..9b6326efb4
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html
@@ -0,0 +1,6 @@
+<div class="grid-lite-wrapper">
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.scss b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.scss
new file mode 100644
index 0000000000..89bcc80892
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.scss
@@ -0,0 +1,14 @@
+:host {
+  contain: strict;
+  min-height: 400px;
+  --ig-size: 1;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-grid-lite {
+  min-height: 75vh;
+}
diff --git a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts
new file mode 100644
index 0000000000..feb1899068
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts
@@ -0,0 +1,130 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { 
+  defineComponents,
+  IgcRatingComponent,
+  IgcCheckboxComponent,
+  IgcSelectComponent,
+  IgcAvatarComponent
+} from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, User } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+
+defineComponents(
+  IgcAvatarComponent,
+  IgcRatingComponent,
+  IgcCheckboxComponent,
+  IgcSelectComponent
+);
+
+@Component({
+  selector: 'app-grid-lite-overview',
+  templateUrl: './grid-lite-overview.component.html',
+  styleUrls: ['./grid-lite-overview.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteOverviewComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: User[] = [];
+  public columns: any[] = [];
+  private choices = ['Low', 'Standard', 'High'];
+
+  ngOnInit() {
+    this.data = this.dataService.generateUsers(1000);
+    
+    this.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;
+        }
+      }
+    ];
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-routes-data.ts b/src/app/grid-lite/grid-lite-routes-data.ts
new file mode 100644
index 0000000000..b354dd66ba
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-routes-data.ts
@@ -0,0 +1,18 @@
+// tslint:disable:object-literal-sort-keys
+
+export const gridLiteRoutesData = {
+    'overview': { displayName: 'Grid Lite Overview', parentName: 'Grid Lite' },
+    'column-config-simple': { displayName: 'Column Configuration - Simple', parentName: 'Grid Lite' },
+    'column-config-dynamic': { displayName: 'Column Configuration - Dynamic', parentName: 'Grid Lite' },
+    'column-config-headers': { displayName: 'Column Configuration - Headers', parentName: 'Grid Lite' },
+    'data-binding-dynamic': { displayName: 'Data Binding - Dynamic', parentName: 'Grid Lite' },
+    'filtering-simple': { displayName: 'Filtering - Simple', parentName: 'Grid Lite' },
+    'filtering-events': { displayName: 'Filtering - Events', parentName: 'Grid Lite' },
+    'filtering-pipeline': { displayName: 'Filtering - Pipeline', parentName: 'Grid Lite' },
+    'sorting-simple': { displayName: 'Sorting - Simple', parentName: 'Grid Lite' },
+    'sorting-events': { displayName: 'Sorting - Events', parentName: 'Grid Lite' },
+    'sorting-grid-config': { displayName: 'Sorting - Grid Configuration', parentName: 'Grid Lite' },
+    'sorting-pipeline': { displayName: 'Sorting - Pipeline', parentName: 'Grid Lite' },
+    'styling-custom': { displayName: 'Styling - Custom', parentName: 'Grid Lite' },
+    'styling-themes': { displayName: 'Styling - Themes', parentName: 'Grid Lite' }
+};
diff --git a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html
new file mode 100644
index 0000000000..5370c694cb
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html
@@ -0,0 +1,13 @@
+<div class="grid-lite-wrapper">
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data"
+    (sorting)="handleSorting($event)"
+    (sorted)="handleSorted($event)">
+  </igc-grid-lite>
+  <div class="log">
+    @for (entry of log; track entry) {
+      <p><code>{{ entry }}</code></p>
+    }
+  </div>
+</div>
diff --git a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.scss b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.scss
new file mode 100644
index 0000000000..5855b949cb
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.scss
@@ -0,0 +1,23 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
+
+.log {
+  margin-top: 0.5rem;
+  border: 1px solid #ccc;
+  padding: 1rem;
+  min-height: 1rem;
+  font-size: 0.75rem;
+  max-height: 5rem;
+  overflow-y: auto;
+}
diff --git a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts
new file mode 100644
index 0000000000..a41750c929
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts
@@ -0,0 +1,100 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcRatingComponent);
+
+@Component({
+  selector: 'app-grid-lite-sorting-events',
+  templateUrl: './grid-lite-sorting-events.component.html',
+  styleUrls: ['./grid-lite-sorting-events.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteSortingEventsComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+  public log: string[] = [];
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(100);
+    
+    this.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 
+      }
+    ];
+  }
+
+  private get timeStamp(): string {
+    return `[${new Date().toLocaleTimeString()}]`;
+  }
+
+  private updateLog(message: string) {
+    if (this.log.length > 10) {
+      this.log.shift();
+    }
+    this.log = [...this.log, message];
+  }
+
+  handleSorting(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}'`
+      );
+    } else {
+      this.updateLog(
+        `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}`
+      );
+    }
+  }
+
+  handleSorted(event: any) {
+    const { detail, type } = event;
+    this.updateLog(
+      `${this.timeStamp} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}`
+    );
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html
new file mode 100644
index 0000000000..9b53145234
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html
@@ -0,0 +1,20 @@
+<div class="grid-lite-wrapper">
+  <section class="config-panel">
+    <igc-switch
+      [checked]="sortConfiguration.multiple"
+      (igcChange)="updateConfig('multiple', $event.detail.checked)">
+      Enable multi-sort
+    </igc-switch>
+    <igc-switch
+      [checked]="sortConfiguration.triState"
+      (igcChange)="updateConfig('triState', $event.detail.checked)">
+      Enable tri-state sorting
+    </igc-switch>
+  </section>
+  
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data"
+    [sortConfiguration]="sortConfiguration">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.scss b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.scss
new file mode 100644
index 0000000000..185062455d
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.scss
@@ -0,0 +1,17 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.config-panel {
+  margin: 1rem 0;
+}
+
+igc-grid-lite {
+  height: 510px;
+}
diff --git a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts
new file mode 100644
index 0000000000..eeeddaf909
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts
@@ -0,0 +1,73 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcRatingComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcRatingComponent, IgcSwitchComponent);
+
+@Component({
+  selector: 'app-grid-lite-sorting-grid-config',
+  templateUrl: './grid-lite-sorting-grid-config.component.html',
+  styleUrls: ['./grid-lite-sorting-grid-config.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteSortingGridConfigComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+  public sortConfiguration: any = {
+    multiple: true,
+    triState: true
+  };
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(100);
+    
+    this.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 
+      }
+    ];
+  }
+
+  updateConfig(prop: string, value: boolean) {
+    this.sortConfiguration = { ...this.sortConfiguration, [prop]: value };
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html
new file mode 100644
index 0000000000..650a29cac9
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html
@@ -0,0 +1,17 @@
+<div class="grid-lite-wrapper">
+  <div>
+    <h5>Generated request</h5>
+    <p><code>{{ queryString }}</code></p>
+  </div>
+  <section class="grid-section">
+    <igc-circular-progress
+      [class.in-operation]="inOperation"
+      indeterminate>
+    </igc-circular-progress>
+    <igc-grid-lite 
+      [columns]="columns" 
+      [data]="data"
+      [dataPipelineConfiguration]="dataPipelineConfiguration">
+    </igc-grid-lite>
+  </section>
+</div>
diff --git a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.scss b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.scss
new file mode 100644
index 0000000000..fa74b8eebe
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.scss
@@ -0,0 +1,42 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.grid-section {
+  position: relative;
+}
+
+igc-circular-progress {
+  visibility: hidden;
+  --diameter: 4rem;
+  background-color: rgba(255, 255, 255, 0.5);
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.in-operation {
+  visibility: visible;
+  pointer-events: all;
+  user-select: contain;
+}
+
+p {
+  border: 1px solid #ccc;
+  padding: 1rem;
+  min-height: 1rem;
+  font-size: 0.75rem;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
diff --git a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts
new file mode 100644
index 0000000000..abaeb8c570
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts
@@ -0,0 +1,95 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcRatingComponent, IgcCircularProgressComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcRatingComponent, IgcCircularProgressComponent);
+
+@Component({
+  selector: 'app-grid-lite-sorting-pipeline',
+  templateUrl: './grid-lite-sorting-pipeline.component.html',
+  styleUrls: ['./grid-lite-sorting-pipeline.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteSortingPipelineComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+  public dataPipelineConfiguration: any;
+  public inOperation = false;
+  public queryString = '';
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(100);
+    
+    this.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.dataPipelineConfiguration = {
+      sort: async ({ data, grid }: any) => {
+        this.inOperation = true;
+        this.queryString = grid.sortExpressions.length
+          ? this.buildUri(grid.sortExpressions)
+          : '';
+        await new Promise(resolve => setTimeout(resolve, 250));
+        this.inOperation = false;
+        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})`
+      );
+    }
+    return `GET: /data?sort_by=${uri.join(',')}`;
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html
new file mode 100644
index 0000000000..9b6326efb4
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html
@@ -0,0 +1,6 @@
+<div class="grid-lite-wrapper">
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.scss b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.scss
new file mode 100644
index 0000000000..0c5a800394
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.scss
@@ -0,0 +1,13 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-grid-lite {
+  min-height: 65vh;
+}
diff --git a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts
new file mode 100644
index 0000000000..d3256cb048
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts
@@ -0,0 +1,67 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcRatingComponent);
+
+@Component({
+  selector: 'app-grid-lite-sorting-simple',
+  templateUrl: './grid-lite-sorting-simple.component.html',
+  styleUrls: ['./grid-lite-sorting-simple.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteSortingSimpleComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(100);
+    
+    this.columns = [
+      { 
+        key: 'name', 
+        headerText: 'Name', 
+        sort: { 
+          comparer: (a: string, b: string) => a.length - b.length 
+        }
+      },
+      { 
+        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 
+      }
+    ];
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html
new file mode 100644
index 0000000000..f1befbff90
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html
@@ -0,0 +1,17 @@
+<div class="grid-lite-wrapper">
+  <section class="theme-switcher">
+    <igc-switch
+      [checked]="theme === 'light'"
+      (igcChange)="switchTheme()"
+      label-position="before">
+      Switch to {{ theme === 'dark' ? 'light' : 'dark' }} theme
+    </igc-switch>
+  </section>
+  
+  <igc-grid-lite 
+    [class.custom-light]="theme === 'light'"
+    [class.custom-dark]="theme === 'dark'"
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.scss b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.scss
new file mode 100644
index 0000000000..60fe9043c3
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.scss
@@ -0,0 +1,47 @@
+@use "igniteui-angular/theming" as *;
+
+:host {
+    --ig-size: 2;
+
+    contain: content;
+}
+
+.grid-lite-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+.theme-switcher {
+    margin-bottom: 2rem;
+}
+
+igc-grid-lite {
+    min-height: rem(400px);
+}
+
+$my-light-palette: palette(
+    $primary: #c1292e,
+    $secondary: #f1d302,
+    $surface: #fdfffc,
+    $gray: #235789,
+);
+
+$my_dark_palette: palette(
+    $primary: #ddd020,
+    $secondary: #d5896f,
+    $surface: #031d44,
+    $gray: #04395e,
+);
+
+.custom-light {
+    @include palette($my_light_palette);
+    @include typography('"Roboto", sans-serif', $bootstrap-type-scale);
+}
+
+.custom-dark {
+    @include palette($my_dark_palette);
+    @include typography(
+        '"Merriweather Sans", sans-serif',
+        $bootstrap-type-scale
+    );
+}
diff --git a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts
new file mode 100644
index 0000000000..8c1449c392
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts
@@ -0,0 +1,69 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcSwitchComponent);
+
+@Component({
+  selector: 'app-grid-lite-styling-custom',
+  templateUrl: './grid-lite-styling-custom.component.html',
+  styleUrls: ['./grid-lite-styling-custom.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteStylingCustomComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+  public theme: 'dark' | 'light' = 'dark';
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(50);
+
+    this.columns = [
+      {
+        key: 'name',
+        headerText: 'Product',
+        filter: true,
+        sort: true
+      },
+      {
+        key: 'price',
+        headerText: 'Price',
+        type: 'number',
+        filter: true,
+        sort: true
+      },
+      {
+        key: 'sold',
+        type: 'number',
+        headerText: 'Sold',
+        filter: true,
+        sort: true
+      },
+      {
+        key: 'total',
+        headerText: 'Total',
+        type: 'number',
+        filter: true,
+        sort: true
+      },
+      {
+        key: 'rating',
+        type: 'number',
+        headerText: 'Rating',
+        filter: true,
+        sort: true
+      }
+    ];
+  }
+
+  switchTheme() {
+    this.theme = this.theme === 'dark' ? 'light' : 'dark';
+  }
+}
diff --git a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
new file mode 100644
index 0000000000..c19f47b31a
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
@@ -0,0 +1,19 @@
+<div class="grid-lite-wrapper">
+  <section class="theme-selector">
+    <igc-select
+      flip
+      [value]="selectedTheme"
+      label="Select a theme:"
+      (igcChange)="updateTheme($event)">
+      @for (theme of themes; track theme) {
+        <igc-select-item [value]="theme">{{ theme }}</igc-select-item>
+      }
+    </igc-select>
+  </section>
+  
+  <igc-grid-lite 
+    [attr.data-theme]="selectedTheme"
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+</div>
diff --git a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.scss b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.scss
new file mode 100644
index 0000000000..3167c8b26c
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.scss
@@ -0,0 +1,19 @@
+:host {
+  contain: content;
+  --ig-size: 2;
+}
+
+.grid-lite-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.theme-selector {
+  display: flex;
+  margin-bottom: 2rem;
+  gap: 2rem;
+}
+
+igc-grid-lite {
+  min-height: 400px;
+}
diff --git a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts
new file mode 100644
index 0000000000..095ef4abd8
--- /dev/null
+++ b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts
@@ -0,0 +1,84 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { defineComponents, IgcRatingComponent, IgcSelectComponent, IgcSelectItemComponent } from 'igniteui-webcomponents';
+import { IgcGridLite } from 'igniteui-grid-lite';
+import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+
+IgcGridLite.register();
+defineComponents(IgcRatingComponent, IgcSelectComponent, IgcSelectItemComponent);
+
+@Component({
+  selector: 'app-grid-lite-styling-themes',
+  templateUrl: './grid-lite-styling-themes.component.html',
+  styleUrls: ['./grid-lite-styling-themes.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GridLiteStylingThemesComponent implements OnInit {
+  private dataService = inject(GridLiteDataService);
+  
+  public data: ProductInfo[] = [];
+  public columns: any[] = [];
+  public selectedTheme = 'Bootstrap';
+  public themes = [
+    'Bootstrap',
+    'Bootstrap Dark',
+    'Fluent',
+    'Fluent Dark',
+    'Material',
+    'Material Dark',
+    'Indigo',
+    'Indigo Dark'
+  ];
+
+  ngOnInit() {
+    this.data = this.dataService.generateProducts(50);
+    
+    this.columns = [
+      { 
+        key: 'name', 
+        headerText: 'Product', 
+        sort: true, 
+        filter: true 
+      },
+      {
+        key: 'price',
+        headerText: 'Price per item',
+        sort: true,
+        filter: true,
+        type: 'number'
+      },
+      {
+        key: 'sold',
+        headerText: 'Items sold',
+        sort: true,
+        filter: true,
+        type: 'number'
+      },
+      {
+        key: 'total',
+        headerText: 'Total',
+        sort: true,
+        filter: true,
+        type: 'number'
+      },
+      {
+        key: 'rating',
+        headerText: 'User 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;
+        }
+      }
+    ];
+  }
+
+  updateTheme(event: any) {
+    this.selectedTheme = event.detail.value;
+  }
+}
diff --git a/src/app/grid-lite/grid-lite.routes.ts b/src/app/grid-lite/grid-lite.routes.ts
new file mode 100644
index 0000000000..86fe9c71bd
--- /dev/null
+++ b/src/app/grid-lite/grid-lite.routes.ts
@@ -0,0 +1,90 @@
+/* eslint-disable max-len */
+import { Routes } from '@angular/router';
+import { GridLiteOverviewComponent } from './grid-lite-overview/grid-lite-overview.component';
+import { GridLiteColumnConfigSimpleComponent } from './grid-lite-column-config-simple/grid-lite-column-config-simple.component';
+import { GridLiteColumnConfigDynamicComponent } from './grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component';
+import { GridLiteColumnConfigHeadersComponent } from './grid-lite-column-config-headers/grid-lite-column-config-headers.component';
+import { GridLiteDataBindingDynamicComponent } from './grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component';
+import { GridLiteFilteringSimpleComponent } from './grid-lite-filtering-simple/grid-lite-filtering-simple.component';
+import { GridLiteFilteringEventsComponent } from './grid-lite-filtering-events/grid-lite-filtering-events.component';
+import { GridLiteFilteringPipelineComponent } from './grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component';
+import { GridLiteSortingSimpleComponent } from './grid-lite-sorting-simple/grid-lite-sorting-simple.component';
+import { GridLiteSortingEventsComponent } from './grid-lite-sorting-events/grid-lite-sorting-events.component';
+import { GridLiteSortingGridConfigComponent } from './grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component';
+import { GridLiteSortingPipelineComponent } from './grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component';
+import { GridLiteStylingCustomComponent } from './grid-lite-styling-custom/grid-lite-styling-custom.component';
+import { GridLiteStylingThemesComponent } from './grid-lite-styling-themes/grid-lite-styling-themes.component';
+import { gridLiteRoutesData } from './grid-lite-routes-data';
+
+export const GridLiteRoutes: Routes = [
+    {
+        path: 'overview',
+        component: GridLiteOverviewComponent,
+        data: gridLiteRoutesData['overview']
+    },
+    {
+        path: 'column-config-simple',
+        component: GridLiteColumnConfigSimpleComponent,
+        data: gridLiteRoutesData['column-config-simple']
+    },
+    {
+        path: 'column-config-dynamic',
+        component: GridLiteColumnConfigDynamicComponent,
+        data: gridLiteRoutesData['column-config-dynamic']
+    },
+    {
+        path: 'column-config-headers',
+        component: GridLiteColumnConfigHeadersComponent,
+        data: gridLiteRoutesData['column-config-headers']
+    },
+    {
+        path: 'data-binding-dynamic',
+        component: GridLiteDataBindingDynamicComponent,
+        data: gridLiteRoutesData['data-binding-dynamic']
+    },
+    {
+        path: 'filtering-simple',
+        component: GridLiteFilteringSimpleComponent,
+        data: gridLiteRoutesData['filtering-simple']
+    },
+    {
+        path: 'filtering-events',
+        component: GridLiteFilteringEventsComponent,
+        data: gridLiteRoutesData['filtering-events']
+    },
+    {
+        path: 'filtering-pipeline',
+        component: GridLiteFilteringPipelineComponent,
+        data: gridLiteRoutesData['filtering-pipeline']
+    },
+    {
+        path: 'sorting-simple',
+        component: GridLiteSortingSimpleComponent,
+        data: gridLiteRoutesData['sorting-simple']
+    },
+    {
+        path: 'sorting-events',
+        component: GridLiteSortingEventsComponent,
+        data: gridLiteRoutesData['sorting-events']
+    },
+    {
+        path: 'sorting-grid-config',
+        component: GridLiteSortingGridConfigComponent,
+        data: gridLiteRoutesData['sorting-grid-config']
+    },
+    {
+        path: 'sorting-pipeline',
+        component: GridLiteSortingPipelineComponent,
+        data: gridLiteRoutesData['sorting-pipeline']
+    },
+    {
+        path: 'styling-custom',
+        component: GridLiteStylingCustomComponent,
+        data: gridLiteRoutesData['styling-custom']
+    },
+    {
+        path: 'styling-themes',
+        component: GridLiteStylingThemesComponent,
+        data: gridLiteRoutesData['styling-themes']
+    }
+];
diff --git a/src/app/grid/grid-save-state/routes.ts b/src/app/grid/grid-save-state/routes.ts
new file mode 100644
index 0000000000..d9769b71ce
--- /dev/null
+++ b/src/app/grid/grid-save-state/routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from "@angular/router";
+import { AboutComponent } from "./about.component";
+import { GridSaveStateComponent } from "./grid-state.component";
+
+export const routes: Routes = [
+  { path: 'grid-about', component: AboutComponent },
+  { path: 'grid-state', component: GridSaveStateComponent },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'grid-state'
+  }
+];
diff --git a/src/app/hierarchical-grid/hierarchical-grid-save-state/routes.ts b/src/app/hierarchical-grid/hierarchical-grid-save-state/routes.ts
new file mode 100644
index 0000000000..79a5970551
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-save-state/routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from "@angular/router";
+import { HGridSaveStateComponent } from "./hGrid-state.component";
+import { HGridAboutComponent } from "./about.component";
+
+export const routes: Routes = [
+  { path: 'hGrid-state-about', component: HGridAboutComponent },
+  { path: 'hGrid-state', component: HGridSaveStateComponent },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'hGrid-state'
+  }
+];
diff --git a/src/app/index/index.component.ts b/src/app/index/index.component.ts
index ccdc58b214..308647ef8b 100644
--- a/src/app/index/index.component.ts
+++ b/src/app/index/index.component.ts
@@ -6,6 +6,7 @@ import { filter, map, debounceTime } from 'rxjs/operators';
 import { dataDisplayRoutesData } from '../data-display/data-display-routes-data';
 import { dataEntriesRoutesData } from '../data-entries/data-entries-routes-data';
 import { gridsRoutesData } from '../grid/grid-routes-data';
+import { gridLiteRoutesData } from '../grid-lite/grid-lite-routes-data';
 import { hierarchicalGridRoutesData } from '../hierarchical-grid/hierarchical-grid-routes-data';
 import { interactionsRoutesData } from '../interactions/interactions-routes-data';
 import { layoutsRoutesData } from '../layouts/layouts-routes-data';
@@ -106,6 +107,10 @@ export class IndexComponent implements OnInit, AfterViewInit {
             path: 'grid',
             routesData: gridsRoutesData
         },
+        {
+            path: 'grid-lite',
+            routesData: gridLiteRoutesData
+        },
         {
             path: 'hierarchical-grid',
             routesData: hierarchicalGridRoutesData
diff --git a/src/app/layouts/tabs/tabs-sample-4/routes.ts b/src/app/layouts/tabs/tabs-sample-4/routes.ts
new file mode 100644
index 0000000000..2ceec4061b
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-sample-4/routes.ts
@@ -0,0 +1,21 @@
+import { Routes } from "@angular/router";
+import { View1Component } from "../views/view1/view1.component";
+import { View2Component } from "../views/view2/view2.component";
+import { View3Component } from "../views/view3/view3.component";
+import { TabsSample4Component } from "./components/tabs-sample-4.component";
+
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: '/tabs-routing'
+    },
+    {
+        path: 'tabs-routing',
+        component: TabsSample4Component,
+        children: [
+            { path: 'view1', component: View1Component },
+            { path: 'view2', component: View2Component },
+            { path: 'view3', component: View3Component }
+        ]
+    }];
diff --git a/src/app/pivot-grid/pivot-state-persistence/routes.ts b/src/app/pivot-grid/pivot-state-persistence/routes.ts
new file mode 100644
index 0000000000..f2a2b4e721
--- /dev/null
+++ b/src/app/pivot-grid/pivot-state-persistence/routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from "@angular/router";
+import { PivotGridStatePersistenceSampleComponent } from "./pivot-grid-state-persistence-sample.component";
+import { PivotGridAboutComponent } from "./about.component";
+
+export const routes: Routes = [
+  { path: 'pivot-state-about', component: PivotGridAboutComponent },
+  { path: 'pivot-grid-state-persistence', component: PivotGridStatePersistenceSampleComponent },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'pivot-grid-state-persistence'
+  }
+];
diff --git a/src/app/tree-grid/tree-grid-save-state/routes.ts b/src/app/tree-grid/tree-grid-save-state/routes.ts
new file mode 100644
index 0000000000..279b08be6d
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-save-state/routes.ts
@@ -0,0 +1,13 @@
+import { Routes } from "@angular/router";
+import { TGridAboutComponent } from "./about.component";
+import { TGridSaveStateComponent } from "./tGrid-state.component";
+
+export const routes: Routes = [
+  { path: 'tree-grid-state-about', component: TGridAboutComponent },
+  { path: 'tree-grid-state', component: TGridSaveStateComponent },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'tree-grid-state'
+  }
+];