+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/grid/cell-merge-custom-sample/index.html b/samples/grids/grid/cell-merge-custom-sample/index.html
new file mode 100644
index 000000000..a4f9df687
--- /dev/null
+++ b/samples/grids/grid/cell-merge-custom-sample/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/grid/cell-merge/index.html b/samples/grids/grid/cell-merge/index.html
new file mode 100644
index 000000000..d59ec8ff9
--- /dev/null
+++ b/samples/grids/grid/cell-merge/index.html
@@ -0,0 +1,49 @@
+
+
+
+ 
`;
+ }
+ return html`
`;
+ };
+}
+
+new Sample();
diff --git a/samples/grids/grid/cell-merge/tsconfig.json b/samples/grids/grid/cell-merge/tsconfig.json
new file mode 100644
index 000000000..ae430f2a8
--- /dev/null
+++ b/samples/grids/grid/cell-merge/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "noImplicitAny": true,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+ "strict": true,
+ "strictNullChecks": false,
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid/cell-merge/tslint.json b/samples/grids/grid/cell-merge/tslint.json
new file mode 100644
index 000000000..18e202b1f
--- /dev/null
+++ b/samples/grids/grid/cell-merge/tslint.json
@@ -0,0 +1,53 @@
+{
+ "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+ "linterOptions": {
+ "exclude": [
+ "node_modules/**/*.ts",
+ "**/odatajs-4.0.0.js",
+ "src/images/*.*"
+ ]
+ },
+ "rules": {
+ "only-arrow-functions": false,
+ "jsx-self-close": false,
+ "jsx-wrap-multiline": false,
+ "no-var-requires": false,
+ "no-var": false,
+ "no-var-keyword": false,
+ "no-console": false,
+ "no-string-literal": false,
+ "no-unused-vars": false,
+ "@typescript-eslint/no-unused-vars": "off",
+ "jsx-no-lambda": false,
+ "ordered-imports": false,
+ "object-literal-sort-keys": false,
+ "object-literal-shorthand": false,
+ "member-ordering": false,
+ "curly": [false, "ignore-same-line"],
+ "max-classes-per-file": [true, 10],
+ "prefer-const": false,
+ "prefer-for-of": false,
+ "no-useless-constructor": false,
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/type-annotation-spacing": "off"
+ },
+ "jsRules": {
+ "only-arrow-functions": false,
+ "jsx-self-close": false,
+ "jsx-wrap-multiline": false,
+ "no-var-requires": false,
+ "no-console": false,
+ "no-unused-vars": false,
+ "@typescript-eslint/no-unused-vars": "off",
+ "jsx-no-lambda": false,
+ "ordered-imports": false,
+ "object-literal-sort-keys": false,
+ "object-literal-shorthand": false,
+ "curly": [false, "ignore-same-line"],
+ "max-classes-per-file": [true, 10],
+ "prefer-const": false,
+ "prefer-for-of": false,
+ "no-useless-constructor": false,
+ "@typescript-eslint/no-useless-constructor": "off"
+ }
+ }
\ No newline at end of file
diff --git a/samples/grids/grid/cell-merge/webpack.config.js b/samples/grids/grid/cell-merge/webpack.config.js
new file mode 100644
index 000000000..3813144cf
--- /dev/null
+++ b/samples/grids/grid/cell-merge/webpack.config.js
@@ -0,0 +1,107 @@
+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-transform-class-static-block",
+ "@babel/plugin-transform-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ }
+ }
+ ]
+ },
+ {
+ test: /\.(ts|js)$/, loader: 'babel-loader',
+ options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-transform-class-static-block",
+ "@babel/plugin-transform-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/grid/cell-selection-mode/package.json b/samples/grids/grid/cell-selection-mode/package.json
index 7c1e60604..c6dfe24e1 100644
--- a/samples/grids/grid/cell-selection-mode/package.json
+++ b/samples/grids/grid/cell-selection-mode/package.json
@@ -25,7 +25,7 @@
"babel-runtime": "^6.26.0",
"igniteui-webcomponents": "^6.3.1",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/cell-selection-style/package.json b/samples/grids/grid/cell-selection-style/package.json
index a57babf5c..94dc96b64 100644
--- a/samples/grids/grid/cell-selection-style/package.json
+++ b/samples/grids/grid/cell-selection-style/package.json
@@ -24,7 +24,7 @@
"dependencies": {
"babel-runtime": "^6.26.0",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/change-icons-custom/package.json b/samples/grids/grid/change-icons-custom/package.json
index 34ab75e9f..699785fb6 100644
--- a/samples/grids/grid/change-icons-custom/package.json
+++ b/samples/grids/grid/change-icons-custom/package.json
@@ -28,7 +28,7 @@
"core-js": "^3.6.5",
"igniteui-webcomponents": "^6.3.1",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/clipboard-operations/package.json b/samples/grids/grid/clipboard-operations/package.json
index 34ab75e9f..699785fb6 100644
--- a/samples/grids/grid/clipboard-operations/package.json
+++ b/samples/grids/grid/clipboard-operations/package.json
@@ -28,7 +28,7 @@
"core-js": "^3.6.5",
"igniteui-webcomponents": "^6.3.1",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-auto-sizing/package.json b/samples/grids/grid/column-auto-sizing/package.json
index a57babf5c..94dc96b64 100644
--- a/samples/grids/grid/column-auto-sizing/package.json
+++ b/samples/grids/grid/column-auto-sizing/package.json
@@ -24,7 +24,7 @@
"dependencies": {
"babel-runtime": "^6.26.0",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-collapsible-groups/package.json b/samples/grids/grid/column-collapsible-groups/package.json
index a57babf5c..94dc96b64 100644
--- a/samples/grids/grid/column-collapsible-groups/package.json
+++ b/samples/grids/grid/column-collapsible-groups/package.json
@@ -24,7 +24,7 @@
"dependencies": {
"babel-runtime": "^6.26.0",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-data-types/package.json b/samples/grids/grid/column-data-types/package.json
index a57babf5c..94dc96b64 100644
--- a/samples/grids/grid/column-data-types/package.json
+++ b/samples/grids/grid/column-data-types/package.json
@@ -24,7 +24,7 @@
"dependencies": {
"babel-runtime": "^6.26.0",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-hiding-options/package.json b/samples/grids/grid/column-hiding-options/package.json
index a57babf5c..94dc96b64 100644
--- a/samples/grids/grid/column-hiding-options/package.json
+++ b/samples/grids/grid/column-hiding-options/package.json
@@ -24,7 +24,7 @@
"dependencies": {
"babel-runtime": "^6.26.0",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-hiding-toolbar-style/package.json b/samples/grids/grid/column-hiding-toolbar-style/package.json
index a57babf5c..94dc96b64 100644
--- a/samples/grids/grid/column-hiding-toolbar-style/package.json
+++ b/samples/grids/grid/column-hiding-toolbar-style/package.json
@@ -24,7 +24,7 @@
"dependencies": {
"babel-runtime": "^6.26.0",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-hiding-toolbar/package.json b/samples/grids/grid/column-hiding-toolbar/package.json
index a57babf5c..94dc96b64 100644
--- a/samples/grids/grid/column-hiding-toolbar/package.json
+++ b/samples/grids/grid/column-hiding-toolbar/package.json
@@ -24,7 +24,7 @@
"dependencies": {
"babel-runtime": "^6.26.0",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-moving-options/package.json b/samples/grids/grid/column-moving-options/package.json
index 7c1e60604..c6dfe24e1 100644
--- a/samples/grids/grid/column-moving-options/package.json
+++ b/samples/grids/grid/column-moving-options/package.json
@@ -25,7 +25,7 @@
"babel-runtime": "^6.26.0",
"igniteui-webcomponents": "^6.3.1",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-moving-styles/package.json b/samples/grids/grid/column-moving-styles/package.json
index 7c1e60604..c6dfe24e1 100644
--- a/samples/grids/grid/column-moving-styles/package.json
+++ b/samples/grids/grid/column-moving-styles/package.json
@@ -25,7 +25,7 @@
"babel-runtime": "^6.26.0",
"igniteui-webcomponents": "^6.3.1",
"igniteui-webcomponents-core": "6.2.1",
- "igniteui-webcomponents-grids": "6.0.3",
+ "igniteui-webcomponents-grids": "6.2.0",
"igniteui-webcomponents-inputs": "6.2.1",
"igniteui-webcomponents-layouts": "6.2.1",
"lit-html": "^3.3.1",
diff --git a/samples/grids/grid/column-pinning-both-sides/.prettierrc b/samples/grids/grid/column-pinning-both-sides/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/grids/grid/column-pinning-both-sides/.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/grid/column-pinning-both-sides/ReadMe.md b/samples/grids/grid/column-pinning-both-sides/ReadMe.md
new file mode 100644
index 000000000..6a8ddf2c7
--- /dev/null
+++ b/samples/grids/grid/column-pinning-both-sides/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Clipboard Operations feature using [Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/grid/column-pinning-both-sides/index.html b/samples/grids/grid/column-pinning-both-sides/index.html
new file mode 100644
index 000000000..8d4fbd7d0
--- /dev/null
+++ b/samples/grids/grid/column-pinning-both-sides/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-merge-custom-sample/index.html b/samples/grids/hierarchical-grid/cell-merge-custom-sample/index.html
new file mode 100644
index 000000000..c5bf78965
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-merge-custom-sample/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/cell-merge/index.html b/samples/grids/hierarchical-grid/cell-merge/index.html
new file mode 100644
index 000000000..d4aaed236
--- /dev/null
+++ b/samples/grids/hierarchical-grid/cell-merge/index.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/hierarchical-grid/column-pinning-both-sides/index.html b/samples/grids/hierarchical-grid/column-pinning-both-sides/index.html
new file mode 100644
index 000000000..47de0b643
--- /dev/null
+++ b/samples/grids/hierarchical-grid/column-pinning-both-sides/index.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/tree-grid/cell-merge-custom-sample/index.html b/samples/grids/tree-grid/cell-merge-custom-sample/index.html
new file mode 100644
index 000000000..758cd2b8b
--- /dev/null
+++ b/samples/grids/tree-grid/cell-merge-custom-sample/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/tree-grid/cell-merge/index.html b/samples/grids/tree-grid/cell-merge/index.html
new file mode 100644
index 000000000..f3fae93fb
--- /dev/null
+++ b/samples/grids/tree-grid/cell-merge/index.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/grids/tree-grid/column-pinning-both-sides/index.html b/samples/grids/tree-grid/column-pinning-both-sides/index.html
new file mode 100644
index 000000000..f759b44cd
--- /dev/null
+++ b/samples/grids/tree-grid/column-pinning-both-sides/index.html
@@ -0,0 +1,55 @@
+
+
+
+