diff --git a/samples/grids/grid/cascading-combo/src/index.ts b/samples/grids/grid/cascading-combo/src/index.ts
index b1feab946f..c9800482d8 100644
--- a/samples/grids/grid/cascading-combo/src/index.ts
+++ b/samples/grids/grid/cascading-combo/src/index.ts
@@ -78,97 +78,122 @@ export class Sample {
               City: ''
             }
         ];
-
-        setTimeout(() => {
-            for (let index = 0; index < grid.data.length; index++) {
-                const rowId = grid.data[index].ID;
-                this.bindEventsCountryCombo(rowId, grid.getCellByKey(rowId , "Country"));
-                this.bindEventsRegionCombo(rowId, grid.getCellByKey(rowId , "Region"));
-                this.bindEventsCityCombo(rowId, grid.getCellByKey(rowId , "City"));
-            }
-        }, 100);
     }
 
-    public bindEventsCountryCombo(rowId: any, cell: any) {
-        const comboId = "country_" + rowId;
-        var combo = document.getElementById(comboId) as IgcComboComponent<any>;
-        combo?.addEventListener("igcChange", (e:any) => {
-            const value = e.detail.newValue[0];
-            cell.update(value);
-            const nextCombo = document.getElementById("region_" + cell.id.rowID) as IgcComboComponent<any>;
-            const nextProgress = document.getElementById("progress_region_" + cell.id.rowID) as IgcLinearProgressComponent;
-            if (value === "") {
-                nextCombo.deselect(nextCombo.value);
-                nextCombo.disabled = true;
-                nextCombo.data = [];
-            } else {
-                nextProgress.style.display = "block";
-                setTimeout(() => {
-                    nextProgress.style.display = "none";
-                    nextCombo.disabled = false;
-                    nextCombo.data = this.regions.filter(x => x.Country === value);
-                }, 2000);
-
-            }
-        });
-        combo?.addEventListener("igcOpening", (e:any) => {
-            var currCombo = e.target;
-            if (currCombo.data.length === 0) {
-                combo.data = this.countries;
-            };
-        });
-    }
-
-    public bindEventsRegionCombo(rowId: any, cell: any) {
-        const comboId = "region_" + rowId;
-        var combo = document.getElementById(comboId) as IgcComboComponent<any>;
-        combo?.addEventListener("igcChange", (e:any) => {
-            const value = e.detail.newValue[0];
-            cell.update(value);
-            const nextCombo = document.getElementById("city_" + cell.id.rowID) as IgcComboComponent<any>;
-            const nextProgress = document.getElementById("progress_city_" + cell.id.rowID) as IgcLinearProgressComponent;
-            if (value === "") {
-                nextCombo.deselect(nextCombo.value);
-                nextCombo.disabled = true;
-                nextCombo.data = [];
-            } else {
-                nextProgress.style.display = "block";
-                setTimeout(() => {
-                    nextProgress.style.display = "none";
-                    nextCombo.disabled = false;
-                    nextCombo.data = this.cities.filter(x => x.Region === value);
-                }, 2000);
-            }
-        });
+    public onCountryChange(rowId: string, e: CustomEvent) {
+        const newValue = e.detail.newValue[0];
+        const regionComboId = "region_" + rowId;
+        const cityComboId = "city_" + rowId;
+        const regionCombo = document.getElementById(regionComboId) as IgcComboComponent<any>;
+        const cityCombo = document.getElementById(cityComboId) as IgcComboComponent;
+
+        if (!regionCombo || !cityCombo) return;
+
+        if (newValue === undefined || newValue === '') {
+            // Deselect, disable and clear region combo
+            regionCombo.deselect(regionCombo.value);
+            regionCombo.disabled = true;
+            regionCombo.data = [];
+
+            // Deselect, disable and clear city combo
+            cityCombo.deselect(cityCombo.value);
+            cityCombo.disabled = true;
+            cityCombo.data = [];
+        } else {
+            // Populate and enable region combo based on selected country
+            regionCombo.disabled = false;
+            regionCombo.data = this.regions.filter(region => region.Country === newValue);
+
+            // Ensure city combo is reset when changing country
+            cityCombo.deselect(cityCombo.value);
+            cityCombo.disabled = true;
+            cityCombo.data = [];
+        }
     }
 
-    public bindEventsCityCombo(rowId: any, cell: any) {
-        const comboId = "city_" + rowId;
-        var combo = document.getElementById(comboId) as IgcComboComponent<any>;
-        combo?.addEventListener("igcChange", (e:any) => {
-            const value = e.detail.newValue[0];
-            cell.update(value);
-        });
+    public onRegionChange(rowId: string, e: CustomEvent) {
+        const newValue = e.detail.newValue[0];
+        const cityComboId = "city_" + rowId;
+        const cityCombo = document.getElementById(cityComboId) as IgcComboComponent;
+
+        if (!cityCombo) return;
+
+        if (newValue === undefined || newValue === '') {
+            // Deselect, disable and clear city combo
+            cityCombo.deselect(cityCombo.value);
+            cityCombo.disabled = true;
+            cityCombo.data = [];
+        } else {
+            // Populate and enable city combo based on selected country
+            cityCombo.disabled = false;
+            cityCombo.data = this.cities.filter(city => city.Region === newValue);
+        }
     }
 
     public webGridCountryDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
+        if (!ctx || !ctx.cell) {
+            return nothing;
+        }
+
         const id = ctx.cell.id.rowID;
         const comboId = "country_" + id;
-        return html`<igc-combo placeholder="Choose Country..." value-key="Country" display-key="Country" id="${comboId}" single-select></igc-combo>`;
+
+        return html`
+            <igc-combo
+                id="${comboId}"
+                placeholder="Choose Country..."
+                value-key="Country"
+                display-key="Country"
+                single-select
+                .data="${this.countries}"
+                @igcChange="${(e: CustomEvent) => this.onCountryChange(id, e)}"
+            ></igc-combo>
+        `;
     }
 
     public webGridRegionDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
+        if (!ctx || !ctx.cell) {
+            return nothing;
+        }
+
         const id = ctx.cell.id.rowID;
         const comboId = "region_" + id;
-        const progressId = "progress_region_" + id;
-        return html`<div style="display:flex; flex-direction: column;"><igc-combo placeholder="Choose Region..." disabled value-key="Region"  display-key="Region" id="${comboId}" single-select></igc-combo><igc-linear-progress style="display:none;" indeterminate id="${progressId}"></<igc-linear-progress><div>`;
+
+        return html`
+            <div style="display: flex; flex-direction: column;">
+                <igc-combo
+                    id="${comboId}"
+                    placeholder="Choose Region..."
+                    value-key="Region"
+                    display-key="Region"
+                    single-select
+                    disabled
+                    @igcChange="${(e: CustomEvent) => this.onRegionChange(id, e)}"
+                ></igc-combo>
+            </div>
+        `;
     }
 
     public webGridCityDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
+        if (!ctx || !ctx.cell) {
+            return nothing;
+        }
+
         const id = ctx.cell.id.rowID;
         const comboId = "city_" + id;
-        const progressId = "progress_city_" + id;
-        return html`<div style="display:flex; flex-direction: column;"><igc-combo placeholder="Choose City..." disabled value-key="Name"  display-key="Name" id="${comboId}" single-select></igc-combo><igc-linear-progress style="display:none;" indeterminate id="${progressId}"></<igc-linear-progress></div>`;
+
+        return html`
+            <div style="display: flex; flex-direction: column;">
+                <igc-combo
+                    id="${comboId}"
+                    placeholder="Choose City..."
+                    value-key="Name"
+                    display-key="Name"
+                    single-select
+                    disabled
+                ></igc-combo>
+            </div>
+        `;
     }
 
 }
diff --git a/samples/grids/grid/conditional-row-selectors/src/index.ts b/samples/grids/grid/conditional-row-selectors/src/index.ts
index 0c2ff7fa3c..141e4954b7 100644
--- a/samples/grids/grid/conditional-row-selectors/src/index.ts
+++ b/samples/grids/grid/conditional-row-selectors/src/index.ts
@@ -63,7 +63,6 @@ export class Sample {
                 // all selected from header, de-select instead
                 event.newSelection = [];
         }
-        grid.markForCheck();
     }
 
 }
diff --git a/samples/grids/grid/keyboard-custom-navigation/src/index.ts b/samples/grids/grid/keyboard-custom-navigation/src/index.ts
index 60a25e0836..1b53e67467 100644
--- a/samples/grids/grid/keyboard-custom-navigation/src/index.ts
+++ b/samples/grids/grid/keyboard-custom-navigation/src/index.ts
@@ -70,7 +70,7 @@ export class Sample {
         const type = args.targetType;
         var grid = this.grid as any;
 
-        if (type === GridKeydownTargetType.DataCell && target.editMode && evt.key.toLowerCase() === 'tab') {
+        if (type === "dataCell" && target.editMode && evt.key.toLowerCase() === 'tab') {
             // Value validation for number column.
             // This covers both 'tab' and 'shift+tab' key interactions.
             args.event.preventDefault();
@@ -85,7 +85,7 @@ export class Sample {
 
             grid.navigateTo(cell.rowIndex, cell.visibleColumnIndex,
                 (obj: any) => { obj.target.activate(); });
-        } else if (type === GridKeydownTargetType.DataCell && evt.key.toLowerCase() === 'enter') {
+        } else if (type === "dataCell" && evt.key.toLowerCase() === 'enter') {
             // Perform column based kb navigation with 'enter' key press
             args.cancel = true;
             grid.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj: any) => {
diff --git a/samples/grids/tree-grid/column-sorting-indicators/.prettierrc b/samples/grids/tree-grid/column-sorting-indicators/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-indicators/index.html b/samples/grids/tree-grid/column-sorting-indicators/index.html
new file mode 100644
index 0000000000..11f4494aa5
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample | Ignite UI | Web Components | infragistics</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+    <link rel="stylesheet" href="/src/index.css" type="text/css" />
+
+  </head>
+
+  <body>
+    <div id="root">
+
+<div class="container sample ig-typography">
+
+    <div class="container fill">
+        <igc-tree-grid
+        auto-generate="false"
+        name="grid"
+        id="grid"
+        id="grid"
+        primary-key="ID"
+        foreign-key="ParentID">
+            <igc-column
+            field="ID"
+            header="Order ID"
+            groupable="true"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Name"
+            header="Name"
+            data-type="string"
+            groupable="true"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Category"
+            header="Category"
+            data-type="string"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="OrderDate"
+            header="Order Date"
+            data-type="date"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Price"
+            data-type="currency"
+            sortable="true"
+            name="column1"
+            id="column1">
+            </igc-column>
+            <igc-column
+            field="Units"
+            header="Units"
+            data-type="number"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Delivered"
+            header="Units"
+            data-type="boolean"
+            sortable="true">
+            </igc-column>
+        </igc-tree-grid>
+    </div>
+</div>
+
+    </div>
+
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-indicators/package.json b/samples/grids/tree-grid/column-sorting-indicators/package.json
new file mode 100644
index 0000000000..bc7d41b73f
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "example-ignite-ui-web-components",
+  "description": "This project provides example of using Ignite UI for Web Components",
+  "author": "Infragistics",
+  "version": "1.0.0",
+  "license": "",
+  "private": true,
+  "homepage": ".",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents-core": "4.3.2",
+    "igniteui-webcomponents-grids": "4.3.2",
+    "igniteui-webcomponents-inputs": "4.3.2",
+    "igniteui-webcomponents-layouts": "4.3.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  }
+}
diff --git a/samples/grids/tree-grid/column-sorting-indicators/sandbox.config.json b/samples/grids/tree-grid/column-sorting-indicators/sandbox.config.json
new file mode 100644
index 0000000000..52c7875103
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-indicators/src/OrdersTreeData.ts b/samples/grids/tree-grid/column-sorting-indicators/src/OrdersTreeData.ts
new file mode 100644
index 0000000000..aab5211fc1
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/src/OrdersTreeData.ts
@@ -0,0 +1,285 @@
+export class OrdersTreeDataItem {
+    public constructor(init: Partial<OrdersTreeDataItem>) {
+        Object.assign(this, init);
+    }
+
+    public ID: number;
+    public ParentID: number;
+    public Name: string;
+    public Category: string;
+    public OrderDate: string;
+    public Units: number;
+    public UnitPrice: number;
+    public Price: number;
+    public Delivered: boolean;
+
+}
+export class OrdersTreeData extends Array<OrdersTreeDataItem> {
+    public constructor() {
+        super();
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 1,
+            ParentID: -1,
+            Name: `Order 1`,
+            Category: ``,
+            OrderDate: `2010-02-17`,
+            Units: 1844,
+            UnitPrice: 3.73,
+            Price: 6884.38,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 101,
+            ParentID: 1,
+            Name: `Chocolate Chip Cookies`,
+            Category: `Cookies`,
+            OrderDate: `2010-02-17`,
+            Units: 834,
+            UnitPrice: 3.59,
+            Price: 2994.06,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 102,
+            ParentID: 1,
+            Name: `Red Apples`,
+            Category: `Fruit`,
+            OrderDate: `2010-02-17`,
+            Units: 371,
+            UnitPrice: 3.66,
+            Price: 1357.86,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 103,
+            ParentID: 1,
+            Name: `Butter`,
+            Category: `Diary`,
+            OrderDate: `2010-02-17`,
+            Units: 260,
+            UnitPrice: 3.45,
+            Price: 897,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 104,
+            ParentID: 1,
+            Name: `Potato Chips`,
+            Category: `Snack`,
+            OrderDate: `2010-02-17`,
+            Units: 118,
+            UnitPrice: 1.96,
+            Price: 231.28,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 105,
+            ParentID: 1,
+            Name: `Orange Juice`,
+            Category: `Beverages`,
+            OrderDate: `2010-02-17`,
+            Units: 261,
+            UnitPrice: 5.38,
+            Price: 1404.18,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 2,
+            ParentID: -1,
+            Name: `Order 2`,
+            Category: ``,
+            OrderDate: `2022-05-27`,
+            Units: 1831,
+            UnitPrice: 8.23,
+            Price: 15062.77,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 201,
+            ParentID: 2,
+            Name: `Frozen Shrimps`,
+            Category: `Seafood`,
+            OrderDate: `2022-05-27`,
+            Units: 120,
+            UnitPrice: 20.45,
+            Price: 2454,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 202,
+            ParentID: 2,
+            Name: `Ice Tea`,
+            Category: `Beverages`,
+            OrderDate: `2022-05-27`,
+            Units: 840,
+            UnitPrice: 7,
+            Price: 5880,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 203,
+            ParentID: 2,
+            Name: `Fresh Cheese`,
+            Category: `Diary`,
+            OrderDate: `2022-05-27`,
+            Units: 267,
+            UnitPrice: 16.55,
+            Price: 4418.85,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 204,
+            ParentID: 2,
+            Name: `Carrots`,
+            Category: `Vegetables`,
+            OrderDate: `2022-05-27`,
+            Units: 360,
+            UnitPrice: 2.77,
+            Price: 997.2,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 205,
+            ParentID: 2,
+            Name: `Apple Juice`,
+            Category: `Beverages`,
+            OrderDate: `2022-05-27`,
+            Units: 244,
+            UnitPrice: 5.38,
+            Price: 1312.72,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 3,
+            ParentID: -1,
+            Name: `Order 3`,
+            Category: ``,
+            OrderDate: `2022-08-04`,
+            Units: 1972,
+            UnitPrice: 3.47,
+            Price: 6849.18,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 301,
+            ParentID: 3,
+            Name: `Skimmed Milk 1L`,
+            Category: `Diary`,
+            OrderDate: `2022-08-04`,
+            Units: 1028,
+            UnitPrice: 3.56,
+            Price: 3659.68,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 302,
+            ParentID: 3,
+            Name: `Bananas 5 Pack`,
+            Category: `Fruit`,
+            OrderDate: `2022-08-04`,
+            Units: 370,
+            UnitPrice: 6.36,
+            Price: 2353.2,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 303,
+            ParentID: 3,
+            Name: `Cauliflower`,
+            Category: `Vegetables`,
+            OrderDate: `2022-08-04`,
+            Units: 283,
+            UnitPrice: 0.95,
+            Price: 268.85,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 304,
+            ParentID: 3,
+            Name: `White Chocolate Cookies`,
+            Category: `Cookies`,
+            OrderDate: `2022-08-04`,
+            Units: 291,
+            UnitPrice: 1.95,
+            Price: 567.45,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 4,
+            ParentID: -1,
+            Name: `Order 4`,
+            Category: ``,
+            OrderDate: `2023-01-04`,
+            Units: 1065,
+            UnitPrice: 5.56,
+            Price: 5923.5,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 401,
+            ParentID: 4,
+            Name: `Mini Milk Chocolate Cookie Bites`,
+            Category: `Cookies`,
+            OrderDate: `2023-01-04`,
+            Units: 68,
+            UnitPrice: 2.25,
+            Price: 153,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 402,
+            ParentID: 4,
+            Name: `Wild Salmon Fillets`,
+            Category: `Seafood`,
+            OrderDate: `2023-01-04`,
+            Units: 320,
+            UnitPrice: 16.15,
+            Price: 5168,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 403,
+            ParentID: 4,
+            Name: `Diet Lemonade`,
+            Category: `Beverages`,
+            OrderDate: `2023-01-04`,
+            Units: 437,
+            UnitPrice: 0.5,
+            Price: 218.5,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 404,
+            ParentID: 4,
+            Name: `Potatos`,
+            Category: `Vegetables`,
+            OrderDate: `2023-01-04`,
+            Units: 240,
+            UnitPrice: 1.6,
+            Price: 384,
+            Delivered: true
+        }));
+    }
+}
diff --git a/samples/grids/tree-grid/column-sorting-indicators/src/index.css b/samples/grids/tree-grid/column-sorting-indicators/src/index.css
new file mode 100644
index 0000000000..8b42ec3ed2
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/src/index.css
@@ -0,0 +1,3 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
diff --git a/samples/grids/tree-grid/column-sorting-indicators/src/index.ts b/samples/grids/tree-grid/column-sorting-indicators/src/index.ts
new file mode 100644
index 0000000000..9c6ae2a204
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/src/index.ts
@@ -0,0 +1,102 @@
+import 'igniteui-webcomponents-grids/grids/combined';
+import { IgcTreeGridComponent, IgcSortingExpression, SortingDirection, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
+import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
+
+import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
+
+import "./index.css";
+
+export class Sample {
+
+    private grid: IgcTreeGridComponent
+    private _sortingExpression1: IgcSortingExpression[] | null = null;
+    public get sortingExpression1(): IgcSortingExpression[] {
+        if (this._sortingExpression1 == null)
+        {
+            let sortingExpression1: IgcSortingExpression[] = [];
+            var sortingExpression2: IgcSortingExpression = {} as IgcSortingExpression;
+            sortingExpression2.dir = SortingDirection.Asc;
+            sortingExpression2.fieldName = "ID";
+            sortingExpression2.ignoreCase = true;
+
+            sortingExpression1.push(sortingExpression2)
+            var sortingExpression3: IgcSortingExpression = {} as IgcSortingExpression;
+            sortingExpression3.dir = SortingDirection.Desc;
+            sortingExpression3.fieldName = "Name";
+            sortingExpression3.ignoreCase = true;
+
+            sortingExpression1.push(sortingExpression3)
+            var sortingExpression4: IgcSortingExpression = {} as IgcSortingExpression;
+            sortingExpression4.dir = SortingDirection.Asc;
+            sortingExpression4.fieldName = "Category";
+            sortingExpression4.ignoreCase = true;
+
+            sortingExpression1.push(sortingExpression4)
+            var sortingExpression5: IgcSortingExpression = {} as IgcSortingExpression;
+            sortingExpression5.dir = SortingDirection.Asc;
+            sortingExpression5.fieldName = "OrderDate";
+            sortingExpression5.ignoreCase = true;
+
+            sortingExpression1.push(sortingExpression5)
+            var sortingExpression6: IgcSortingExpression = {} as IgcSortingExpression;
+            sortingExpression6.dir = SortingDirection.Asc;
+            sortingExpression6.fieldName = "Price";
+            sortingExpression6.ignoreCase = true;
+
+            sortingExpression1.push(sortingExpression6)
+            var sortingExpression7: IgcSortingExpression = {} as IgcSortingExpression;
+            sortingExpression7.dir = SortingDirection.Asc;
+            sortingExpression7.fieldName = "Units";
+            sortingExpression7.ignoreCase = true;
+
+            sortingExpression1.push(sortingExpression7)
+            var sortingExpression8: IgcSortingExpression = {} as IgcSortingExpression;
+            sortingExpression8.dir = SortingDirection.Asc;
+            sortingExpression8.fieldName = "Delivered";
+            sortingExpression8.ignoreCase = true;
+
+            sortingExpression1.push(sortingExpression8)
+            this._sortingExpression1 = sortingExpression1;
+        }
+        return this._sortingExpression1;
+    }
+    private column1: IgcColumnComponent
+    private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
+    public get columnPipeArgs1(): IgcColumnPipeArgs {
+        if (this._columnPipeArgs1 == null)
+        {
+            var columnPipeArgs1: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
+            columnPipeArgs1.currencyCode = "USD";
+            columnPipeArgs1.digitsInfo = "1.2-2";
+
+            this._columnPipeArgs1 = columnPipeArgs1;
+        }
+        return this._columnPipeArgs1;
+    }
+    private _bind: () => void;
+
+    constructor() {
+        var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
+        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
+
+        this._bind = () => {
+            grid.data = this.ordersTreeData;
+            grid.sortingExpressions = this.sortingExpression1;
+            column1.pipeArgs = this.columnPipeArgs1;
+        }
+        this._bind();
+
+    }
+
+    private _ordersTreeData: OrdersTreeData = null;
+    public get ordersTreeData(): OrdersTreeData {
+        if (this._ordersTreeData == null)
+        {
+            this._ordersTreeData = new OrdersTreeData();
+        }
+        return this._ordersTreeData;
+    }
+
+}
+
+new Sample();
diff --git a/samples/grids/tree-grid/column-sorting-indicators/tsconfig.json b/samples/grids/tree-grid/column-sorting-indicators/tsconfig.json
new file mode 100644
index 0000000000..a15284fdc2
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
+      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
+      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
+      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
+      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
+      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
+      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
+      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
+      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
+      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
+      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
+      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
+      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
+      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-indicators/tslint.json b/samples/grids/tree-grid/column-sorting-indicators/tslint.json
new file mode 100644
index 0000000000..e3b56e93a1
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/tslint.json
@@ -0,0 +1,54 @@
+{
+    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+    "linterOptions": {
+      "exclude": [
+        "node_modules/**/*.ts",
+        "**/odatajs-4.0.0.js",
+        "src/images/*.*"
+      ]
+    },
+    "rules": {
+      "curly": [false, "ignore-same-line"],
+      "jsx-no-lambda": false,
+      "jsx-self-close": false,
+      "jsx-wrap-multiline": false,
+      "max-classes-per-file": [true, 10],
+      "member-ordering": false,
+      "no-console": false,
+      "no-string-literal": false,
+      "no-unused-vars": false,
+      "no-useless-constructor": false,
+      "no-trailing-whitespace": false,
+      "no-var": false,
+      "no-var-requires": false,
+      "no-var-keyword": false,
+      "ordered-imports": false,
+      "object-literal-sort-keys": false,
+      "object-literal-shorthand": false,
+      "only-arrow-functions": false,
+      "prefer-const": false,
+      "prefer-for-of": false,
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/type-annotation-spacing": "off"
+    },
+    "jsRules": {
+      "curly": [false, "ignore-same-line"],
+      "jsx-no-lambda": false,
+      "jsx-self-close": false,
+      "jsx-wrap-multiline": false,
+      "max-classes-per-file": [true, 10],
+      "no-console": false,
+      "no-unused-vars": false,
+      "no-useless-constructor": false,
+      "no-var-requires": false,
+      "object-literal-sort-keys": false,
+      "object-literal-shorthand": false,
+      "only-arrow-functions": false,
+      "ordered-imports": false,
+      "prefer-const": false,
+      "prefer-for-of": false,
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-useless-constructor": "off"
+    }
+  }
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js b/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-indicators/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/grids/tree-grid/column-sorting-options/.prettierrc b/samples/grids/tree-grid/column-sorting-options/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-options/index.html b/samples/grids/tree-grid/column-sorting-options/index.html
new file mode 100644
index 0000000000..18a97bc548
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample | Ignite UI | Web Components | infragistics</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+    <link rel="stylesheet" href="/src/index.css" type="text/css" />
+
+  </head>
+
+  <body>
+    <div id="root">
+
+<div class="container sample ig-typography">
+    <div class="options vertical">
+        <igc-property-editor-panel
+        name="PropertyEditor"
+        id="PropertyEditor"
+        description-type="WebGrid"
+        is-horizontal="true"
+        is-wrapping-enabled="true">
+            <igc-property-editor-property-description
+            property-path="SortingOptions"
+            name="SortingOptionsEditor"
+            id="SortingOptionsEditor">
+            </igc-property-editor-property-description>
+            <igc-property-editor-property-description
+            value-type="Button"
+            primitive-value="Clear Sorting"
+            name="propertyEditorPropertyDescription1"
+            id="propertyEditorPropertyDescription1">
+            </igc-property-editor-property-description>
+        </igc-property-editor-panel>
+    </div>
+
+    <div class="container fill">
+        <igc-tree-grid
+        auto-generate="false"
+        name="grid"
+        id="grid"
+        primary-key="ID"
+        foreign-key="ParentID">
+            <igc-column
+            field="ID"
+            header="Order ID"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Name"
+            header="Name"
+            data-type="string"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Category"
+            header="Category"
+            data-type="string"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="OrderDate"
+            header="Order Date"
+            data-type="date"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Price"
+            data-type="currency"
+            sortable="true"
+            name="column1"
+            id="column1">
+            </igc-column>
+            <igc-column
+            field="Units"
+            header="Units"
+            data-type="number"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Delivered"
+            header="Units"
+            data-type="boolean"
+            sortable="true">
+            </igc-column>
+        </igc-tree-grid>
+    </div>
+</div>
+
+    </div>
+
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-options/package.json b/samples/grids/tree-grid/column-sorting-options/package.json
new file mode 100644
index 0000000000..69857e84ea
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "example-ignite-ui-web-components",
+  "description": "This project provides example of using Ignite UI for Web Components",
+  "author": "Infragistics",
+  "version": "1.0.0",
+  "license": "",
+  "private": true,
+  "homepage": ".",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "4.5.0",
+    "igniteui-webcomponents-core": "4.3.2",
+    "igniteui-webcomponents-grids": "4.3.2",
+    "igniteui-webcomponents-inputs": "4.3.2",
+    "igniteui-webcomponents-layouts": "4.3.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  }
+}
diff --git a/samples/grids/tree-grid/column-sorting-options/sandbox.config.json b/samples/grids/tree-grid/column-sorting-options/sandbox.config.json
new file mode 100644
index 0000000000..52c7875103
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-options/src/OrdersTreeData.ts b/samples/grids/tree-grid/column-sorting-options/src/OrdersTreeData.ts
new file mode 100644
index 0000000000..aab5211fc1
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/src/OrdersTreeData.ts
@@ -0,0 +1,285 @@
+export class OrdersTreeDataItem {
+    public constructor(init: Partial<OrdersTreeDataItem>) {
+        Object.assign(this, init);
+    }
+
+    public ID: number;
+    public ParentID: number;
+    public Name: string;
+    public Category: string;
+    public OrderDate: string;
+    public Units: number;
+    public UnitPrice: number;
+    public Price: number;
+    public Delivered: boolean;
+
+}
+export class OrdersTreeData extends Array<OrdersTreeDataItem> {
+    public constructor() {
+        super();
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 1,
+            ParentID: -1,
+            Name: `Order 1`,
+            Category: ``,
+            OrderDate: `2010-02-17`,
+            Units: 1844,
+            UnitPrice: 3.73,
+            Price: 6884.38,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 101,
+            ParentID: 1,
+            Name: `Chocolate Chip Cookies`,
+            Category: `Cookies`,
+            OrderDate: `2010-02-17`,
+            Units: 834,
+            UnitPrice: 3.59,
+            Price: 2994.06,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 102,
+            ParentID: 1,
+            Name: `Red Apples`,
+            Category: `Fruit`,
+            OrderDate: `2010-02-17`,
+            Units: 371,
+            UnitPrice: 3.66,
+            Price: 1357.86,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 103,
+            ParentID: 1,
+            Name: `Butter`,
+            Category: `Diary`,
+            OrderDate: `2010-02-17`,
+            Units: 260,
+            UnitPrice: 3.45,
+            Price: 897,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 104,
+            ParentID: 1,
+            Name: `Potato Chips`,
+            Category: `Snack`,
+            OrderDate: `2010-02-17`,
+            Units: 118,
+            UnitPrice: 1.96,
+            Price: 231.28,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 105,
+            ParentID: 1,
+            Name: `Orange Juice`,
+            Category: `Beverages`,
+            OrderDate: `2010-02-17`,
+            Units: 261,
+            UnitPrice: 5.38,
+            Price: 1404.18,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 2,
+            ParentID: -1,
+            Name: `Order 2`,
+            Category: ``,
+            OrderDate: `2022-05-27`,
+            Units: 1831,
+            UnitPrice: 8.23,
+            Price: 15062.77,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 201,
+            ParentID: 2,
+            Name: `Frozen Shrimps`,
+            Category: `Seafood`,
+            OrderDate: `2022-05-27`,
+            Units: 120,
+            UnitPrice: 20.45,
+            Price: 2454,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 202,
+            ParentID: 2,
+            Name: `Ice Tea`,
+            Category: `Beverages`,
+            OrderDate: `2022-05-27`,
+            Units: 840,
+            UnitPrice: 7,
+            Price: 5880,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 203,
+            ParentID: 2,
+            Name: `Fresh Cheese`,
+            Category: `Diary`,
+            OrderDate: `2022-05-27`,
+            Units: 267,
+            UnitPrice: 16.55,
+            Price: 4418.85,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 204,
+            ParentID: 2,
+            Name: `Carrots`,
+            Category: `Vegetables`,
+            OrderDate: `2022-05-27`,
+            Units: 360,
+            UnitPrice: 2.77,
+            Price: 997.2,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 205,
+            ParentID: 2,
+            Name: `Apple Juice`,
+            Category: `Beverages`,
+            OrderDate: `2022-05-27`,
+            Units: 244,
+            UnitPrice: 5.38,
+            Price: 1312.72,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 3,
+            ParentID: -1,
+            Name: `Order 3`,
+            Category: ``,
+            OrderDate: `2022-08-04`,
+            Units: 1972,
+            UnitPrice: 3.47,
+            Price: 6849.18,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 301,
+            ParentID: 3,
+            Name: `Skimmed Milk 1L`,
+            Category: `Diary`,
+            OrderDate: `2022-08-04`,
+            Units: 1028,
+            UnitPrice: 3.56,
+            Price: 3659.68,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 302,
+            ParentID: 3,
+            Name: `Bananas 5 Pack`,
+            Category: `Fruit`,
+            OrderDate: `2022-08-04`,
+            Units: 370,
+            UnitPrice: 6.36,
+            Price: 2353.2,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 303,
+            ParentID: 3,
+            Name: `Cauliflower`,
+            Category: `Vegetables`,
+            OrderDate: `2022-08-04`,
+            Units: 283,
+            UnitPrice: 0.95,
+            Price: 268.85,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 304,
+            ParentID: 3,
+            Name: `White Chocolate Cookies`,
+            Category: `Cookies`,
+            OrderDate: `2022-08-04`,
+            Units: 291,
+            UnitPrice: 1.95,
+            Price: 567.45,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 4,
+            ParentID: -1,
+            Name: `Order 4`,
+            Category: ``,
+            OrderDate: `2023-01-04`,
+            Units: 1065,
+            UnitPrice: 5.56,
+            Price: 5923.5,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 401,
+            ParentID: 4,
+            Name: `Mini Milk Chocolate Cookie Bites`,
+            Category: `Cookies`,
+            OrderDate: `2023-01-04`,
+            Units: 68,
+            UnitPrice: 2.25,
+            Price: 153,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 402,
+            ParentID: 4,
+            Name: `Wild Salmon Fillets`,
+            Category: `Seafood`,
+            OrderDate: `2023-01-04`,
+            Units: 320,
+            UnitPrice: 16.15,
+            Price: 5168,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 403,
+            ParentID: 4,
+            Name: `Diet Lemonade`,
+            Category: `Beverages`,
+            OrderDate: `2023-01-04`,
+            Units: 437,
+            UnitPrice: 0.5,
+            Price: 218.5,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 404,
+            ParentID: 4,
+            Name: `Potatos`,
+            Category: `Vegetables`,
+            OrderDate: `2023-01-04`,
+            Units: 240,
+            UnitPrice: 1.6,
+            Price: 384,
+            Delivered: true
+        }));
+    }
+}
diff --git a/samples/grids/tree-grid/column-sorting-options/src/index.css b/samples/grids/tree-grid/column-sorting-options/src/index.css
new file mode 100644
index 0000000000..8b42ec3ed2
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/src/index.css
@@ -0,0 +1,3 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
diff --git a/samples/grids/tree-grid/column-sorting-options/src/index.ts b/samples/grids/tree-grid/column-sorting-options/src/index.ts
new file mode 100644
index 0000000000..26549218ee
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/src/index.ts
@@ -0,0 +1,105 @@
+import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
+import 'igniteui-webcomponents-grids/grids/combined';
+import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
+import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
+import { IgcTreeGridComponent, IgcSortingExpression, SortingDirection, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
+import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
+import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
+import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+
+import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import { defineAllComponents } from 'igniteui-webcomponents';
+import { ModuleManager } from 'igniteui-webcomponents-core';
+defineAllComponents();
+
+import "./index.css";
+
+ModuleManager.register(
+    IgcPropertyEditorPanelModule
+);
+
+export class Sample {
+
+    private propertyEditor: IgcPropertyEditorPanelComponent
+    private sortingOptionsEditor: IgcPropertyEditorPropertyDescriptionComponent
+    private propertyEditorPropertyDescription1: IgcPropertyEditorPropertyDescriptionComponent
+    private grid: IgcTreeGridComponent
+    private _sortingExpression1: IgcSortingExpression[] | null = null;
+    public get sortingExpression1(): IgcSortingExpression[] {
+        if (this._sortingExpression1 == null)
+        {
+            let sortingExpression1: IgcSortingExpression[] = [];
+            var sortingExpression2: IgcSortingExpression = {} as IgcSortingExpression;
+            sortingExpression2.fieldName = "Category";
+            sortingExpression2.dir = SortingDirection.Asc;
+            sortingExpression2.ignoreCase = true;
+
+            sortingExpression1.push(sortingExpression2)
+            this._sortingExpression1 = sortingExpression1;
+        }
+        return this._sortingExpression1;
+    }
+    private column1: IgcColumnComponent
+    private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
+    public get columnPipeArgs1(): IgcColumnPipeArgs {
+        if (this._columnPipeArgs1 == null)
+        {
+            var columnPipeArgs1: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
+            columnPipeArgs1.currencyCode = "USD";
+            columnPipeArgs1.digitsInfo = "1.2-2";
+
+            this._columnPipeArgs1 = columnPipeArgs1;
+        }
+        return this._columnPipeArgs1;
+    }
+    private _bind: () => void;
+
+    constructor() {
+        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
+        var sortingOptionsEditor = this.sortingOptionsEditor = document.getElementById('SortingOptionsEditor') as IgcPropertyEditorPropertyDescriptionComponent;
+        var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1 = document.getElementById('propertyEditorPropertyDescription1') as IgcPropertyEditorPropertyDescriptionComponent;
+        this.webGridClearSort = this.webGridClearSort.bind(this);
+        var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
+        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
+
+        this._bind = () => {
+            propertyEditor.componentRenderer = this.renderer;
+            propertyEditor.target = this.grid;
+            propertyEditorPropertyDescription1.buttonClicked = this.webGridClearSort;
+            grid.data = this.ordersTreeData;
+            grid.sortingExpressions = this.sortingExpression1;
+            column1.pipeArgs = this.columnPipeArgs1;
+        }
+        this._bind();
+
+    }
+
+    private _ordersTreeData: OrdersTreeData = null;
+    public get ordersTreeData(): OrdersTreeData {
+        if (this._ordersTreeData == null)
+        {
+            this._ordersTreeData = new OrdersTreeData();
+        }
+        return this._ordersTreeData;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            PropertyEditorPanelDescriptionModule.register(context);
+            WebTreeGridDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+    public webGridClearSort(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
+        var grid = this.grid;
+        grid.clearSort("");
+    }
+
+}
+
+new Sample();
diff --git a/samples/grids/tree-grid/column-sorting-options/tsconfig.json b/samples/grids/tree-grid/column-sorting-options/tsconfig.json
new file mode 100644
index 0000000000..a15284fdc2
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
+      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
+      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
+      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
+      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
+      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
+      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
+      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
+      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
+      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
+      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
+      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
+      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
+      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-options/tslint.json b/samples/grids/tree-grid/column-sorting-options/tslint.json
new file mode 100644
index 0000000000..e3b56e93a1
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/tslint.json
@@ -0,0 +1,54 @@
+{
+    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+    "linterOptions": {
+      "exclude": [
+        "node_modules/**/*.ts",
+        "**/odatajs-4.0.0.js",
+        "src/images/*.*"
+      ]
+    },
+    "rules": {
+      "curly": [false, "ignore-same-line"],
+      "jsx-no-lambda": false,
+      "jsx-self-close": false,
+      "jsx-wrap-multiline": false,
+      "max-classes-per-file": [true, 10],
+      "member-ordering": false,
+      "no-console": false,
+      "no-string-literal": false,
+      "no-unused-vars": false,
+      "no-useless-constructor": false,
+      "no-trailing-whitespace": false,
+      "no-var": false,
+      "no-var-requires": false,
+      "no-var-keyword": false,
+      "ordered-imports": false,
+      "object-literal-sort-keys": false,
+      "object-literal-shorthand": false,
+      "only-arrow-functions": false,
+      "prefer-const": false,
+      "prefer-for-of": false,
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/type-annotation-spacing": "off"
+    },
+    "jsRules": {
+      "curly": [false, "ignore-same-line"],
+      "jsx-no-lambda": false,
+      "jsx-self-close": false,
+      "jsx-wrap-multiline": false,
+      "max-classes-per-file": [true, 10],
+      "no-console": false,
+      "no-unused-vars": false,
+      "no-useless-constructor": false,
+      "no-var-requires": false,
+      "object-literal-sort-keys": false,
+      "object-literal-shorthand": false,
+      "only-arrow-functions": false,
+      "ordered-imports": false,
+      "prefer-const": false,
+      "prefer-for-of": false,
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-useless-constructor": "off"
+    }
+  }
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-options/webpack.config.js b/samples/grids/tree-grid/column-sorting-options/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-options/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};
diff --git a/samples/grids/tree-grid/column-sorting-style/.prettierrc b/samples/grids/tree-grid/column-sorting-style/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-style/index.html b/samples/grids/tree-grid/column-sorting-style/index.html
new file mode 100644
index 0000000000..de77874ff0
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample | Ignite UI | Web Components | infragistics</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+    <link rel="stylesheet" href="/src/index.css" type="text/css" />
+
+  </head>
+
+  <body>
+    <div id="root">
+
+<div class="container sample ig-typography">
+
+    <div class="container fill">
+        <igc-tree-grid
+        auto-generate="false"
+        id="grid"
+        name="grid"
+        id="grid"
+        primary-key="ID"
+        foreign-key="ParentID">
+            <igc-column
+            field="ID"
+            header="Order ID"
+            groupable="true"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Name"
+            header="Name"
+            data-type="string"
+            groupable="true"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Category"
+            header="Category"
+            data-type="string"
+            groupable="true"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="OrderDate"
+            header="Order Date"
+            data-type="date"
+            groupable="true"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Price"
+            data-type="currency"
+            groupable="true"
+            sortable="true"
+            name="column1"
+            id="column1">
+            </igc-column>
+            <igc-column
+            field="Units"
+            header="Units"
+            data-type="number"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Delivered"
+            header="Units"
+            data-type="boolean"
+            sortable="true">
+            </igc-column>
+        </igc-tree-grid>
+    </div>
+</div>
+
+    </div>
+
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-style/package.json b/samples/grids/tree-grid/column-sorting-style/package.json
new file mode 100644
index 0000000000..bc7d41b73f
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "example-ignite-ui-web-components",
+  "description": "This project provides example of using Ignite UI for Web Components",
+  "author": "Infragistics",
+  "version": "1.0.0",
+  "license": "",
+  "private": true,
+  "homepage": ".",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents-core": "4.3.2",
+    "igniteui-webcomponents-grids": "4.3.2",
+    "igniteui-webcomponents-inputs": "4.3.2",
+    "igniteui-webcomponents-layouts": "4.3.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  }
+}
diff --git a/samples/grids/tree-grid/column-sorting-style/sandbox.config.json b/samples/grids/tree-grid/column-sorting-style/sandbox.config.json
new file mode 100644
index 0000000000..52c7875103
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-style/src/OrdersTreeData.ts b/samples/grids/tree-grid/column-sorting-style/src/OrdersTreeData.ts
new file mode 100644
index 0000000000..aab5211fc1
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/src/OrdersTreeData.ts
@@ -0,0 +1,285 @@
+export class OrdersTreeDataItem {
+    public constructor(init: Partial<OrdersTreeDataItem>) {
+        Object.assign(this, init);
+    }
+
+    public ID: number;
+    public ParentID: number;
+    public Name: string;
+    public Category: string;
+    public OrderDate: string;
+    public Units: number;
+    public UnitPrice: number;
+    public Price: number;
+    public Delivered: boolean;
+
+}
+export class OrdersTreeData extends Array<OrdersTreeDataItem> {
+    public constructor() {
+        super();
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 1,
+            ParentID: -1,
+            Name: `Order 1`,
+            Category: ``,
+            OrderDate: `2010-02-17`,
+            Units: 1844,
+            UnitPrice: 3.73,
+            Price: 6884.38,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 101,
+            ParentID: 1,
+            Name: `Chocolate Chip Cookies`,
+            Category: `Cookies`,
+            OrderDate: `2010-02-17`,
+            Units: 834,
+            UnitPrice: 3.59,
+            Price: 2994.06,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 102,
+            ParentID: 1,
+            Name: `Red Apples`,
+            Category: `Fruit`,
+            OrderDate: `2010-02-17`,
+            Units: 371,
+            UnitPrice: 3.66,
+            Price: 1357.86,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 103,
+            ParentID: 1,
+            Name: `Butter`,
+            Category: `Diary`,
+            OrderDate: `2010-02-17`,
+            Units: 260,
+            UnitPrice: 3.45,
+            Price: 897,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 104,
+            ParentID: 1,
+            Name: `Potato Chips`,
+            Category: `Snack`,
+            OrderDate: `2010-02-17`,
+            Units: 118,
+            UnitPrice: 1.96,
+            Price: 231.28,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 105,
+            ParentID: 1,
+            Name: `Orange Juice`,
+            Category: `Beverages`,
+            OrderDate: `2010-02-17`,
+            Units: 261,
+            UnitPrice: 5.38,
+            Price: 1404.18,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 2,
+            ParentID: -1,
+            Name: `Order 2`,
+            Category: ``,
+            OrderDate: `2022-05-27`,
+            Units: 1831,
+            UnitPrice: 8.23,
+            Price: 15062.77,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 201,
+            ParentID: 2,
+            Name: `Frozen Shrimps`,
+            Category: `Seafood`,
+            OrderDate: `2022-05-27`,
+            Units: 120,
+            UnitPrice: 20.45,
+            Price: 2454,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 202,
+            ParentID: 2,
+            Name: `Ice Tea`,
+            Category: `Beverages`,
+            OrderDate: `2022-05-27`,
+            Units: 840,
+            UnitPrice: 7,
+            Price: 5880,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 203,
+            ParentID: 2,
+            Name: `Fresh Cheese`,
+            Category: `Diary`,
+            OrderDate: `2022-05-27`,
+            Units: 267,
+            UnitPrice: 16.55,
+            Price: 4418.85,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 204,
+            ParentID: 2,
+            Name: `Carrots`,
+            Category: `Vegetables`,
+            OrderDate: `2022-05-27`,
+            Units: 360,
+            UnitPrice: 2.77,
+            Price: 997.2,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 205,
+            ParentID: 2,
+            Name: `Apple Juice`,
+            Category: `Beverages`,
+            OrderDate: `2022-05-27`,
+            Units: 244,
+            UnitPrice: 5.38,
+            Price: 1312.72,
+            Delivered: false
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 3,
+            ParentID: -1,
+            Name: `Order 3`,
+            Category: ``,
+            OrderDate: `2022-08-04`,
+            Units: 1972,
+            UnitPrice: 3.47,
+            Price: 6849.18,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 301,
+            ParentID: 3,
+            Name: `Skimmed Milk 1L`,
+            Category: `Diary`,
+            OrderDate: `2022-08-04`,
+            Units: 1028,
+            UnitPrice: 3.56,
+            Price: 3659.68,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 302,
+            ParentID: 3,
+            Name: `Bananas 5 Pack`,
+            Category: `Fruit`,
+            OrderDate: `2022-08-04`,
+            Units: 370,
+            UnitPrice: 6.36,
+            Price: 2353.2,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 303,
+            ParentID: 3,
+            Name: `Cauliflower`,
+            Category: `Vegetables`,
+            OrderDate: `2022-08-04`,
+            Units: 283,
+            UnitPrice: 0.95,
+            Price: 268.85,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 304,
+            ParentID: 3,
+            Name: `White Chocolate Cookies`,
+            Category: `Cookies`,
+            OrderDate: `2022-08-04`,
+            Units: 291,
+            UnitPrice: 1.95,
+            Price: 567.45,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 4,
+            ParentID: -1,
+            Name: `Order 4`,
+            Category: ``,
+            OrderDate: `2023-01-04`,
+            Units: 1065,
+            UnitPrice: 5.56,
+            Price: 5923.5,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 401,
+            ParentID: 4,
+            Name: `Mini Milk Chocolate Cookie Bites`,
+            Category: `Cookies`,
+            OrderDate: `2023-01-04`,
+            Units: 68,
+            UnitPrice: 2.25,
+            Price: 153,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 402,
+            ParentID: 4,
+            Name: `Wild Salmon Fillets`,
+            Category: `Seafood`,
+            OrderDate: `2023-01-04`,
+            Units: 320,
+            UnitPrice: 16.15,
+            Price: 5168,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 403,
+            ParentID: 4,
+            Name: `Diet Lemonade`,
+            Category: `Beverages`,
+            OrderDate: `2023-01-04`,
+            Units: 437,
+            UnitPrice: 0.5,
+            Price: 218.5,
+            Delivered: true
+        }));
+        this.push(new OrdersTreeDataItem(
+        {
+            ID: 404,
+            ParentID: 4,
+            Name: `Potatos`,
+            Category: `Vegetables`,
+            OrderDate: `2023-01-04`,
+            Units: 240,
+            UnitPrice: 1.6,
+            Price: 384,
+            Delivered: true
+        }));
+    }
+}
diff --git a/samples/grids/tree-grid/column-sorting-style/src/index.css b/samples/grids/tree-grid/column-sorting-style/src/index.css
new file mode 100644
index 0000000000..4c1b0d1952
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/src/index.css
@@ -0,0 +1,8 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+#grid {
+    --ig-grid-sorted-header-icon-color: #ffb06a;
+    --ig-grid-sortable-header-icon-hover-color: black;
+}
+
diff --git a/samples/grids/tree-grid/column-sorting-style/src/index.ts b/samples/grids/tree-grid/column-sorting-style/src/index.ts
new file mode 100644
index 0000000000..115f10d0b2
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/src/index.ts
@@ -0,0 +1,68 @@
+import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
+import 'igniteui-webcomponents-grids/grids/combined';
+import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
+import { IgcTreeGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids';
+import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
+
+import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
+import { ModuleManager } from 'igniteui-webcomponents-core';
+
+import "./index.css";
+
+ModuleManager.register(
+    IgcPropertyEditorPanelModule
+);
+
+export class Sample {
+
+    private grid: IgcTreeGridComponent
+    private column1: IgcColumnComponent
+    private _columnPipeArgs1: IgcColumnPipeArgs | null = null;
+    public get columnPipeArgs1(): IgcColumnPipeArgs {
+        if (this._columnPipeArgs1 == null)
+        {
+            var columnPipeArgs1: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
+            columnPipeArgs1.currencyCode = "USD";
+            columnPipeArgs1.digitsInfo = "1.2-2";
+
+            this._columnPipeArgs1 = columnPipeArgs1;
+        }
+        return this._columnPipeArgs1;
+    }
+    private _bind: () => void;
+
+    constructor() {
+        var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
+        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
+
+        this._bind = () => {
+            grid.data = this.ordersTreeData;
+            column1.pipeArgs = this.columnPipeArgs1;
+        }
+        this._bind();
+
+    }
+
+    private _ordersTreeData: OrdersTreeData = null;
+    public get ordersTreeData(): OrdersTreeData {
+        if (this._ordersTreeData == null)
+        {
+            this._ordersTreeData = new OrdersTreeData();
+        }
+        return this._ordersTreeData;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            PropertyEditorPanelDescriptionModule.register(context);
+            WebTreeGridDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+
+new Sample();
diff --git a/samples/grids/tree-grid/column-sorting-style/tsconfig.json b/samples/grids/tree-grid/column-sorting-style/tsconfig.json
new file mode 100644
index 0000000000..a15284fdc2
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "noImplicitReturns": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noImplicitAny": true,
+    "declarationDir": "dist/types",
+    "moduleResolution": "node",
+    "declaration": true,
+    "target": "es2015",
+    "module": "es2015",
+    "strict": true,
+    "strictNullChecks": false,
+    "baseUrl": ".",
+    "paths": {
+      "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+      "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
+      "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
+      "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
+      "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
+      "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
+      "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
+      "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
+      "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
+      "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
+      "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
+      "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
+      "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
+      "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
+      "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
+    }
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-style/tslint.json b/samples/grids/tree-grid/column-sorting-style/tslint.json
new file mode 100644
index 0000000000..e3b56e93a1
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/tslint.json
@@ -0,0 +1,54 @@
+{
+    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+    "linterOptions": {
+      "exclude": [
+        "node_modules/**/*.ts",
+        "**/odatajs-4.0.0.js",
+        "src/images/*.*"
+      ]
+    },
+    "rules": {
+      "curly": [false, "ignore-same-line"],
+      "jsx-no-lambda": false,
+      "jsx-self-close": false,
+      "jsx-wrap-multiline": false,
+      "max-classes-per-file": [true, 10],
+      "member-ordering": false,
+      "no-console": false,
+      "no-string-literal": false,
+      "no-unused-vars": false,
+      "no-useless-constructor": false,
+      "no-trailing-whitespace": false,
+      "no-var": false,
+      "no-var-requires": false,
+      "no-var-keyword": false,
+      "ordered-imports": false,
+      "object-literal-sort-keys": false,
+      "object-literal-shorthand": false,
+      "only-arrow-functions": false,
+      "prefer-const": false,
+      "prefer-for-of": false,
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/type-annotation-spacing": "off"
+    },
+    "jsRules": {
+      "curly": [false, "ignore-same-line"],
+      "jsx-no-lambda": false,
+      "jsx-self-close": false,
+      "jsx-wrap-multiline": false,
+      "max-classes-per-file": [true, 10],
+      "no-console": false,
+      "no-unused-vars": false,
+      "no-useless-constructor": false,
+      "no-var-requires": false,
+      "object-literal-sort-keys": false,
+      "object-literal-shorthand": false,
+      "only-arrow-functions": false,
+      "ordered-imports": false,
+      "prefer-const": false,
+      "prefer-for-of": false,
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-useless-constructor": "off"
+    }
+  }
\ No newline at end of file
diff --git a/samples/grids/tree-grid/column-sorting-style/webpack.config.js b/samples/grids/tree-grid/column-sorting-style/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/grids/tree-grid/column-sorting-style/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+    const nodeEnv = process.env.NODE_ENV || 'development';
+    const isProd = nodeEnv === 'production';
+    const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+    console.log(">> webpack nodeEnv=" + nodeEnv);
+    console.log(">> webpack isProd=" + isProd);
+    console.log(">> webpack isLegacy=" + isLegacy);
+    const presets = [
+        ["@babel/preset-env", {
+            "useBuiltIns": "usage",
+            "corejs": 3,
+            "targets": {
+                "browsers": isLegacy ? ["defaults"] : [
+                    "last 2 Chrome versions",
+                    "last 2 Safari versions",
+                    "last 2 iOS versions",
+                    "last 2 Firefox versions",
+                    "last 2 Edge versions"]
+            }
+        }],
+        "@babel/preset-typescript"
+    ];
+
+    return {
+        entry: isLegacy ? [
+            path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+            path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+            path.resolve(__dirname, 'src')
+        ] : path.resolve(__dirname, 'src'),
+        devtool: isProd ? false : 'source-map',
+        output: {
+            filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+            globalObject: 'this',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        resolve: {
+            mainFields: ['esm2015', 'module', 'main'],
+            extensions: ['.ts', '.js', '.json'],
+            plugins: [new TsconfigPathsPlugin({
+                configFile: './tsconfig.json',
+                extensions: ['.ts', '.js'],
+                mainFields: ['esm2015', 'module', 'main']
+            })]
+        },
+
+        module: {
+            rules: [
+                { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+                { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+                { test: /\.xml$/, use: ['xml-loader'] },
+                { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+                {
+                    test: /worker\.(ts|js)$/,
+                    use: [
+                        { loader: 'worker-loader' },
+                        {
+                            loader: 'babel-loader', options: {
+                                "compact": isProd ? true : false,
+                                "presets": presets,
+                                "plugins": [
+                                    "@babel/plugin-proposal-class-properties",
+                                    "@babel/plugin-transform-runtime"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(ts|js)$/, loader: 'babel-loader',
+                    options: {
+                        "compact": isProd ? true : false,
+                        "presets": presets,
+                        "plugins": [
+                            "@babel/plugin-proposal-class-properties",
+                            "@babel/plugin-transform-runtime"
+                        ]
+                    },
+                    exclude:
+                        function (modulePath) {
+                            return /node_modules/.test(modulePath) &&
+                                !/igniteui-webcomponents/.test(modulePath) &&
+                                !/lit-html/.test(modulePath);
+                        }
+                }],
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+            }),
+            new HtmlWebpackPlugin({
+                title: 'for-cs',
+                template: 'index.html'
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ]
+    };
+};