diff --git a/live-editing/configs/FinancialChartConfigGenerator.ts b/live-editing/configs/FinancialChartConfigGenerator.ts
index 0ac69fdbf8..f71cb3209a 100644
--- a/live-editing/configs/FinancialChartConfigGenerator.ts
+++ b/live-editing/configs/FinancialChartConfigGenerator.ts
@@ -13,7 +13,7 @@ import { FinancialChartHighVolumeComponent} from "../../src/app/charts/financial
 import { FinancialChartIndicatorTypesComponent} from "../../src/app/charts/financial-chart/indicator-types/financial-chart-indicator-types.component";
 import { FinancialChartMultipleDataComponent} from "../../src/app/charts/financial-chart/multiple-data/financial-chart-multiple-data.component";
 import { FinancialChartMultipleFeedsComponent } from "../../src/app/charts/financial-chart/multiple-feeds/financial-chart-multiple-feeds.component";
-import { FinancialChartOverviewComponent} from "../../src/app/charts/financial-chart/overview/financial-chart-overview-sample.component";
+import { FinancialChartOverviewComponent} from "../../src/app/charts/financial-chart/overview/financial-chart-overview.component";
 import { FinancialChartPanesComponent } from "../../src/app/charts/financial-chart/panes/financial-chart-panes.component";
 import { FinancialChartPerformanceComponent } from "../../src/app/charts/financial-chart/performance/financial-chart-performance.component";
 import { FinancialDataService } from "../../src/app/charts/financial-chart/services/financial-data.service";
diff --git a/live-editing/configs/GeoMapConfigGenerator.ts b/live-editing/configs/GeoMapConfigGenerator.ts
index a2c613ff03..96a1137721 100644
--- a/live-editing/configs/GeoMapConfigGenerator.ts
+++ b/live-editing/configs/GeoMapConfigGenerator.ts
@@ -148,7 +148,7 @@ export class GeoMapConfigGenerator extends BaseConfigGenerator {
         configs.push(this.getConfig(
                 MapDisplayImageryHeatTilesComponent,
                 [IgxGeographicMapModule], null,
-                ["/src/app/maps/heatworker.worker.ts",
+                ["/src/app/maps/heatmap.worker.ts",
                  "/src/assets/Shapes/AmericanCities.shp",
                  "src/assets/Shapes/AmericanCities.dbf"]));
 
diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts
index 6682d22a2c..288f86dc80 100644
--- a/live-editing/configs/GridConfigGenerator.ts
+++ b/live-editing/configs/GridConfigGenerator.ts
@@ -28,27 +28,27 @@ import {
     IgxToastModule,
     IgxTooltipModule
 } from "igniteui-angular";
+// tslint:disable:max-line-length
+import { CustomGridPagingStyleSample } from "../../src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component";
 import {
     GridBatchEditingSampleComponent
 } from "../../src/app/grid/grid-batch-editing/grid-batch-editing-sample.component";
 import { GridWithTransactionsComponent } from "../../src/app/grid/grid-batch-editing/grid-transaction.component";
 import { GridComponent } from "../../src/app/grid/grid-boston-marathon/grid.component";
+import { GridClipboardSampleComponent } from "../../src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component";
 import {
     GridColumnHidingSampleComponent
 } from "../../src/app/grid/grid-column-hiding-sample/grid-column-hiding-sample.component";
 import {
     GridColumnHidingToolbarSampleComponent
 } from "../../src/app/grid/grid-column-hiding-toolbar-sample/grid-column-hiding-toolbar-sample.component";
-// tslint:disable-next-line:max-line-length
 import { GridCompositeDataComponent } from "../../src/app/grid/grid-composite-data-binding/grid-composite-data.component";
 import {
     GridConditionalCellStyleComponent
 } from "../../src/app/grid/grid-conditional-cell-style/grid-conditional-cell-style.component";
 import { ContextmenuComponent } from "../../src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component";
-// tslint:disable-next-line: max-line-length
 import { GridContextmenuSampleComponent } from "../../src/app/grid/grid-contextmenu-sample/grid-contextmenu-sample.component";
 import { GridCustomFilteringComponent } from "../../src/app/grid/grid-custom-filtering/grid-custom-filtering.component";
-// tslint:disable-next-line: max-line-length
 import { GridCustomKBNavigationComponent } from "../../src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component";
 import {
     GridDisplayDensitySampleComponent
@@ -75,20 +75,12 @@ import { GridMovingSampleComponent } from "../../src/app/grid/grid-moving-sample
 import {
     GridMovingStyledSampleComponent
 } from "../../src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component";
-
-// tslint:disable-next-line: max-line-length
+import { GridMRLCustomNavigationComponent } from "../../src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component";
 import { GridMultiCellSelectionStyleComponent } from "../../src/app/grid/grid-multi-cell-selection-style/grid-multi-cell-selection-style.component";
-// tslint:disable-next-line:max-line-length
 import { GridMultiCellSelectionComponent } from "../../src/app/grid/grid-multi-cell-selection/grid-multi-cell-selection.component";
 import {
     GridMultiRowLayoutConfigurationComponent
 } from "../../src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component";
-
-// tslint:disable-next-line: max-line-length
-import { GridMRLCustomNavigationComponent } from "../../src/app/grid/grid-mrl-custom-navigation/grid-mrl-custom-navigation.component";
-
-// tslint:disable-next-line: max-line-length
-import { CustomGridPagingStyleSample } from "../../src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component";
 import { GridMultiRowLayoutComponent } from "../../src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component";
 import { GridNestedDataBindComponent } from "../../src/app/grid/grid-nested-data-binding/grid-nested-data-bind";
 import { PagingSampleComponent } from "../../src/app/grid/grid-paging-sample/grid-paging-sample.component";
@@ -127,7 +119,10 @@ import { GridToolbarSample1Component } from "../../src/app/grid/grid-toolbar-sam
 import { GridToolbarSample2Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component";
 import { GridToolbarSample3Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component";
 import { GridToolbarSample4Component } from "../../src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component";
-import { GridToolbarStyleComponent } from "../../src/app/grid/grid-toolbar-style/grid-toolbar-style.component"
+import { GridToolbarStyleComponent } from "../../src/app/grid/grid-toolbar-style/grid-toolbar-style.component";
+import {
+    GridMultiColumnHeaderTemplateComponent
+} from "../../src/app/grid/multi-column-header-template/multi-column-header-template";
 import { GridMultiColumnHeadersComponent } from "../../src/app/grid/multi-column-headers/multi-column-headers";
 import { DataService } from "../../src/app/grid/services/data.service";
 import { RemoteFilteringService } from "../../src/app/grid/services/remoteFilteringService";
@@ -136,6 +131,7 @@ import { RemoteServiceVirt } from "../../src/app/grid/services/remoteService";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
+// tslint:enable:max-line-length
 
 export class GridConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
@@ -755,6 +751,26 @@ export class GridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: GridMultiColumnHeaderTemplateComponent,
+            additionalFiles: ["/src/app/grid/multi-column-header-template/data.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [GridMultiColumnHeaderTemplateComponent, IgxGridModule],
+                ngDeclarations: [GridMultiColumnHeaderTemplateComponent],
+                ngImports: [IgxGridModule]
+            })
+        }));
+
+        configs.push(new Config({
+            component: GridClipboardSampleComponent,
+            additionalFiles: ["/src/app/data/nwindData.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [GridClipboardSampleComponent, IgxGridModule, IgxSwitchModule],
+                ngDeclarations: [GridClipboardSampleComponent],
+                ngImports: [IgxGridModule, IgxSwitchModule]
+            })
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts
index 74cc0b7c15..7e2a92fc2a 100644
--- a/live-editing/configs/HierarchicalGridConfigGenerator.ts
+++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts
@@ -1,4 +1,5 @@
 // tslint:disable:max-line-length
+import { HttpClientModule } from "@angular/common/http";
 import {
     IgxButtonGroupModule,
     IgxButtonModule,
@@ -39,6 +40,7 @@ import { HGridCustomFilteringSampleComponent } from "../../src/app/hierarchical-
 import { HGridFilteringSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-filtering/hierarchical-grid-filtering.component";
 import { HierarchicalGridLoDSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-lod/hierarchical-grid-lod.component";
 import { HGridMultiCellStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-multi-cell-style/hierarchical-grid-multi-cell-style.component";
+import { HGridMultiHeaderTemplateSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component";
 import { HGridMultiHeadersSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component";
 import { HGridPagingStyleSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component";
 import { HGridPagingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-paging/hierarchical-grid-paging.component";
@@ -222,9 +224,9 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             additionalFiles: ["/src/app/hierarchical-grid/hierarchical-grid-paging/remotePagingService.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: [IgxHierarchicalGridModule, HGridRemotePagingSampleComponent],
+                imports: [IgxHierarchicalGridModule, HGridRemotePagingSampleComponent, HttpClientModule],
                 ngDeclarations: [HGridRemotePagingSampleComponent],
-                ngImports: [IgxHierarchicalGridModule]
+                ngImports: [IgxHierarchicalGridModule, HttpClientModule]
             }),
             component: HGridRemotePagingSampleComponent
         }));
@@ -433,6 +435,16 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/hierarchical-grid/"
         }));
 
+        configs.push(new Config({
+            additionalFiles: ["/src/app/hierarchical-grid/data.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxHierarchicalGridModule, HGridMultiHeaderTemplateSampleComponent],
+                ngDeclarations: [HGridMultiHeaderTemplateSampleComponent],
+                ngImports: [IgxHierarchicalGridModule]
+            }),
+            component: HGridMultiHeaderTemplateSampleComponent
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/PieChartConfigGenerator.ts b/live-editing/configs/PieChartConfigGenerator.ts
index d380659088..0106b3df82 100644
--- a/live-editing/configs/PieChartConfigGenerator.ts
+++ b/live-editing/configs/PieChartConfigGenerator.ts
@@ -3,12 +3,12 @@
 // tslint:disable:max-line-length
 // tslint:disable:member-ordering
 // tslint:disable:prefer-const
-import { IgxPieChartComponent } from "igniteui-angular-charts/ES5/igx-pie-chart-component";
+
 import { IgxPieChartModule } from "igniteui-angular-charts/ES5/igx-pie-chart-module";
 import { IgxItemLegendModule } from "igniteui-angular-charts/ES5/igx-item-legend-module";
 import { IgxLegendModule } from "igniteui-angular-charts/ES5/igx-legend-module";
 
-import { PieChartDataSampleComponent } from "../../src/app/charts/pie-chart/pie-chart-data-sample/pie-chart-data-sample.component";
+import { PieChartDataSampleComponent } from "../../src/app/charts/pie-chart/pie-chart-overview/pie-chart-overview.component";
 import { PieChartExplosionComponent } from "../../src/app/charts/pie-chart/pie-chart-explosion/pie-chart-explosion.component";
 import { PieChartLegendComponent } from "../../src/app/charts/pie-chart/pie-chart-legend/pie-chart-legend.component";
 import { PieChartOthersComponent } from "../../src/app/charts/pie-chart/pie-chart-others/pie-chart-others.component";
@@ -24,8 +24,6 @@ export class PieChartConfigGenerator extends BaseConfigGenerator {
         super(DependenciesType.Charts, "/charts/pie-chart/");
     }
 
-// export class PieChartConfigGenerator implements IConfigGenerator {
-
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
diff --git a/live-editing/configs/TabBarConfigGenerator.ts b/live-editing/configs/TabBarConfigGenerator.ts
index 3c42f08217..d6220c765a 100644
--- a/live-editing/configs/TabBarConfigGenerator.ts
+++ b/live-editing/configs/TabBarConfigGenerator.ts
@@ -1,9 +1,14 @@
 /* tslint:disable:object-literal-sort-keys */
 import { Router, RouterModule, Routes } from "@angular/router";
-import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule,
-    IgxIconModule, IgxListModule, IgxRippleModule } from "igniteui-angular";
+import { IgxAvatarModule, IgxBottomNavModule, IgxButtonModule, IgxGridModule,
+    IgxIconModule, IgxListModule, IgxRippleModule, IgxSelectModule } from "igniteui-angular";
 import { TabbarSample1Component } from "../../src/app/layouts/tabbar/tabbar-sample-1/tabbar-sample-1.component";
 import { TabbarSample2Component } from "../../src/app/layouts/tabbar/tabbar-sample-2/tabbar-sample-2.component";
+import {
+    BottomNavRoutingView1Component,
+    BottomNavRoutingView2Component,
+    BottomNavRoutingView3Component,
+    TabbarSample3Component } from "../../src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component";
 import { TabbarComponent } from "../../src/app/layouts/tabbar/tabbar.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
@@ -54,6 +59,33 @@ export class TabBarConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/tabbar/"
         }));
 
+        // tabbar sample 3
+        configs.push(new Config({
+            component: TabbarSample3Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [
+                    Router, RouterModule, TabbarSample3Component, IgxBottomNavModule, IgxGridModule,
+                    IgxSelectModule, BottomNavRoutingView1Component, BottomNavRoutingView2Component,
+                    BottomNavRoutingView3Component
+                ],
+                ngDeclarations: [
+                    TabbarSample3Component, BottomNavRoutingView1Component, BottomNavRoutingView2Component,
+                    BottomNavRoutingView3Component
+                ],
+                ngImports: [
+                    IgxBottomNavModule, IgxGridModule, IgxSelectModule,
+                    `
+                    RouterModule.forRoot([
+                        { path: 'arrivals', component: BottomNavRoutingView1Component },
+                        { path: 'departures', component: BottomNavRoutingView2Component },
+                        { path: 'canceled', component: BottomNavRoutingView3Component }
+                    ])
+                    `
+                ]
+            }),
+            shortenComponentPathBy: "/layouts/tabbar/"
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/TabsConfigGenerator.ts b/live-editing/configs/TabsConfigGenerator.ts
index 2f9b9166fd..e2b28dea04 100644
--- a/live-editing/configs/TabsConfigGenerator.ts
+++ b/live-editing/configs/TabsConfigGenerator.ts
@@ -1,7 +1,10 @@
 /* tslint:disable:object-literal-sort-keys */
+
+import { Router, RouterModule } from "@angular/router";
+
 import {
-    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxIconModule,
-    IgxNavbarModule, IgxRippleModule, IgxTabsModule
+    IgxAvatarModule, IgxButtonModule, IgxCardModule, IgxGridModule, IgxIconModule, IgxNavbarModule, IgxRippleModule,
+    IgxSelectModule, IgxTabsModule, IgxToggleModule
 } from "igniteui-angular";
 
 import { TabsSample1Component } from "../../src/app/layouts/tabs/tabs-sample-1/tabs-sample-1.component";
@@ -15,6 +18,11 @@ import { AppRouting2Module } from "../../src/app/layouts/tabs/tabs-sample-5/app.
 import { TabsSample5Component } from "../../src/app/layouts/tabs/tabs-sample-5/components/tabs-sample-5.component";
 import { TabsSample5Module } from "../../src/app/layouts/tabs/tabs-sample-5/tabs-sample-5.module";
 import { TabsRouting2Module } from "../../src/app/layouts/tabs/tabs-sample-5/tabs.routing2.module";
+import {
+    TabsRoutingView1Component,
+    TabsRoutingView2Component,
+    TabsRoutingView3Component,
+    TabsSample6Component } from "../../src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -102,6 +110,31 @@ export class TabsConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/layouts/tabs/"
         }));
 
+        configs.push(new Config({
+            component: TabsSample6Component,
+            appModuleConfig: new AppModuleConfig({
+                imports: [
+                    Router, RouterModule, TabsSample6Component, IgxGridModule, IgxSelectModule, IgxTabsModule,
+                    TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component
+                ],
+                ngDeclarations: [
+                    TabsSample6Component, TabsRoutingView1Component, TabsRoutingView2Component,
+                    TabsRoutingView3Component
+                ],
+                ngImports: [
+                    IgxGridModule, IgxSelectModule, IgxTabsModule,
+                    `
+                    RouterModule.forRoot([
+                        { path: 'arrivals', component: TabsRoutingView1Component },
+                        { path: 'departures', component: TabsRoutingView2Component },
+                        { path: 'canceled', component: TabsRoutingView3Component }
+                    ])
+                    `
+                ]
+            }),
+            shortenComponentPathBy: "/layouts/tabs/"
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/ThemingConfigGenerator.ts b/live-editing/configs/ThemingConfigGenerator.ts
index 362d12b9c0..2e7c4b02f0 100644
--- a/live-editing/configs/ThemingConfigGenerator.ts
+++ b/live-editing/configs/ThemingConfigGenerator.ts
@@ -2,7 +2,8 @@
 // tslint:disable:object-literal-sort-keys
 import { IgxButtonGroupModule, IgxButtonModule, IgxCalendarModule, IgxCardModule,
     IgxDatePickerModule, IgxDialogModule, IgxDropDownModule, IgxGridModule, IgxIconModule,
-    IgxInputGroupModule, IgxLayoutModule, IgxRippleModule, IgxSnackbarModule, IgxToggleModule } from "igniteui-angular";
+    IgxInputGroupModule, IgxLayoutModule, IgxRippleModule, IgxSelectModule, IgxSnackbarModule,
+    IgxToggleModule } from "igniteui-angular";
 import { DarkThemeSampleComponent } from "../../src/app/theming/dark-theme-sample/dark-theme-sample.component";
 import { DefaultThemeSampleComponent } from "../../src/app/theming/default-theme-sample/default-theme-sample.component";
 import { DisplayDensityComponent } from "../../src/app/theming/display-density/display-density.component";
@@ -29,13 +30,13 @@ export class ThemingConfigGenerator implements IConfigGenerator {
                 imports: [IgxDropDownModule,
                     IgxGridModule, IgxDialogModule, IgxSnackbarModule, IgxLayoutModule, ThemeChooserSampleComponent,
                     IgxCalendarModule, IgxToggleModule, IgxIconModule, IgxRippleModule, IgxButtonModule,
-                    IgxInputGroupModule, IgxDatePickerModule],
+                    IgxInputGroupModule, IgxDatePickerModule, IgxSelectModule],
                 ngDeclarations: [ThemeChooserSampleComponent],
                 ngImports: [IgxDropDownModule,
                     IgxDialogModule, IgxSnackbarModule, IgxLayoutModule,
                     IgxToggleModule, IgxIconModule, IgxRippleModule, IgxButtonModule,
                     IgxCalendarModule, IgxInputGroupModule, IgxDatePickerModule,
-                    IgxGridModule, IgxLayoutModule]
+                    IgxGridModule, IgxLayoutModule, IgxSelectModule]
             }),
             shortenComponentPathBy: "/theming/"
         }));
diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts
index 0ec26d26a9..94a03993f3 100644
--- a/live-editing/configs/TreeGridConfigGenerator.ts
+++ b/live-editing/configs/TreeGridConfigGenerator.ts
@@ -23,6 +23,7 @@ import {
 } from "igniteui-angular";
 import { TreeGridBatchEditingSampleComponent } from "../../src/app/tree-grid/tree-grid-batch-editing/tree-grid-batch-editing-sample.component";
 import { TreeGridChilddatakeySampleComponent } from "../../src/app/tree-grid/tree-grid-childdatakey-sample/tree-grid-childdatakey-sample.component";
+import { TreeGridClipboardSampleComponent } from "../../src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component";
 import { TreeGridColumnHidingSampleComponent } from "../../src/app/tree-grid/tree-grid-column-hiding-sample/tree-grid-column-hiding-sample.component";
 import { TreeGridColumnHidingToolbarSampleComponent } from "../../src/app/tree-grid/tree-grid-column-hiding-toolbar-sample/tree-grid-column-hiding-toolbar-sample.component";
 import { TreeGridColumnMovingSampleComponent } from "../../src/app/tree-grid/tree-grid-column-moving-sample/tree-grid-column-moving-sample.component";
@@ -48,6 +49,7 @@ import { TreeGridKBNavigationComponent } from "../../src/app/tree-grid/tree-grid
 import { TreeGridLoadOnDemandSampleComponent } from "../../src/app/tree-grid/tree-grid-load-on-demand-sample/tree-grid-load-on-demand-sample.component";
 import { TreeGridMultiCellSelectionStyleComponent } from "../../src/app/tree-grid/tree-grid-multi-cell-selection-style/tree-grid-multi-cell-selection-style.component";
 import { TreeGridMultiCellSelectionComponent } from "../../src/app/tree-grid/tree-grid-multi-cell-selection/tree-grid-multi-cell-selection.component";
+import { TreeGridMultiColumnHeaderTemplateSampleComponent } from "../../src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component";
 import { TreeGridMultiColumnHeadersSampleComponent } from "../../src/app/tree-grid/tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component";
 import { TreeGridPagingSampleComponent } from "../../src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component";
 import { TreeGridPagingStyleSampleComponent } from "../../src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component";
@@ -619,6 +621,30 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/tree-grid/"
         }));
 
+        // TreeGrid Multi Column Header Template sample
+        configs.push(new Config({
+            additionalFiles: ["/src/app/tree-grid/data/employees-flat-detailed.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxTreeGridModule, TreeGridMultiColumnHeaderTemplateSampleComponent],
+                ngDeclarations: [TreeGridMultiColumnHeaderTemplateSampleComponent],
+                ngImports: [IgxTreeGridModule]
+            }),
+            component: TreeGridMultiColumnHeaderTemplateSampleComponent,
+            shortenComponentPathBy: "/tree-grid/"
+        }));
+
+        // TreeGrid Clipboard actions sample
+        configs.push(new Config({
+            additionalFiles: ["/src/app/tree-grid/tree-grid-childdatakey-sample/data.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxTreeGridModule, TreeGridClipboardSampleComponent, IgxSwitchModule],
+                ngDeclarations: [TreeGridClipboardSampleComponent],
+                ngImports: [IgxTreeGridModule, IgxSwitchModule]
+            }),
+            component: TreeGridClipboardSampleComponent,
+            shortenComponentPathBy: "/tree-grid/"
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/ZoomSliderConfigGenerator.ts b/live-editing/configs/ZoomSliderConfigGenerator.ts
new file mode 100644
index 0000000000..ce78380cc3
--- /dev/null
+++ b/live-editing/configs/ZoomSliderConfigGenerator.ts
@@ -0,0 +1,49 @@
+/* tslint:disable */
+
+// Chart Modules
+import { IgxDataChartAnnotationModule } from "igniteui-angular-charts/ES5/igx-data-chart-annotation-module";
+import { IgxDataChartCategoryModule } from "igniteui-angular-charts/ES5/igx-data-chart-category-module";
+import { IgxDataChartCategoryCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-category-core-module";
+import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core-module";
+import { IgxDataChartInteractivityModule } from "igniteui-angular-charts/ES5/igx-data-chart-interactivity-module";
+import { IgxCategoryXAxisModule } from "igniteui-angular-charts/ES5/igx-category-x-axis-module";
+import { IgxCalloutLayerModule } from "igniteui-angular-charts/ES5/igx-callout-layer-module";
+import { IgxCrosshairLayerModule } from "igniteui-angular-charts/ES5/igx-crosshair-layer-module";
+import { IgxFinancialPriceSeriesModule } from "igniteui-angular-charts/ES5/igx-financial-price-series-module";
+import { IgxOrdinalTimeXAxisModule } from "igniteui-angular-charts/ES5/igx-ordinal-time-x-axis-module";
+import { IgxNumericYAxisModule } from "igniteui-angular-charts/ES5/igx-numeric-y-axis-module";
+
+// import { IgxZoomSliderModule } from "igniteui-angular-charts/ES5/igx-zoom-slider-module";
+import { IgxZoomSliderDynamicModule } from "igniteui-angular-charts/ES5/igx-zoom-slider-dynamic-module";
+
+import { StockDataService } from "../../src/app/charts/financial-chart/services/stock-data.service";
+import { ZoomSliderOverviewComponent } from "../../src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component";
+
+import { DependenciesType } from "../services/DependenciesType";
+import { BaseConfigGenerator } from "./core/BaseConfigGenerator";
+import { Config } from "./core/Config";
+
+export class ZoomSliderConfigGenerator extends BaseConfigGenerator {
+
+    constructor() {
+        super(DependenciesType.Charts, "/charts/zoomslider/");
+    }
+
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        // using simpler config instead of default/complex config
+
+        configs.push(this.getConfig(
+            ZoomSliderOverviewComponent,
+            [IgxZoomSliderDynamicModule, IgxNumericYAxisModule, IgxOrdinalTimeXAxisModule,
+             IgxCrosshairLayerModule, IgxCategoryXAxisModule, IgxCalloutLayerModule,
+             IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartCategoryCoreModule,
+             IgxDataChartAnnotationModule, IgxDataChartInteractivityModule,
+             IgxFinancialPriceSeriesModule],
+            [StockDataService], ["/src/app/charts/financial-chart/services/stock-data.service.ts"]));
+
+        return configs;
+    }
+
+}
diff --git a/live-editing/generators/ConfigGenerators.ts b/live-editing/generators/ConfigGenerators.ts
index c29b059087..282638150c 100644
--- a/live-editing/generators/ConfigGenerators.ts
+++ b/live-editing/generators/ConfigGenerators.ts
@@ -61,6 +61,7 @@ import { ToggleConfigGenerator } from "../configs/ToggleConfigGenerator";
 import { TooltipConfigGenerator } from "../configs/TooltipConfigGenerator";
 import { TreeGridConfigGenerator } from "../configs/TreeGridConfigGenerator";
 import { TreeGridFinjsConfigGenerator } from "../configs/TreeGridFinjsConfigGenerator";
+import { ZoomSliderConfigGenerator } from "../configs/ZoomSliderConfigGenerator";
 
 export const CONFIG_GENERATORS =
     [
@@ -73,6 +74,7 @@ export const CONFIG_GENERATORS =
         SparklineConfigGenerator,
         GaugesConfigGenerator,
         GeoMapConfigGenerator,
+        ZoomSliderConfigGenerator,
 
         // frameworks:
         DragAndDropConfigGenerator,
diff --git a/package-lock.json b/package-lock.json
index 5f2726e0ed..ab3e4bc634 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4348,7 +4348,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4369,12 +4370,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4395,7 +4398,8 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -4546,6 +4550,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4553,12 +4558,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4577,6 +4584,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4756,7 +4764,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4812,6 +4821,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4855,12 +4865,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/app/charts/charts-routes-data.ts b/src/app/charts/charts-routes-data.ts
index 4e4927a8d8..ced018d3ef 100644
--- a/src/app/charts/charts-routes-data.ts
+++ b/src/app/charts/charts-routes-data.ts
@@ -1,5 +1,4 @@
-// tslint:disable:object-literal-sort-keys
-// tslint:disable:max-line-length
+/* tslint:disable */
 
 export const chartsRoutesData = {
     // doughnut-chart
@@ -9,7 +8,7 @@ export const chartsRoutesData = {
     "doughnut-chart-legend": { displayName: "Doughnut Chart Legend", parentName: "Doughnut Chart" },
     "doughnut-chart-rings": { displayName: "Doughnut Chart Rings", parentName: "Doughnut Chart" },
     // pie-chart
-    "pie-chart-data-sample": { displayName: "Pie Chart Data Sample", parentName: "Pie Chart" },
+    "pie-chart-overview": { displayName: "Pie Chart Overview", parentName: "Pie Chart" },
     "pie-chart-explosion": { displayName: "Pie Chart Explosion", parentName: "Pie Chart" },
     "pie-chart-legend": { displayName: "Pie Chart Legend", parentName: "Pie Chart" },
     "pie-chart-others": { displayName: "Pie Chart Others Slice", parentName: "Pie Chart" },
@@ -27,7 +26,7 @@ export const chartsRoutesData = {
     "category-chart-tooltip-types": { displayName: "Category Chart Tooltip Types", parentName: "Category Chart" },
     "category-chart-trendline": { displayName: "Category Chart Trendline", parentName: "Category Chart" },
     // financial-chart
-    "financial-chart-overview-sample": { displayName: "Financial Chart Overview", parentName: "Financial Chart" },
+    "financial-chart-overview": { displayName: "Financial Chart Overview", parentName: "Financial Chart" },
     "financial-chart-performance": { displayName: "Financial Chart Performance", parentName: "Financial Chart" },
     "financial-chart-annotations": { displayName: "Financial Chart Annotations", parentName: "Financial Chart" },
     "financial-chart-titles": { displayName: "Financial Chart Titles", parentName: "Financial Chart" },
@@ -81,5 +80,7 @@ export const chartsRoutesData = {
     "sparkline-markers": { displayName: "Sparkline Markers", parentName: "Sparkline"},
     "sparkline-normal-range": { displayName: "Sparkline Normal Range", parentName: "Sparkline"},
     "sparkline-trendlines": { displayName: "Sparkline Trendlines", parentName: "Sparkline"},
-    "sparkline-unknown-values": { displayName: "Sparkline Unknown Values", parentName: "Sparkline"}
+    "sparkline-unknown-values": { displayName: "Sparkline Unknown Values", parentName: "Sparkline"},
+    // zoomslider-chart
+    "zoomslider-overview": { displayName: "Zoom Slider Overview", parentName: "Zoom Slider"}
 };
diff --git a/src/app/charts/charts-routing.module.ts b/src/app/charts/charts-routing.module.ts
index bc577ebb3b..de0af80cb9 100644
--- a/src/app/charts/charts-routing.module.ts
+++ b/src/app/charts/charts-routing.module.ts
@@ -1,13 +1,11 @@
-/* tslint:disable:object-literal-sort-keys */
-// tslint:disable:max-line-length
-// tslint:disable:member-ordering
+/* tslint:disable */
 
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { chartsRoutesData } from "./charts-routes-data";
 
-// category-chart
+// category-chart samples
 import { CategoryChartAnnotationsComponent } from "./category-chart/annotations/category-chart-annotations.component";
 import { CategoryChartAxisOptionsComponent } from "./category-chart/axis-options/category-chart-axis-options-sample.component";
 import { CategoryChartPerformanceSamplesModule } from "./category-chart/category-chart-performance-samples.module";
@@ -21,8 +19,7 @@ import { CategoryChartOverviewComponent } from "./category-chart/overview/catego
 import { CategoryChartTooltipTemplateComponent } from "./category-chart/tooltip-template/category-chart-tooltip-template.component";
 import { CategoryChartTooltipTypesComponent } from "./category-chart/tooltip-types/category-chart-tooltip-types.component";
 import { CategoryChartTrendlinesComponent } from "./category-chart/trendline/category-chart-trendlines.component";
-
-// data-chart
+// data-chart samples
 import { DataChartAxisAnnotationsComponent } from "./data-chart/data-chart-axis-annotations/data-chart-axis-annotations.component";
 import { DataChartAxisLocationsComponent } from "./data-chart/data-chart-axis-locations/data-chart-axis-locations.component";
 import { DataChartAxisSettingsComponent } from "./data-chart/data-chart-axis-settings/data-chart-axis-settings.component";
@@ -53,16 +50,14 @@ import { DataChartTypeScatterSeriesComponent } from "./data-chart/data-chart-typ
 import { DataChartTypeScatterShapeSeriesComponent } from "./data-chart/data-chart-type-scatter-shape-series/data-chart-type-scatter-shape-series.component";
 import { DataChartTypeStackedSeriesComponent } from "./data-chart/data-chart-type-stacked-series/data-chart-type-stacked-series.component";
 import { DataChartTypeValueOverlayComponent } from "./data-chart/data-chart-type-value-overlay/data-chart-type-value-overlay.component";
-
-// doughnut-chart
+// doughnut-chart samples
 import { DoughnutChartExplosionSampleComponent } from "./doughnut-chart/doughnut-chart-explosion-sample/doughnut-chart-explosion-sample.component";
 import { DoughnutChartLegendComponent } from "./doughnut-chart/doughnut-chart-legend/doughnut-chart-legend.component";
 import { DoughnutChartOverviewSampleComponent } from "./doughnut-chart/doughnut-chart-overview-sample/doughnut-chart-overview-sample.component";
 import { DoughnutChartRingsComponent } from "./doughnut-chart/doughnut-chart-rings/doughnut-chart-rings.component";
 import { DoughnutChartSamplesModule } from "./doughnut-chart/doughnut-chart-samples.module";
 import { DoughnutChartSelectionSampleComponent } from "./doughnut-chart/doughnut-chart-selection-sample/doughnut-chart-selection-sample.component";
-
-// financial-chart
+// financial-chart samples
 import { FinancialChartAnnotationsComponent } from "./financial-chart/annotations/financial-chart-annotations.component";
 import { FinancialChartAxisTypesComponent } from "./financial-chart/axis-types/financial-chart-axis-types.component";
 import { FinancialChartCustomIndicatorsComponent } from "./financial-chart/custom-indicators/financial-chart-custom-indicators.component";
@@ -72,7 +67,7 @@ import { FinancialChartHighVolumeComponent } from "./financial-chart/high-volume
 import { FinancialChartIndicatorTypesComponent } from "./financial-chart/indicator-types/financial-chart-indicator-types.component";
 import { FinancialChartMultipleDataComponent } from "./financial-chart/multiple-data/financial-chart-multiple-data.component";
 import { FinancialChartMultipleFeedsComponent } from "./financial-chart/multiple-feeds/financial-chart-multiple-feeds.component";
-import { FinancialChartOverviewComponent } from "./financial-chart/overview/financial-chart-overview-sample.component";
+import { FinancialChartOverviewComponent } from "./financial-chart/overview/financial-chart-overview.component";
 import { FinancialChartPanesComponent } from "./financial-chart/panes/financial-chart-panes.component";
 import { FinancialChartPerformanceComponent } from "./financial-chart/performance/financial-chart-performance.component";
 import { FinancialChartTimeBasedDataComponent } from "./financial-chart/time-based-data/financial-chart-time-based-data.component";
@@ -81,21 +76,29 @@ import { FinancialChartTooltipTemplateComponent } from "./financial-chart/toolti
 import { FinancialChartTooltipTypesComponent } from "./financial-chart/tooltip-types/financial-chart-tooltip-types.component";
 import { FinancialChartTrendlinesComponent } from "./financial-chart/trendlines/financial-chart-trendlines.component";
 import { FinancialChartVolumeTypeComponent } from "./financial-chart/volume-type/financial-chart-volume-type.component";
-
-import { PieChartDataSampleComponent } from "./pie-chart/pie-chart-data-sample/pie-chart-data-sample.component";
+// pie-chart samples
+import { PieChartDataSampleComponent } from "./pie-chart/pie-chart-overview/pie-chart-overview.component";
 import { PieChartExplosionComponent } from "./pie-chart/pie-chart-explosion/pie-chart-explosion.component";
 import { PieChartLegendComponent } from "./pie-chart/pie-chart-legend/pie-chart-legend.component";
 import { PieChartOthersComponent } from "./pie-chart/pie-chart-others/pie-chart-others.component";
 import { PieChartSamplesModule } from "./pie-chart/pie-chart-samples.module";
 import { PieChartSelectionComponent } from "./pie-chart/pie-chart-selection/pie-chart-selection.component";
-
+// sparkline-chart samples
 import { SparklineDisplayTypesComponent } from "./sparkline/sparkline-display-types/sparkline-display-types.component";
 import { SparklineMarkersComponent } from "./sparkline/sparkline-markers/sparkline-markers.component";
 import { SparklineNormalRangeComponent } from "./sparkline/sparkline-normal-range/sparkline-normal-range.component";
 import { SparklineTrendlinesComponent } from "./sparkline/sparkline-trendlines/sparkline-trendlines.component";
 import { SparklineUnknownValuesComponent } from "./sparkline/sparkline-unknown-values/sparkline-unknown-values.component";
+// zoomslider-chart samples
+import { ZoomSliderOverviewComponent } from "./zoomslider/zoomslider-overview/zoomslider-overview.component";
 
 export const chartsRoutes: Routes = [
+    //  ZoomSlider
+    {
+        component: ZoomSliderOverviewComponent,
+        data: chartsRoutesData["zoomslider-overview"],
+        path: "zoomslider-overview"
+    },
     // DoughnutChart
     {
         component: DoughnutChartExplosionSampleComponent,
@@ -125,8 +128,8 @@ export const chartsRoutes: Routes = [
     // PieChart
     {
         component: PieChartDataSampleComponent,
-        data: chartsRoutesData["pie-chart-data-sample"],
-        path: "pie-chart-data-sample"
+        data: chartsRoutesData["pie-chart-overview"],
+        path: "pie-chart-overview"
     },
     {
         component: PieChartExplosionComponent,
@@ -353,8 +356,8 @@ export const chartsRoutes: Routes = [
     // financial-chart
     {
         component: FinancialChartOverviewComponent,
-        data: chartsRoutesData["financial-chart-overview-sample"],
-        path: "financial-chart-overview-sample"
+        data: chartsRoutesData["financial-chart-overview"],
+        path: "financial-chart-overview"
     },
     {
         component: FinancialChartPerformanceComponent,
diff --git a/src/app/charts/charts.module.ts b/src/app/charts/charts.module.ts
index d1795bcdb7..6fa72afacc 100644
--- a/src/app/charts/charts.module.ts
+++ b/src/app/charts/charts.module.ts
@@ -1,8 +1,13 @@
+/* tslint:disable */
+
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { IgxSliderModule } from "igniteui-angular";
 import { IgxCategoryChartModule } from "igniteui-angular-charts/ES5/igx-category-chart-module";
+// import { IgxZoomSliderModule } from "igniteui-angular-charts/ES5/igx-zoom-slider-module";
+import { IgxZoomSliderDynamicModule } from "igniteui-angular-charts/ES5/igx-zoom-slider-dynamic-module";
+
 import { CategoryChartPerformanceSamplesModule } from "./category-chart/category-chart-performance-samples.module";
 import { CategoryChartSamplesModule } from "./category-chart/category-chart-samples.module";
 import { ChartsRoutingModule } from "./charts-routing.module";
@@ -11,6 +16,7 @@ import { DoughnutChartSamplesModule } from "./doughnut-chart/doughnut-chart-samp
 import { FinancialChartSamplesModule } from "./financial-chart/financial-chart-samples.module";
 import { PieChartSamplesModule } from "./pie-chart/pie-chart-samples.module";
 import { SparklineSamplesModule } from "./sparkline/sparkline-samples.module";
+import { ZoomSliderSamplesModule } from "./zoomslider/zoomslider-samples.module";
 
 @NgModule({
     imports: [
@@ -20,13 +26,15 @@ import { SparklineSamplesModule } from "./sparkline/sparkline-samples.module";
         CategoryChartPerformanceSamplesModule,
         ChartsRoutingModule,
         DataChartSamplesModule,
+        DoughnutChartSamplesModule,
         FinancialChartSamplesModule,
         PieChartSamplesModule,
-        DoughnutChartSamplesModule,
         SparklineSamplesModule,
-        ChartsRoutingModule,
+        ZoomSliderSamplesModule,
         IgxCategoryChartModule,
-        IgxSliderModule
+        IgxSliderModule,
+        IgxZoomSliderDynamicModule
+        // IgxZoomSliderModule
     ]
 })
 export class ChartsModule { }
diff --git a/src/app/charts/financial-chart/financial-chart-samples.module.ts b/src/app/charts/financial-chart/financial-chart-samples.module.ts
index 8056dda38a..a93f43e058 100644
--- a/src/app/charts/financial-chart/financial-chart-samples.module.ts
+++ b/src/app/charts/financial-chart/financial-chart-samples.module.ts
@@ -20,7 +20,7 @@ import { FinancialChartHighVolumeComponent } from "./high-volume/financial-chart
 import { FinancialChartIndicatorTypesComponent } from "./indicator-types/financial-chart-indicator-types.component";
 import { FinancialChartMultipleDataComponent } from "./multiple-data/financial-chart-multiple-data.component";
 import { FinancialChartMultipleFeedsComponent } from "./multiple-feeds/financial-chart-multiple-feeds.component";
-import { FinancialChartOverviewComponent } from "./overview/financial-chart-overview-sample.component";
+import { FinancialChartOverviewComponent } from "./overview/financial-chart-overview.component";
 import { FinancialChartPanesComponent } from "./panes/financial-chart-panes.component";
 import { FinancialChartPerformanceComponent } from "./performance/financial-chart-performance.component";
 import { FinancialDataService } from "./services/financial-data.service";
diff --git a/src/app/charts/financial-chart/overview/financial-chart-overview-sample.component.html b/src/app/charts/financial-chart/overview/financial-chart-overview.component.html
similarity index 100%
rename from src/app/charts/financial-chart/overview/financial-chart-overview-sample.component.html
rename to src/app/charts/financial-chart/overview/financial-chart-overview.component.html
diff --git a/src/app/charts/financial-chart/overview/financial-chart-overview-sample.component.scss b/src/app/charts/financial-chart/overview/financial-chart-overview.component.scss
similarity index 100%
rename from src/app/charts/financial-chart/overview/financial-chart-overview-sample.component.scss
rename to src/app/charts/financial-chart/overview/financial-chart-overview.component.scss
diff --git a/src/app/charts/financial-chart/overview/financial-chart-overview-sample.component.ts b/src/app/charts/financial-chart/overview/financial-chart-overview.component.ts
similarity index 93%
rename from src/app/charts/financial-chart/overview/financial-chart-overview-sample.component.ts
rename to src/app/charts/financial-chart/overview/financial-chart-overview.component.ts
index 59109b786d..75c1310cff 100644
--- a/src/app/charts/financial-chart/overview/financial-chart-overview-sample.component.ts
+++ b/src/app/charts/financial-chart/overview/financial-chart-overview.component.ts
@@ -4,9 +4,9 @@ import { FinancialDataService } from "../services/financial-data.service";
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [ FinancialDataService ],
-    selector: "app-financial-chart-overview-sample",
-    styleUrls: ["./financial-chart-overview-sample.component.scss"],
-    templateUrl: "./financial-chart-overview-sample.component.html"
+    selector: "app-financial-chart-overview",
+    styleUrls: ["./financial-chart-overview.component.scss"],
+    templateUrl: "./financial-chart-overview.component.html"
 })
 export class FinancialChartOverviewComponent {
 
diff --git a/src/app/charts/pie-chart/pie-chart-data-sample/pie-chart-data-sample.component.html b/src/app/charts/pie-chart/pie-chart-overview/pie-chart-overview.component.html
similarity index 100%
rename from src/app/charts/pie-chart/pie-chart-data-sample/pie-chart-data-sample.component.html
rename to src/app/charts/pie-chart/pie-chart-overview/pie-chart-overview.component.html
diff --git a/src/app/charts/pie-chart/pie-chart-data-sample/pie-chart-data-sample.component.scss b/src/app/charts/pie-chart/pie-chart-overview/pie-chart-overview.component.scss
similarity index 100%
rename from src/app/charts/pie-chart/pie-chart-data-sample/pie-chart-data-sample.component.scss
rename to src/app/charts/pie-chart/pie-chart-overview/pie-chart-overview.component.scss
diff --git a/src/app/charts/pie-chart/pie-chart-data-sample/pie-chart-data-sample.component.ts b/src/app/charts/pie-chart/pie-chart-overview/pie-chart-overview.component.ts
similarity index 73%
rename from src/app/charts/pie-chart/pie-chart-data-sample/pie-chart-data-sample.component.ts
rename to src/app/charts/pie-chart/pie-chart-overview/pie-chart-overview.component.ts
index 07cca46e5a..cde42d1458 100644
--- a/src/app/charts/pie-chart/pie-chart-data-sample/pie-chart-data-sample.component.ts
+++ b/src/app/charts/pie-chart/pie-chart-overview/pie-chart-overview.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from "@angular/core";
 
 @Component({
-  selector: "app-pie-chart-data-sample",
-  styleUrls: ["./pie-chart-data-sample.component.scss"],
-  templateUrl: "./pie-chart-data-sample.component.html"
+  selector: "app-pie-chart-overview",
+  styleUrls: ["./pie-chart-overview.component.scss"],
+  templateUrl: "./pie-chart-overview.component.html"
 })
 export class PieChartDataSampleComponent {
 
diff --git a/src/app/charts/pie-chart/pie-chart-samples.module.ts b/src/app/charts/pie-chart/pie-chart-samples.module.ts
index 548925a812..6d7147584f 100644
--- a/src/app/charts/pie-chart/pie-chart-samples.module.ts
+++ b/src/app/charts/pie-chart/pie-chart-samples.module.ts
@@ -1,9 +1,7 @@
-/* tslint:disable:object-literal-sort-keys */
-// tslint:disable:max-line-length
-// tslint:disable:member-ordering
+/* tslint:disable */
 
 import { CommonModule } from "@angular/common";
-import { ModuleWithProviders, NgModule } from "@angular/core";
+import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 
 import { IgxButtonModule } from "igniteui-angular";
@@ -11,7 +9,7 @@ import { IgxItemLegendModule } from "igniteui-angular-charts/ES5/igx-item-legend
 import { IgxLegendModule } from "igniteui-angular-charts/ES5/igx-legend-module";
 import { IgxPieChartModule } from "igniteui-angular-charts/ES5/igx-pie-chart-module";
 
-import { PieChartDataSampleComponent } from "./pie-chart-data-sample/pie-chart-data-sample.component";
+import { PieChartDataSampleComponent } from "./pie-chart-overview/pie-chart-overview.component";
 import { PieChartExplosionComponent } from "./pie-chart-explosion/pie-chart-explosion.component";
 import { PieChartLegendComponent } from "./pie-chart-legend/pie-chart-legend.component";
 import { PieChartOthersComponent } from "./pie-chart-others/pie-chart-others.component";
diff --git a/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.html b/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.html
new file mode 100644
index 0000000000..571fa45840
--- /dev/null
+++ b/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.html
@@ -0,0 +1,60 @@
+<div class="container" width="100%" height="calc(100% - 200px)">
+
+    <igx-data-chart #mainChart name="mainChart"
+    width="100%"
+    height="calc(100% - 160px)"
+    isHorizontalZoomEnabled="true"
+    isVerticalZoomEnabled="false"
+    [dataSource]="data" >
+        <igx-ordinal-time-x-axis #xAxis name="xAxis" dateTimeMemberPath="time">
+        </igx-ordinal-time-x-axis>
+        <igx-numeric-y-axis #yAxis name="yAxis" labelLocation="OutsideLeft"
+            title="yAxis" labelExtent="40" >
+        </igx-numeric-y-axis>
+        <igx-financial-price-series
+            name="series2"
+            [xAxis]="xAxis"
+            [yAxis]="yAxis"
+            highMemberPath="high"
+            lowMemberPath="low"
+            closeMemberPath="close"
+            openMemberPath="open"
+            volumeMemberPath="volume">
+        </igx-financial-price-series>
+    </igx-data-chart>
+
+    <div width="100%" height="160px" position="relative">
+        <div width="100%" height="160px" position="absolute" top="0px" left="0px" >
+            <igx-data-chart
+            #zoomChart name="zoomChart"
+            width="100%"
+            height="160px"
+            isHorizontalZoomEnabled="true"
+            isVerticalZoomEnabled="true"
+            [dataSource]="data" >
+                <igx-ordinal-time-x-axis #xAxis name="xAxis" dateTimeMemberPath="time">
+                </igx-ordinal-time-x-axis>
+                <igx-numeric-y-axis #yAxis name="yAxis" labelLocation="OutsideLeft"
+                    title="yAxis" labelExtent="40" >
+                </igx-numeric-y-axis>
+                <igx-financial-price-series
+                    name="series2"
+                    [xAxis]="xAxis"
+                    [yAxis]="yAxis"
+                    highMemberPath="high"
+                    lowMemberPath="low"
+                    closeMemberPath="close"
+                    openMemberPath="open"
+                    volumeMemberPath="volume">
+                </igx-financial-price-series>
+            </igx-data-chart>
+        </div>
+        <div width="100%" height="160px" position="absolute" top="0px" left="0px" >
+            <igx-zoom-slider
+            #zoomSlider name="zoomSlider"
+            width="100%"
+            height="100%" >
+            </igx-zoom-slider>
+        </div>
+    </div>
+</div>
diff --git a/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.scss b/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.scss
new file mode 100644
index 0000000000..2c0800918d
--- /dev/null
+++ b/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.scss
@@ -0,0 +1,20 @@
+.container {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+    min-width: 600px;
+}
+
+.sample {
+    height: 100%;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-right: 10px;
+    padding-left: 10px;
+    width: calc(100% - 25px);
+}
+
+.chart {
+    height: 100%;
+    min-width: 500px;
+}
diff --git a/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.ts b/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.ts
new file mode 100644
index 0000000000..508de78a03
--- /dev/null
+++ b/src/app/charts/zoomslider/zoomslider-overview/zoomslider-overview.component.ts
@@ -0,0 +1,207 @@
+// tslint:disable:max-line-length
+import { AfterViewInit, Component, ViewChild } from "@angular/core";
+import { StockDataService } from "../../financial-chart/services/stock-data.service";
+
+import { IgxCategoryXAxisComponent } from "igniteui-angular-charts/ES5/igx-category-x-axis-component";
+// import { ChartCursorEventArgs } from "igniteui-angular-charts/ES5/igx-chart-cursor-event-args";
+import { IgxDataChartComponent } from "igniteui-angular-charts/ES5/igx-data-chart-component";
+// import { IgxFinancialPriceSeriesComponent } from "igniteui-angular-charts/ES5/igx-financial-price-series-component";
+// import { IgxOrdinalTimeXAxisComponent } from "igniteui-angular-charts/ES5/igx-ordinal-time-x-axis-component";
+import { IgxNumericYAxisComponent } from "igniteui-angular-charts/ES5/igx-numeric-y-axis-component";
+import { IgxZoomSliderComponent } from "igniteui-angular-charts/ES5/igx-zoom-slider-component";
+import { ZoomSliderResolvingAxisValueEventArgs } from "igniteui-angular-charts/ES5/igx-zoom-slider-resolving-axis-value-event-args";
+import { IgRect } from "igniteui-angular-core/ES5/IgRect";
+import { RectChangedEventArgs } from "igniteui-angular-core/ES5/igx-rect-changed-event-args";
+
+@Component({
+    providers: [ StockDataService ],
+    selector: "app-zoomslider-overviewn",
+    styleUrls: ["./zoomslider-overview.component.scss"],
+    templateUrl: "./zoomslider-overview.component.html"
+})
+export class ZoomSliderOverviewComponent implements AfterViewInit {
+
+    public data: any;
+
+    @ViewChild("mainChart", { static: true })
+    public mainChart: IgxDataChartComponent = null;
+    @ViewChild("zoomChart", { static: true })
+    public zoomChart: IgxDataChartComponent = null;
+    @ViewChild("zoomSlider", { static: true })
+    public zoomSlider: IgxZoomSliderComponent = null;
+
+    public charts: IgxDataChartComponent[] = [];
+    public container: HTMLDivElement;
+    public isSynchronizingZoom: boolean = false;
+    public dateFormat = new Intl.DateTimeFormat("en");
+    public lastRect: IgRect = { left: -1, top: -1, width: -1, height: -1};
+
+    constructor(private dataService: StockDataService) {
+
+        this.data = this.dataService.GetStockTSLA();
+    }
+
+    public ngAfterViewInit(): void {
+
+        if (this.mainChart !== undefined) {
+            console.log("mainChart");
+            this.mainChart.actualWindowRectChanged.subscribe((e: RectChangedEventArgs) =>
+                this.onActualWindowRectChanged(this.mainChart, e)
+            );
+            this.mainChart.gridAreaRectChanged.subscribe((e: RectChangedEventArgs) =>
+                this.onGridAreaRectChanged(this.mainChart, e)
+            );
+            this.charts.push(this.mainChart);
+        }
+
+        if (this.zoomChart !== undefined) {
+            console.log("zoomChart");
+            this.charts.push(this.zoomChart);
+        }
+
+        if (this.zoomSlider !== undefined) {
+            console.log("zoomSlider");
+            this.zoomSlider.windowRectChanged.subscribe((e: RectChangedEventArgs) =>
+                this.onZoomSliderWindowChanged(this.zoomSlider, e)
+            );
+        }
+    }
+    public onActualWindowRectChanged(chart: IgxDataChartComponent, args: RectChangedEventArgs) {
+
+        console.log("mainChart onActualWindowRectChanged");
+        if (!this.isSynchronizingZoom) {
+            this.syncZooms(chart);
+        }
+    }
+
+    public onZoomSliderWindowChanged(slider: IgxZoomSliderComponent, args: RectChangedEventArgs) {
+        if (!this.isSynchronizingZoom) {
+            this.syncZooms(slider);
+        }
+    }
+
+    private syncZooms(sender: any) {
+        window.setTimeout(() => {
+            try {
+                this.isSynchronizingZoom = true;
+
+                const zoomWindow = this.zoomSlider.windowRect;
+                const datanChart = sender as IgxDataChartComponent;
+                let chartWindow: any;
+                if (sender === this.zoomSlider) {
+                    chartWindow = this.mainChart.actualWindowRect;
+                } else {
+                    chartWindow = datanChart.actualWindowRect;
+                }
+                // const chartWindow = sender === this.zoomSlider ? this.mainChart.actualWindowRect : datanChart.actualWindowRect;
+
+                if (sender === this.zoomSlider) {
+                    this.charts.map((chart) => {
+                        this.updateChartZoom(chart, {
+                            top: chartWindow.top,
+                            left: zoomWindow.left,
+                            width: zoomWindow.width,
+                            height: chartWindow.height });
+                    });
+                } else {
+                    this.zoomSlider.windowRect = {
+                        top: zoomWindow.top,
+                        left: chartWindow.left,
+                        width: chartWindow.width,
+                        height: zoomWindow.height };
+                    this.charts.map((chart) => {
+                        this.updateChartZoom(chart, {
+                            top: zoomWindow.top,
+                            left: chartWindow.left,
+                            width: chartWindow.width,
+                            height: zoomWindow.height });
+                    });
+                }
+            } finally {
+                this.isSynchronizingZoom = false;
+            }
+        }, 0);
+    }
+
+    private onResolvingAxisValue(slider: IgxZoomSliderComponent, args: ZoomSliderResolvingAxisValueEventArgs) {
+        const ind = Math.round(args.position * (this.data.length - 1));
+        const val = this.data[ind];
+        if (val) {
+            args.value = this.dateFormat.format(val.time);
+        }
+    }
+
+    private onGridAreaRectChanged(chart: IgxDataChartComponent, args: RectChangedEventArgs) {
+        const newRect = args.newRect;
+        if (!this.container) {
+            return;
+        }
+
+        if (newRect.left !== this.lastRect.left ||
+            newRect.top !== this.lastRect.top ||
+            newRect.width !== this.lastRect.width ||
+            newRect.height !== this.lastRect.height) {
+
+            let rightMargin = this.mainChart.rightMargin;
+            if (isNaN(rightMargin)) {
+                rightMargin = this.mainChart.autoMarginWidth;
+            }
+            const width = newRect.left + newRect.width + rightMargin;
+
+            const right = newRect.left + newRect.width;
+            const insetLeft = newRect.left;
+            const insetRight = width - right;
+            this.lastRect = newRect;
+            this.zoomSlider.startInset = insetLeft - this.zoomSlider.trackStartInset;
+            this.zoomSlider.endInset = insetRight - this.zoomSlider.trackEndInset;
+
+            if (this.zoomSlider.endInset < 0) {
+                console.log("updating right margin: " + this.zoomSlider.endInset);
+                const inset = this.zoomSlider.endInset;
+                this.zoomSlider.endInset = 0;
+                this.charts.map(c => c.rightMargin += (inset * -1.0));
+            }
+            if (this.zoomSlider.startInset < 0) {
+                console.log("updating left margin");
+                const inset = this.zoomSlider.startInset;
+                this.zoomSlider.startInset = 0;
+                this.charts.map(c => c.leftMargin += (inset * -1.0));
+            }
+
+            this.zoomChart.leftMargin = insetLeft;
+            this.zoomChart.rightMargin = insetRight;
+            this.zoomChart.bottomMargin = this.zoomSlider.barExtent;
+        }
+    }
+
+    private updateChartZoom(chart: IgxDataChartComponent, zoom: IgRect) {
+        const xAxis = chart.actualAxes.filter(a => a.isCategory)[0] as IgxCategoryXAxisComponent;
+        const yAxis = chart.actualAxes.filter(a => a.isNumeric)[0] as IgxNumericYAxisComponent;
+        const indexEnd = Math.ceil((xAxis.dataSource.length - 1) * (zoom.left + zoom.width));
+        let indexStart = Math.floor((xAxis.dataSource.length - 1) * zoom.left);
+
+        let min = Number.MAX_VALUE;
+        let max = Number.MIN_VALUE;
+
+        const data = xAxis.dataSource;
+        if (indexStart < 0) {
+            indexStart = 0;
+        }
+
+        for (let i = indexStart; i <= Math.min(indexEnd, xAxis.dataSource.length - 1); i++) {
+            min = Math.min(min, data[i].open, data[i].high, data[i].low, data[i].close);
+            max = Math.max(max, data[i].open, data[i].high, data[i].low, data[i].close);
+        }
+
+        const zMin = (min - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue);
+        const zMax = (max - yAxis.actualMinimumValue) / (yAxis.actualMaximumValue - yAxis.actualMinimumValue);
+
+        const newZoom = {
+            left: zoom.left,
+            width: zoom.width,
+            top: (1.0 - zMax),
+            height: (zMax - zMin)
+        };
+        chart.windowRect = newZoom;
+    }
+}
diff --git a/src/app/charts/zoomslider/zoomslider-samples.module.ts b/src/app/charts/zoomslider/zoomslider-samples.module.ts
new file mode 100644
index 0000000000..ff3fa104c8
--- /dev/null
+++ b/src/app/charts/zoomslider/zoomslider-samples.module.ts
@@ -0,0 +1,48 @@
+/* tslint:disable */
+
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+
+// chart modules
+import { IgxDataChartAnnotationModule } from "igniteui-angular-charts/ES5/igx-data-chart-annotation-module";
+import { IgxDataChartCategoryCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-category-core-module";
+import { IgxDataChartCategoryModule } from "igniteui-angular-charts/ES5/igx-data-chart-category-module";
+import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core-module";
+import { IgxDataChartInteractivityModule } from "igniteui-angular-charts/ES5/igx-data-chart-interactivity-module";
+
+import { IgxCategoryXAxisModule } from "igniteui-angular-charts/ES5/igx-category-x-axis-module";
+import { IgxOrdinalTimeXAxisModule } from "igniteui-angular-charts/ES5/igx-ordinal-time-x-axis-module";
+import { IgxNumericYAxisModule } from "igniteui-angular-charts/ES5/igx-numeric-y-axis-module";
+import { IgxFinancialPriceSeriesModule } from "igniteui-angular-charts/ES5/igx-financial-price-series-module";
+import { IgxCalloutLayerModule } from "igniteui-angular-charts/ES5/igx-callout-layer-module";
+import { IgxCrosshairLayerModule } from "igniteui-angular-charts/ES5/igx-crosshair-layer-module";
+
+import { IgxZoomSliderDynamicModule } from "igniteui-angular-charts/ES5/igx-zoom-slider-dynamic-module";
+
+// sample components
+import { ZoomSliderOverviewComponent } from "./zoomslider-overview/zoomslider-overview.component";
+
+@NgModule({
+    declarations: [
+        ZoomSliderOverviewComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        IgxDataChartCoreModule,
+        IgxDataChartCategoryModule,
+        IgxDataChartCategoryCoreModule,
+        IgxOrdinalTimeXAxisModule,
+        IgxCategoryXAxisModule,
+        IgxNumericYAxisModule,
+        IgxDataChartInteractivityModule,
+        IgxFinancialPriceSeriesModule,
+        IgxDataChartAnnotationModule,
+        IgxCalloutLayerModule,
+        IgxCrosshairLayerModule,
+        IgxZoomSliderDynamicModule
+        // IgxZoomSliderModule
+     ]
+})
+export class ZoomSliderSamplesModule {}
diff --git a/src/app/excel-library/excel-library-routes-data.ts b/src/app/excel-library/excel-library-routes-data.ts
index 742bc9af2b..5ae9062533 100644
--- a/src/app/excel-library/excel-library-routes-data.ts
+++ b/src/app/excel-library/excel-library-routes-data.ts
@@ -8,5 +8,5 @@ export const excelLibraryRoutesData = {
     "working-with-grids": { displayName: "Working With Grids", parentName: "Excel Library" },
     "working-with-objects": { displayName: "Working With Objects", parentName: "Excel Library" },
     "working-with-sparklines": { displayName: "Working With Sparklines", parentName: "Excel Library" },
-    "excel-library-working-with-tables": { displayName: "Working With Tables", parentName: "Excel Library" }
+    "working-with-tables": { displayName: "Working With Tables", parentName: "Excel Library" }
 };
diff --git a/src/app/excel-library/excel-library-routing.module.ts b/src/app/excel-library/excel-library-routing.module.ts
index 4080061070..7dc8f32164 100644
--- a/src/app/excel-library/excel-library-routing.module.ts
+++ b/src/app/excel-library/excel-library-routing.module.ts
@@ -48,8 +48,8 @@ export const excelLibraryRoutes: Routes = [
     },
     {
         component: ExcelLibraryWorkingWithTablesComponent,
-        data: excelLibraryRoutesData["excel-library-working-with-tables"],
-        path: "excel-library-working-with-tables"
+        data: excelLibraryRoutesData["working-with-tables"],
+        path: "working-with-tables"
     }
 ];
 
diff --git a/src/app/grid-finjs/grid-finjs-demo.component.scss b/src/app/grid-finjs/grid-finjs-demo.component.scss
index a3e3797bdf..1b9e187ee2 100644
--- a/src/app/grid-finjs/grid-finjs-demo.component.scss
+++ b/src/app/grid-finjs/grid-finjs-demo.component.scss
@@ -168,14 +168,17 @@
     }
     .finjs-slider {
         width: 40%;
+        min-width: 145px;
     }
     .finjs-play-controls {
         width: 45%;
         min-width: 500px;
+        margin-top: 20px;
     }
     .sample-toolbar {
         height: 20px;
         font-size: 0.8rem;
+        line-height: 20px;
     }
     .fin-dark-theme {
         .finjs-slider,
diff --git a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html
index 2e53de0db3..9454728e21 100644
--- a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html
+++ b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-  <igx-grid #grid1 [data]="data" [paging]="true" [perPage]="10" height="500px" width="100%" displayDensity="cosy">
+  <igx-grid #grid1 [data]="data" [paging]="true" [perPage]="10" height="500px" width="100%" displayDensity="cosy" [paginationTemplate]="pager">
       <igx-column header="Rank" headerClasses="myClass" field="Id" sortable="true">
       </igx-column>
 
@@ -39,4 +39,22 @@
         </ng-template>
     </igx-column>
   </igx-grid>
+
+  <ng-template #pager let-grid>
+        <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-grid-paginator__pager" style="justify-content: center">
+            <button [disabled]="grid.isFirstPage" (click)="grid.paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
+                <igx-icon>first_page</igx-icon>
+            </button>
+            <button [disabled]="grid.isFirstPage" (click)="grid.previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
+                <igx-icon>chevron_left</igx-icon>
+            </button>
+            <span>{{ grid.page + 1 }} of {{ grid.totalPages }}</span>
+            <button [disabled]="grid.isLastPage" (click)="grid.nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
+                <igx-icon>chevron_right</igx-icon>
+            </button>
+            <button [disabled]="grid.isLastPage" (click)="grid.paginate(grid.totalPages - 1)" igxButton="icon" igxRipple igxRippleCentered="true">
+                <igx-icon>last_page</igx-icon>
+            </button>
+        </div>
+    </ng-template>
 </div>
diff --git a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
index b271444083..a31458d8b0 100644
--- a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
+++ b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss
@@ -10,7 +10,7 @@ $dark-button: igx-button-theme( $icon-color: #FFCD0F, $icon-hover-color: #292826
 :host {
      ::ng-deep {
         @include igx-grid-paginator($dark-grid-paginator);
-        .igx-paginator {
+        .igx-grid-paginator__pager {
             @include igx-button($dark-button);
         }
     }
@@ -93,4 +93,4 @@ $dark-button: igx-button-theme( $icon-color: #FFCD0F, $icon-hover-color: #292826
 .grid__wrapper {
     width: 950px;
     margin: 10px auto;
-}
\ No newline at end of file
+}
diff --git a/src/app/grid/grid-boston-marathon/grid.component.html b/src/app/grid/grid-boston-marathon/grid.component.html
index fc931f6035..f8a4fdb273 100644
--- a/src/app/grid/grid-boston-marathon/grid.component.html
+++ b/src/app/grid/grid-boston-marathon/grid.component.html
@@ -93,7 +93,7 @@ <h5 class="switch-sample__title">Boston Marathon 2018</h5>
     </igx-grid>
 
     <ng-template #pager let-grid>
-        <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-paginator">
+        <div class="igx-grid-paginator__pager" style="justify-content: center">
             <button [disabled]="grid.isFirstPage" (click)="grid.paginate(0)" igxButton="icon" igxRipple
                 igxRippleCentered="true">
                 <igx-icon>first_page</igx-icon>
@@ -113,4 +113,4 @@ <h5 class="switch-sample__title">Boston Marathon 2018</h5>
         </div>
     </ng-template>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/grid/grid-boston-marathon/grid.component.scss b/src/app/grid/grid-boston-marathon/grid.component.scss
index d1b6954e23..c41d169e11 100644
--- a/src/app/grid/grid-boston-marathon/grid.component.scss
+++ b/src/app/grid/grid-boston-marathon/grid.component.scss
@@ -6,16 +6,16 @@
         $row-selected-text-color: #ddd,
         $row-hover-background: #f8f8f8,
         $row-border-color: #f8f8f8,
-      
+
         $cell-selected-background: igx-color($default-palette, grays, 800),
         $cell-selected-text-color: #fff
       );
-      
+
       $progressBar-sample-theme: igx-progress-linear-theme(
         $track-color: rgba(181,181,181, .5),
         $fill-color-default: orange
       );
-      
+
       .grid__wrapper {
         @include igx-grid($grid-sample-theme);
         @include igx-progress-linear($progressBar-sample-theme);
@@ -124,12 +124,6 @@
   }
 }
 
-.igx-paginator>* {
-    margin: 0 .3125rem;
-    display: flex;
-    align-items: center;
-}
-
 .linear-bar-container {
     width: 100%;
 }
diff --git a/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.html b/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.html
new file mode 100644
index 0000000000..33db97fbdd
--- /dev/null
+++ b/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.html
@@ -0,0 +1,40 @@
+<div class="wrapper theme">
+    <div class="sample-content">
+        <div class="sample-column">
+            <igx-input-group type="box">
+                <label igxLabel>Change copy separator</label>
+                <input type="text" igxInput [(ngModel)]="options.separator" />
+                <igx-suffix (pointerup)="options.separator = '\t'">
+                    <igx-icon>clear</igx-icon>
+                </igx-suffix>
+                <igx-hint>
+                    The default value is a single tabulation which is shown as whitespace above.
+                    Click the clear icon to reset it back to tabulation.
+                </igx-hint>
+            </igx-input-group>
+            <div class="grid-wrapper">
+                <igx-grid #grid [data]="data" primaryKey="ID" rowEditable="true" (onColumnInit)="initColumn($event)"
+                    [showToolbar]="true" [clipboardOptions]="options" [autoGenerate]="true">
+                    <ng-template igxToolbarCustomContent let-grid="grid">
+                        <div class="tlb">
+                            <igx-switch [(ngModel)]="options.enabled">Grid copy behavior</igx-switch>
+                            <igx-switch [(ngModel)]="options.copyHeaders">Copying of header labels</igx-switch>
+                            <igx-switch [(ngModel)]="options.copyFormatters">Copying column formatters</igx-switch>
+                            <button igxButton="outlined" igxRippleCentered="true" (click)="grid.clearCellSelection()">
+                                <igx-icon fontSet="material">clear</igx-icon>
+                                Selection
+                            </button>
+                        </div>
+                    </ng-template>
+                </igx-grid>
+            </div>
+
+            <div style="margin-top: 0.5rem">
+                <igx-input-group type="box">
+                    <label igxLabel>Paste your data here (or in Excel)</label>
+                    <textarea igxInput cols="30" rows="5"></textarea>
+                </igx-input-group>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.scss b/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.scss
new file mode 100644
index 0000000000..61f01b4cd2
--- /dev/null
+++ b/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.scss
@@ -0,0 +1,40 @@
+@import '~igniteui-angular/lib/core/styles/themes/index';
+
+@mixin scrollbar-love($scrollbar-color: null) {
+    $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
+    $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
+
+    @if $scrollbar-color and luminance($scrollbar-color) < .5 {
+        $scrollbar-track: darken($scrollbar-color, 8%);
+        $scrollbar-thumb: lighten($scrollbar-color, 20%);
+    }
+
+    ::-webkit-scrollbar {
+        width: 16px;
+        height: 16px;
+        background-color: $scrollbar-track;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: $scrollbar-thumb;
+    }
+}
+
+:host ::ng-deep {
+    @include scrollbar-love();
+
+    .igx-switch__label {
+        line-height: 1rem;
+    }
+}
+
+.tlb {
+    display: flex;
+    max-width: 734px;
+}
+
+.grid-wrapper {
+    width: 50wh; 
+    height: 364px;
+    margin-top: 7px;
+}
\ No newline at end of file
diff --git a/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.ts b/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.ts
new file mode 100644
index 0000000000..a7ad2185c1
--- /dev/null
+++ b/src/app/grid/grid-clipboard-operations-sample/grid-clipboard-operations-sample.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from "@angular/core";
+import { DATA } from "../../data/nwindData";
+
+@Component({
+    selector: "grid-clipboard-operations-sample",
+    styleUrls: ["grid-clipboard-operations-sample.component.scss"],
+    templateUrl: "./grid-clipboard-operations-sample.component.html"
+})
+export class GridClipboardSampleComponent implements OnInit {
+
+    public data: any[];
+    public options = {
+        enabled: true,
+        copyHeaders: true,
+        copyFormatters: true,
+        separator: "\t"
+    };
+
+    constructor() {
+        this.data = DATA;
+    }
+
+    public ngOnInit() {
+    }
+
+    public formatter = (value: any) => `** ${value} **`;
+
+    public initColumn(column) {
+        column.formatter = this.formatter;
+        column.header = `🎉${column.field}`;
+        if (column.index > 6) {
+            column.hidden = true;
+        }
+    }
+}
diff --git a/src/app/grid/grid-paging-sample/grid-paging-sample.component.html b/src/app/grid/grid-paging-sample/grid-paging-sample.component.html
index 8813956fc2..15d5c79080 100644
--- a/src/app/grid/grid-paging-sample/grid-paging-sample.component.html
+++ b/src/app/grid/grid-paging-sample/grid-paging-sample.component.html
@@ -43,7 +43,7 @@
   </igx-grid>
 
   <ng-template #pager let-grid>
-      <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-paginator">
+      <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-grid-paginator__pager" style="justify-content: center">
           <button [disabled]="grid.isFirstPage" (click)="grid.paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
               <igx-icon>first_page</igx-icon>
           </button>
@@ -59,4 +59,4 @@
           </button>
       </div>
   </ng-template>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss b/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss
index bbd294a939..fa3b51719f 100644
--- a/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss
+++ b/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss
@@ -29,12 +29,6 @@ $progressBar-sample-theme: igx-progress-linear-theme(
   justify-content: space-between;
 }
 
-.igx-paginator>* {
-    margin: 0 .3125rem;
-    display: flex;
-    align-items: center;
-}
-
 .linear-bar-container {
     width: 100%;
-}
\ No newline at end of file
+}
diff --git a/src/app/grid/grid-remote-paging-sample/remote-paging-sample.component.html b/src/app/grid/grid-remote-paging-sample/remote-paging-sample.component.html
index 7a659f6b1b..d4d30d2a36 100644
--- a/src/app/grid/grid-remote-paging-sample/remote-paging-sample.component.html
+++ b/src/app/grid/grid-remote-paging-sample/remote-paging-sample.component.html
@@ -9,42 +9,48 @@
             <igx-column field="Rating"></igx-column>
         </igx-grid>
         <ng-template #customPager let-api>
-            <button [disabled]="firstPage" (click)="paginate(0, false)" igxButton="icon" igxRipple
-                igxRippleCentered="true">
-                <igx-icon fontSet="material">first_page</igx-icon>
-            </button>
-            <button [disabled]="firstPage" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
-                <igx-icon fontSet="material">chevron_left</igx-icon>
-            </button>
-            <span>{{ page + 1 }} of {{totalPages}}</span>
-            <button [disabled]="lastPage" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
-                <igx-icon fontSet="material">chevron_right</igx-icon>
-            </button>
-            <button [disabled]="lastPage" (click)="paginate(totalPages - 1, false)" igxButton="icon" igxRipple
-                igxRippleCentered="true">
-                <igx-icon fontSet="material">last_page</igx-icon>
-            </button>
-            <select style="margin-left: 1rem;" (change)="perPage = parseToInt($event.target.value);">
-                <option [value]="val" [selected]="perPage == val" *ngFor="let val of [5, 10, 15, 25, 50, 100, 500]">{{ val
-                }}</option>
-            </select>
+            <div class="igx-grid-paginator__pager" style="justify-content: center">
+                <button [disabled]="firstPage" (click)="paginate(0, false)" igxButton="icon" igxRipple
+                    igxRippleCentered="true">
+                    <igx-icon fontSet="material">first_page</igx-icon>
+                </button>
+                <button [disabled]="firstPage" (click)="previousPage()" igxButton="icon" igxRipple
+                    igxRippleCentered="true">
+                    <igx-icon fontSet="material">chevron_left</igx-icon>
+                </button>
+                <span>{{ page + 1 }} of {{totalPages}}</span>
+                <button [disabled]="lastPage" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
+                    <igx-icon fontSet="material">chevron_right</igx-icon>
+                </button>
+                <button [disabled]="lastPage" (click)="paginate(totalPages - 1, false)" igxButton="icon" igxRipple
+                    igxRippleCentered="true">
+                    <igx-icon fontSet="material">last_page</igx-icon>
+                </button>
+                <select style="margin-left: 1rem;" (change)="perPage = parseToInt($event.target.value);">
+                    <option [value]="val" [selected]="perPage == val" *ngFor="let val of [5, 10, 15, 25, 50, 100, 500]">{{ val
+            }}</option>
+                </select>
+            </div>
         </ng-template>
         <ng-template #secCustomPager let-api>
-            <button [disabled]="firstPage" (click)="previousPage()" igxButton="flat" igxButtonColor="#09f">
-                PREV
-            </button>
-            <span *ngIf="shouldShowFirstPage" (click)="paginate(0, false)"><a class="pageNavLinks"
-                    [routerLink]=''>{{1}}</a> ...</span>
-            <span *ngFor="let item of pages" (click)="paginate(item, false)"><a
-                    class="pageNavLinks {{activePage(item)}}" [routerLink]=''>{{item + 1}}</a> </span>
-            <span *ngIf="shouldShowLastPage" (click)="paginate(totalPages - 1, false)">... <a class="pageNavLinks"
-                    [routerLink]=''>{{ totalPages }}</a></span>
-            <button [disabled]="lastPage" (click)="nextPage()" igxButton="flat" igxButtonColor="#09f">
-                NEXT
-            </button>
+            <div class="igx-grid-paginator__pager" style="justify-content: center">
+                <button [disabled]="firstPage" (click)="previousPage()" igxButton="flat" igxButtonColor="#09f">
+                    PREV
+                </button>
+                <span *ngIf="shouldShowFirstPage" (click)="paginate(0, false)"><a class="pageNavLinks"
+                        [routerLink]=''>{{1}}</a> ...</span>
+                <span *ngFor="let item of pages" (click)="paginate(item, false)"><a
+                        class="pageNavLinks {{activePage(item)}}" [routerLink]=''>{{item + 1}}</a> </span>
+                <span *ngIf="shouldShowLastPage" (click)="paginate(totalPages - 1, false)">... <a class="pageNavLinks"
+                        [routerLink]=''>{{ totalPages }}</a></span>
+                <button [disabled]="lastPage" (click)="nextPage()" igxButton="flat" igxButtonColor="#09f">
+                    NEXT
+                </button>
+            </div>
         </ng-template>
         <br />
-        <button (click)="changeTemplate()" class='changeBtn' igxButton="flat" igxButtonColor="#09f" igxButtonBackground="#dadada"> Change
+        <button (click)="changeTemplate()" class='changeBtn' igxButton="flat" igxButtonColor="#09f"
+            igxButtonBackground="#dadada"> Change
             Paging Template</button>
     </span>
-</p>
\ No newline at end of file
+</p>
diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts
index a326528b1b..67d234bcfe 100644
--- a/src/app/grid/grid-routes-data.ts
+++ b/src/app/grid/grid-routes-data.ts
@@ -55,5 +55,7 @@ export const gridsRoutesData = {
     "grid-composite-data-binding": { displayName: "Grid Composite Data Binding", parentName: "Grid" },
     "grid-row-edit-style" : { displayName: "Grid Row Edit Style", parentName: "Grid" },
     "grid-contextmenu-sample": { displayName: "Grid Context Menu", parentName: "Grid" },
+    "multi-column-header-template": { displayName: "Grid Multi Column Header Template", parentName: "Grid" },
+    "grid-clipboard-operations-sample": { displayName: "Grid Clipboard Operations", parentName: "Grid" },
     "grid-toolbar-style": { displayName: "Grid Toolbar Style", parentName: "Grid" }
 };
diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts
index e77bb8ff47..45960154f2 100644
--- a/src/app/grid/grids-routing.module.ts
+++ b/src/app/grid/grids-routing.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { GridBatchEditingSampleComponent } from "./grid-batch-editing/grid-batch-editing-sample.component";
 import { GridComponent } from "./grid-boston-marathon/grid.component";
+import { GridClipboardSampleComponent } from "./grid-clipboard-operations-sample/grid-clipboard-operations-sample.component";
 import { GridColumnHidingSampleComponent } from "./grid-column-hiding-sample/grid-column-hiding-sample.component";
 import { GridColumnHidingToolbarSampleComponent } from "./grid-column-hiding-toolbar-sample/grid-column-hiding-toolbar-sample.component";
 import { GridCompositeDataComponent } from "./grid-composite-data-binding/grid-composite-data.component";
@@ -52,6 +53,7 @@ import { GridToolbarSample2Component } from "./grid-toolbar-sample/grid-toolbar-
 import { GridToolbarSample3Component } from "./grid-toolbar-sample/grid-toolbar-sample-3.component";
 import { GridToolbarSample4Component } from "./grid-toolbar-sample/grid-toolbar-sample-4.component";
 import { GridToolbarStyleComponent } from "./grid-toolbar-style/grid-toolbar-style.component";
+import { GridMultiColumnHeaderTemplateComponent } from "./multi-column-header-template/multi-column-header-template";
 import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-column-headers";
 
 import { CustomGridPagingStyleSample } from "./custom-grid-paging-style/custom-grid-paging-style.component";
@@ -326,6 +328,16 @@ export const gridsRoutes: Routes = [
         data: gridsRoutesData["custom-grid-paging-style"],
         path: "custom-grid-paging-style"
     },
+    {
+        component: GridMultiColumnHeaderTemplateComponent,
+        data: gridsRoutesData["multi-column-header-template"],
+        path: "multi-column-header-template"
+    },
+    {
+        component: GridClipboardSampleComponent,
+        data: gridsRoutesData["grid-clipboard-operations-sample"],
+        path: "grid-clipboard-operations-sample"
+    },
     {
         component: GridToolbarStyleComponent,
         data: gridsRoutesData["grid-toolbar-style"],
diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts
index b732e1b549..c88bedce5b 100644
--- a/src/app/grid/grids.module.ts
+++ b/src/app/grid/grids.module.ts
@@ -12,6 +12,7 @@ import {
 import { GridBatchEditingSampleComponent } from "./grid-batch-editing/grid-batch-editing-sample.component";
 import { GridWithTransactionsComponent } from "./grid-batch-editing/grid-transaction.component";
 import { GridComponent } from "./grid-boston-marathon/grid.component";
+import { GridClipboardSampleComponent } from "./grid-clipboard-operations-sample/grid-clipboard-operations-sample.component";
 import { GridColumnHidingSampleComponent } from "./grid-column-hiding-sample/grid-column-hiding-sample.component";
 import { GridColumnHidingToolbarSampleComponent } from "./grid-column-hiding-toolbar-sample/grid-column-hiding-toolbar-sample.component";
 import { GridCompositeDataComponent } from "./grid-composite-data-binding/grid-composite-data.component";
@@ -65,6 +66,7 @@ import { GridToolbarSample3Component } from "./grid-toolbar-sample/grid-toolbar-
 import { GridToolbarSample4Component } from "./grid-toolbar-sample/grid-toolbar-sample-4.component";
 import { GridToolbarStyleComponent } from "./grid-toolbar-style/grid-toolbar-style.component";
 import { GridsRoutingModule } from "./grids-routing.module";
+import { GridMultiColumnHeaderTemplateComponent } from "./multi-column-header-template/multi-column-header-template";
 import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-column-headers";
 import { DataService } from "./services/data.service";
 
@@ -133,6 +135,8 @@ import { GridResizeLineStylingSampleComponent } from "./grid-resize-line-styling
         ContextmenuComponent,
         CustomGridPagingStyleSample,
         GridRowReorderComponent,
+        GridMultiColumnHeaderTemplateComponent,
+        GridClipboardSampleComponent,
         GridToolbarStyleComponent
     ],
     imports: [
diff --git a/src/app/grid/multi-column-header-template/data.ts b/src/app/grid/multi-column-header-template/data.ts
new file mode 100644
index 0000000000..f99b2c8efe
--- /dev/null
+++ b/src/app/grid/multi-column-header-template/data.ts
@@ -0,0 +1,30 @@
+export const data = [
+    // tslint:disable:max-line-length
+    { ID: "ALFKI", CompanyName: "Alfreds Futterkiste", ContactName: "Maria Anders", ContactTitle: "Sales Representative", Address: "Obere Str. 57", City: "Berlin", Region: null, PostalCode: "12209", Country: "Germany", Phone: "030-0074321", Fax: "030-0076545" },
+    { ID: "ANATR", CompanyName: "Ana Trujillo Emparedados y helados", ContactName: "Ana Trujillo", ContactTitle: "Owner", Address: "Avda. de la Constitución 2222", City: "México D.F.", Region: null, PostalCode: "05021", Country: "Mexico", Phone: "(5) 555-4729", Fax: "(5) 555-3745" },
+    { ID: "ANTON", CompanyName: "Antonio Moreno Taquería", ContactName: "Antonio Moreno", ContactTitle: "Owner", Address: "Mataderos 2312", City: "México D.F.", Region: null, PostalCode: "05023", Country: "Mexico", Phone: "(5) 555-3932", Fax: null },
+    { ID: "AROUT", CompanyName: "Around the Horn", ContactName: "Thomas Hardy", ContactTitle: "Sales Representative", Address: "120 Hanover Sq.", City: "London", Region: null, PostalCode: "WA1 1DP", Country: "UK", Phone: "(171) 555-7788", Fax: "(171) 555-6750" },
+    { ID: "BERGS", CompanyName: "Berglunds snabbköp", ContactName: "Christina Berglund", ContactTitle: "Order Administrator", Address: "Berguvsvägen 8", City: "Luleå", Region: null, PostalCode: "S-958 22", Country: "Sweden", Phone: "0921-12 34 65", Fax: "0921-12 34 67" },
+    { ID: "BLAUS", CompanyName: "Blauer See Delikatessen", ContactName: "Hanna Moos", ContactTitle: "Sales Representative", Address: "Forsterstr. 57", City: "Mannheim", Region: null, PostalCode: "68306", Country: "Germany", Phone: "0621-08460", Fax: "0621-08924" },
+    { ID: "BLONP", CompanyName: "Blondesddsl père et fils", ContactName: "Frédérique Citeaux", ContactTitle: "Marketing Manager", Address: "24, place Kléber", City: "Strasbourg", Region: null, PostalCode: "67000", Country: "France", Phone: "88.60.15.31", Fax: "88.60.15.32" },
+    { ID: "BOLID", CompanyName: "Bólido Comidas preparadas", ContactName: "Martín Sommer", ContactTitle: "Owner", Address: "C/ Araquil, 67", City: "Madrid", Region: null, PostalCode: "28023", Country: "Spain", Phone: "(91) 555 22 82", Fax: "(91) 555 91 99" },
+    { ID: "BONAP", CompanyName: "Bon app'", ContactName: "Laurence Lebihan", ContactTitle: "Owner", Address: "12, rue des Bouchers", City: "Marseille", Region: null, PostalCode: "13008", Country: "France", Phone: "91.24.45.40", Fax: "91.24.45.41" },
+    { ID: "BOTTM", CompanyName: "Bottom-Dollar Markets", ContactName: "Elizabeth Lincoln", ContactTitle: "Accounting Manager", Address: "23 Tsawassen Blvd.", City: "Tsawassen", Region: "BC", PostalCode: "T2F 8M4", Country: "Canada", Phone: "(604) 555-4729", Fax: "(604) 555-3745" },
+    { ID: "BSBEV", CompanyName: "B's Beverages", ContactName: "Victoria Ashworth", ContactTitle: "Sales Representative", Address: "Fauntleroy Circus", City: "London", Region: null, PostalCode: "EC2 5NT", Country: "UK", Phone: "(171) 555-1212", Fax: null },
+    { ID: "CACTU", CompanyName: "Cactus Comidas para llevar", ContactName: "Patricio Simpson", ContactTitle: "Sales Agent", Address: "Cerrito 333", City: "Buenos Aires", Region: null, PostalCode: "1010", Country: "Argentina", Phone: "(1) 135-5555", Fax: "(1) 135-4892" },
+    { ID: "CENTC", CompanyName: "Centro comercial Moctezuma", ContactName: "Francisco Chang", ContactTitle: "Marketing Manager", Address: "Sierras de Granada 9993", City: "México D.F.", Region: null, PostalCode: "05022", Country: "Mexico", Phone: "(5) 555-3392", Fax: "(5) 555-7293" },
+    { ID: "CHOPS", CompanyName: "Chop-suey Chinese", ContactName: "Yang Wang", ContactTitle: "Owner", Address: "Hauptstr. 29", City: "Bern", Region: null, PostalCode: "3012", Country: "Switzerland", Phone: "0452-076545", Fax: null },
+    { ID: "COMMI", CompanyName: "Comércio Mineiro", ContactName: "Pedro Afonso", ContactTitle: "Sales Associate", Address: "Av. dos Lusíadas, 23", City: "Sao Paulo", Region: "SP", PostalCode: "05432-043", Country: "Brazil", Phone: "(11) 555-7647", Fax: null },
+    { ID: "CONSH", CompanyName: "Consolidated Holdings", ContactName: "Elizabeth Brown", ContactTitle: "Sales Representative", Address: "Berkeley Gardens 12 Brewery", City: "London", Region: null, PostalCode: "WX1 6LT", Country: "UK", Phone: "(171) 555-2282", Fax: "(171) 555-9199" },
+    { ID: "DRACD", CompanyName: "Drachenblut Delikatessen", ContactName: "Sven Ottlieb", ContactTitle: "Order Administrator", Address: "Walserweg 21", City: "Aachen", Region: null, PostalCode: "52066", Country: "Germany", Phone: "0241-039123", Fax: "0241-059428" },
+    { ID: "DUMON", CompanyName: "Du monde entier", ContactName: "Janine Labrune", ContactTitle: "Owner", Address: "67, rue des Cinquante Otages", City: "Nantes", Region: null, PostalCode: "44000", Country: "France", Phone: "40.67.88.88", Fax: "40.67.89.89" },
+    { ID: "EASTC", CompanyName: "Eastern Connection", ContactName: "Ann Devon", ContactTitle: "Sales Agent", Address: "35 King George", City: "London", Region: null, PostalCode: "WX3 6FW", Country: "UK", Phone: "(171) 555-0297", Fax: "(171) 555-3373" },
+    { ID: "ERNSH", CompanyName: "Ernst Handel", ContactName: "Roland Mendel", ContactTitle: "Sales Manager", Address: "Kirchgasse 6", City: "Graz", Region: null, PostalCode: "8010", Country: "Austria", Phone: "7675-3425", Fax: "7675-3426" },
+    { ID: "FAMIA", CompanyName: "Familia Arquibaldo", ContactName: "Aria Cruz", ContactTitle: "Marketing Assistant", Address: "Rua Orós, 92", City: "Sao Paulo", Region: "SP", PostalCode: "05442-030", Country: "Brazil", Phone: "(11) 555-9857", Fax: null },
+    { ID: "FISSA", CompanyName: "FISSA Fabrica Inter. Salchichas S.A.", ContactName: "Diego Roel", ContactTitle: "Accounting Manager", Address: "C/ Moralzarzal, 86", City: "Madrid", Region: null, PostalCode: "28034", Country: "Spain", Phone: "(91) 555 94 44", Fax: "(91) 555 55 93" },
+    { ID: "FOLIG", CompanyName: "Folies gourmandes", ContactName: "Martine Rancé", ContactTitle: "Assistant Sales Agent", Address: "184, chaussée de Tournai", City: "Lille", Region: null, PostalCode: "59000", Country: "France", Phone: "20.16.10.16", Fax: "20.16.10.17" },
+    { ID: "FOLKO", CompanyName: "Folk och fä HB", ContactName: "Maria Larsson", ContactTitle: "Owner", Address: "Åkergatan 24", City: "Bräcke", Region: null, PostalCode: "S-844 67", Country: "Sweden", Phone: "0695-34 67 21", Fax: null },
+    { ID: "FRANK", CompanyName: "Frankenversand", ContactName: "Peter Franken", ContactTitle: "Marketing Manager", Address: "Berliner Platz 43", City: "München", Region: null, PostalCode: "80805", Country: "Germany", Phone: "089-0877310", Fax: "089-0877451" },
+    { ID: "FRANR", CompanyName: "France restauration", ContactName: "Carine Schmitt", ContactTitle: "Marketing Manager", Address: "54, rue Royale", City: "Nantes", Region: null, PostalCode: "44000", Country: "France", Phone: "40.32.21.21", Fax: "40.32.21.20" },
+    { ID: "FRANS", CompanyName: "Franchi S.p.A.", ContactName: "Paolo Accorti", ContactTitle: "Sales Representative", Address: "Via Monte Bianco 34", City: "Torino", Region: null, PostalCode: "10100", Country: "Italy", Phone: "011-4988260", Fax: "011-4988261" }
+];
diff --git a/src/app/grid/multi-column-header-template/multi-column-header-template.html b/src/app/grid/multi-column-header-template/multi-column-header-template.html
new file mode 100644
index 0000000000..0794f0e972
--- /dev/null
+++ b/src/app/grid/multi-column-header-template/multi-column-header-template.html
@@ -0,0 +1,37 @@
+<div class="grid__wrapper">
+    <ng-template #columnGroupTemplate let-col>
+        <div class="column-group-template__container">
+            <igx-icon [attr.draggable]="false"
+                      (click)="toggleColumnGroup(col)"
+                      class="column-group-template__icon">
+                      {{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}}</igx-icon>
+            {{col.header}}
+        </div>
+    </ng-template>
+            
+    <igx-grid [rowSelectable]="false" #grid height="480px" [data]="data" displayDensity="compact" [allowFiltering]="true">
+        <igx-column [movable]="true" [resizable]="true" field="ID" [filterable]="false"></igx-column>
+        <igx-column-group [movable]="true" [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
+            <igx-column [movable]="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
+            <igx-column-group [movable]="true" header="Person Details">
+                <igx-column [movable]="true" [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
+                <igx-column [movable]="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+        <igx-column-group header="Address Information" [headerTemplate]="columnGroupTemplate">
+            <igx-column sortable="true" resizable="true" field="Location" hidden="true"></igx-column>
+            <igx-column sortable="true" resizable="true" field="Phone" hidden="true"></igx-column>
+            <igx-column-group header="Location">
+                <igx-column sortable="true" resizable="true" field="Country"></igx-column>
+                <igx-column sortable="true" resizable="true" field="Region"></igx-column>
+                <igx-column sortable="true" resizable="true" field="City"></igx-column>
+                <igx-column sortable="true" resizable="true" field="Address"></igx-column>
+            </igx-column-group>
+            <igx-column-group header="Contact Information">
+                <igx-column sortable="true" resizable="true" field="Phone"></igx-column>
+                <igx-column sortable="true" resizable="true" field="Fax"></igx-column>
+                <igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+    </igx-grid>
+</div>
\ No newline at end of file
diff --git a/src/app/grid/multi-column-header-template/multi-column-header-template.scss b/src/app/grid/multi-column-header-template/multi-column-header-template.scss
new file mode 100644
index 0000000000..01ee897b3a
--- /dev/null
+++ b/src/app/grid/multi-column-header-template/multi-column-header-template.scss
@@ -0,0 +1,12 @@
+.grid__wrapper {
+    margin: 10px;
+}
+
+.column-group-template__container {
+    display: flex; 
+    align-items: center;
+}
+
+.column-group-template__icon {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/grid/multi-column-header-template/multi-column-header-template.ts b/src/app/grid/multi-column-header-template/multi-column-header-template.ts
new file mode 100644
index 0000000000..4f4c71cfc3
--- /dev/null
+++ b/src/app/grid/multi-column-header-template/multi-column-header-template.ts
@@ -0,0 +1,37 @@
+import { Component, ViewChild } from "@angular/core";
+import { IgxColumnGroupComponent, IgxGridComponent } from "igniteui-angular";
+import { data } from "./data";
+
+@Component({
+    selector: "multi-column-header-template",
+    styleUrls: [ "multi-column-header-template.scss" ],
+    templateUrl: "multi-column-header-template.html"
+})
+export class GridMultiColumnHeaderTemplateComponent {
+
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+    public data: any[] = data;
+    public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
+
+    constructor() {
+        for (const item of this.data) {
+            item.Location = `${item.Address}, ${item.City}, ${item.Country}`;
+        }
+    }
+
+    public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
+        const columns = columnGroup.children.toArray();
+
+        if (columnGroup.header === "General Information") {
+            const col = columns[1];
+            col.hidden = !col.hidden;
+        } else if (columnGroup.header === "Address Information") {
+            for (const col of columns) {
+                col.hidden = !col.hidden;
+            }
+        }
+
+        this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
+    }
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.html b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.html
new file mode 100644
index 0000000000..131de6208c
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.html
@@ -0,0 +1,66 @@
+<div class="grid__wrapper">
+    <ng-template #columnGroupTemplate let-col>
+        <div class="column-group-template__container">
+            <igx-icon [attr.draggable]="false"
+                      (click)="toggleColumnGroup(col)"
+                      class="column-group-template__icon">
+                      {{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}}</igx-icon>
+            {{col.header}}
+        </div>
+    </ng-template>
+
+    <igx-hierarchical-grid #hierarchicalGrid [data]="localData" [height]="'500px'" [width]="'100%'" displayDensity="compact" [allowFiltering]="true">
+        <igx-column field="CustomerID" [movable]="true" sortable="true" resizable="true"></igx-column>
+        <igx-column-group [movable]="true" [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
+            <igx-column field="CompanyName" [movable]="true" sortable="true" resizable="true"></igx-column>
+            <igx-column-group [movable]="true" header="Person Details">
+                <igx-column field="ContactName" [movable]="true" sortable="true" resizable="true"></igx-column>
+                <igx-column field="ContactTitle" [movable]="true" sortable="true" resizable="true"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+        <igx-column-group header="Address Information" [headerTemplate]="columnGroupTemplate">
+            <igx-column sortable="true" resizable="true" field="Location" hidden="true"></igx-column>
+            <igx-column sortable="true" resizable="true" field="Phone" hidden="true"></igx-column>
+            <igx-column-group header="Location">
+                <igx-column field="Address" [movable]="true" sortable="true" resizable="true"></igx-column>
+                <igx-column field="City" [movable]="true" sortable="true" resizable="true"></igx-column>
+                <igx-column field="PostalCode" [movable]="true" sortable="true" resizable="true"></igx-column>
+                <igx-column field="Country" [movable]="true" sortable="true" resizable="true"></igx-column>
+            </igx-column-group>
+            <igx-column-group header="Contact Information">
+                <igx-column field="Phone" sortable="true" resizable="true"></igx-column>
+                <igx-column field="Fax" sortable="true" resizable="true"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+    
+        <igx-row-island [key]="'Orders'" [autoGenerate]="false">
+            <igx-column-group header="Order Information">
+                <igx-column-group header="Order Details" [headerTemplate]="columnGroupTemplate">
+                    <igx-column field="OrderID" [movable]="true" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="EmployeeID" [movable]="true" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="OrderDate" [movable]="true" sortable="true" resizable="true" [dataType]="'date'"></igx-column>
+                    <igx-column field="RequiredDate" [movable]="true" sortable="true" resizable="true" [dataType]="'date'"></igx-column>
+                </igx-column-group>
+                <igx-column-group header="General Shipping Information" [headerTemplate]="columnGroupTemplate">
+                    <igx-column field="ShippedDate" sortable="true" resizable="true" [dataType]="'date'"></igx-column>
+                    <igx-column field="ShipVia" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="Freight" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="ShipName" sortable="true" resizable="true"></igx-column>
+                </igx-column-group>
+                <igx-column-group header="Shipping Location" [headerTemplate]="columnGroupTemplate">
+                    <igx-column field="ShipAddress" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="ShipCity" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="ShipPostalCode" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="ShipCountry" sortable="true" resizable="true"></igx-column>
+                </igx-column-group>
+            </igx-column-group>
+            <igx-row-island [key]="'OrderDetails'" [autoGenerate]="false">
+                    <igx-column field="ProductID" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="UnitPrice" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="Quantity" sortable="true" resizable="true"></igx-column>
+                    <igx-column field="Discount" sortable="true" resizable="true"></igx-column>
+            </igx-row-island>
+        </igx-row-island>
+    
+    </igx-hierarchical-grid>
+</div>
\ No newline at end of file
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.scss b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.scss
new file mode 100644
index 0000000000..01ee897b3a
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.scss
@@ -0,0 +1,12 @@
+.grid__wrapper {
+    margin: 10px;
+}
+
+.column-group-template__container {
+    display: flex; 
+    align-items: center;
+}
+
+.column-group-template__icon {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.ts b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.ts
new file mode 100644
index 0000000000..510fe5cad0
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { IgxColumnGroupComponent, IgxHierarchicalGridComponent } from "igniteui-angular";
+import { CUSTOMERS } from "../data";
+
+@Component({
+    selector: "hierarchical-grid-multi-column-template",
+    styleUrls: ["./hierarchical-grid-multi-column-template.component.scss"],
+    templateUrl: "hierarchical-grid-multi-column-template.component.html"
+})
+
+export class HGridMultiHeaderTemplateSampleComponent implements OnInit {
+    public localData: any[];
+    public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
+
+    @ViewChild("hierarchicalGrid", { read: IgxHierarchicalGridComponent, static: true})
+    private hierarchicalGrid: IgxHierarchicalGridComponent;
+
+    constructor() {
+    }
+
+    public ngOnInit(): void {
+        this.localData = CUSTOMERS;
+        for (const item of this.localData) {
+            item.Location = `${item.Address}, ${item.City}, ${item.Country}`;
+        }
+    }
+
+    public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
+        const columns = columnGroup.children.toArray();
+
+        if (columnGroup.header === "General Information") {
+            const col = columns[1];
+            col.hidden = !col.hidden;
+        } else if (columnGroup.header === "Address Information") {
+            for (const col of columns) {
+                col.hidden = !col.hidden;
+            }
+        } else {
+            for (let i = 1; i < columns.length; i++) {
+                const col = columns[i];
+                col.hidden = !col.hidden;
+            }
+        }
+
+        this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
+    }
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.html b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.html
index dc930eba27..5d759faf02 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.html
@@ -1,5 +1,5 @@
 <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false" [paging]="true" [perPage]="10"
-    [height]="'550px'" [width]="'100%'" #hierarchicalGrid>
+    [height]="'550px'" [width]="'100%'" [paginationTemplate]="customPager" #hierarchicalGrid>
     <igx-column field="Artist"></igx-column>
     <igx-column field="Photo">
         <ng-template igxCell let-cell="cell">
@@ -16,12 +16,12 @@
         <igx-column field="LaunchDate" header="Launch Date" [dataType]="'date'"></igx-column>
         <igx-column field="BillboardReview" header="Billboard Review"></igx-column>
         <igx-column field="USBillboard200" header="US Billboard 200"></igx-column>
-    <igx-row-island [key]="'Songs'" [autoGenerate]="false" [paging]="true" [perPage]="5">
+        <igx-row-island [key]="'Songs'" [autoGenerate]="false" [paging]="true" [perPage]="5">
             <igx-column field="Number" header="No."></igx-column>
             <igx-column field="Title"></igx-column>
             <igx-column field="Released" dataType="date"></igx-column>
             <igx-column field="Genre"></igx-column>
-    </igx-row-island>
+        </igx-row-island>
     </igx-row-island>
     <igx-row-island [key]="'Tours'" [autoGenerate]="false" [paging]="true" [perPage]="5">
         <igx-column field="Tour"></igx-column>
@@ -29,4 +29,22 @@
         <igx-column field="Location"></igx-column>
         <igx-column field="Headliner"></igx-column>
     </igx-row-island>
-</igx-hierarchical-grid>
\ No newline at end of file
+</igx-hierarchical-grid>
+
+<ng-template #customPager let-grid>
+        <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-grid-paginator__pager" style="justify-content: center">
+                <button [disabled]="grid.isFirstPage" (click)="grid.paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
+                    <igx-icon>first_page</igx-icon>
+                </button>
+                <button [disabled]="grid.isFirstPage" (click)="grid.previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
+                    <igx-icon>chevron_left</igx-icon>
+                </button>
+                <span>{{ grid.page + 1 }} of {{ grid.totalPages }}</span>
+                <button [disabled]="grid.isLastPage" (click)="grid.nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
+                    <igx-icon>chevron_right</igx-icon>
+                </button>
+                <button [disabled]="grid.isLastPage" (click)="grid.paginate(grid.totalPages - 1)" igxButton="icon" igxRipple igxRippleCentered="true">
+                    <igx-icon>last_page</igx-icon>
+                </button>
+            </div>
+</ng-template>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
index 9c63f3645d..9c16e7f77b 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
+++ b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss
@@ -10,7 +10,7 @@ $dark-button: igx-button-theme( $icon-color: #FFCD0F, $icon-hover-color: #292826
 :host {
      ::ng-deep {
         @include igx-grid-paginator($dark-grid-paginator);
-        .igx-paginator {
+        .igx-grid-paginator__pager {
             @include igx-button($dark-button);
         }
     }
@@ -97,4 +97,4 @@ $dark-button: igx-button-theme( $icon-color: #FFCD0F, $icon-hover-color: #292826
 
 .cell__inner_2 {
     margin: 1px
-}
\ No newline at end of file
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging/hierarchical-grid-remote-paging.component.html b/src/app/hierarchical-grid/hierarchical-grid-paging/hierarchical-grid-remote-paging.component.html
index 7aa0e21d66..9550e75d14 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-paging/hierarchical-grid-remote-paging.component.html
+++ b/src/app/hierarchical-grid/hierarchical-grid-paging/hierarchical-grid-remote-paging.component.html
@@ -1,6 +1,6 @@
-<igx-hierarchical-grid [paging]="true" [perPage]="perPage"
-[primaryKey]="'CustomerID'" [height]="'550px'" [width]="'100%'" #hierarchicalGrid>
-<igx-column field="CustomerID"></igx-column>
+<igx-hierarchical-grid [paging]="true" [perPage]="perPage" [primaryKey]="'CustomerID'" [height]="'550px'"
+    [width]="'100%'" #hierarchicalGrid>
+    <igx-column field="CustomerID"></igx-column>
     <igx-column field="CompanyName"></igx-column>
     <igx-column field="ContactName"></igx-column>
     <igx-column field="ContactTitle"></igx-column>
@@ -24,22 +24,23 @@
 </igx-hierarchical-grid>
 
 <ng-template #customPager let-api>
-    <button [disabled]="firstPage" (click)="paginate(0, false)" igxButton="icon" igxRipple igxRippleCentered="true">
-        <igx-icon fontSet="material">first_page</igx-icon>
-    </button>
-    <button [disabled]="firstPage" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
-        <igx-icon fontSet="material">chevron_left</igx-icon>
-    </button>
-    <span>{{ page + 1 }} of {{totalPages}}</span>
-    <button [disabled]="lastPage" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
-        <igx-icon fontSet="material">chevron_right</igx-icon>
-    </button>
-    <button [disabled]="lastPage" (click)="paginate(totalPages - 1, false)" igxButton="icon" igxRipple
-        igxRippleCentered="true">
-        <igx-icon fontSet="material">last_page</igx-icon>
-    </button>
-    <select style="margin-left: 1rem;" (change)="parseToInt($event.target.value);">
-        <option [value]="val" [selected]="perPage == val" *ngFor="let val of [5, 10, 15, 20]">{{ val
-            }}</option>
-    </select>
-</ng-template>
\ No newline at end of file
+    <div class="igx-grid-paginator__pager" style="justify-content: center">
+        <button [disabled]="firstPage" (click)="paginate(0, false)" igxButton="icon" igxRipple igxRippleCentered="true">
+            <igx-icon fontSet="material">first_page</igx-icon>
+        </button>
+        <button [disabled]="firstPage" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
+            <igx-icon fontSet="material">chevron_left</igx-icon>
+        </button>
+        <span>{{ page + 1 }} of {{totalPages}}</span>
+        <button [disabled]="lastPage" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
+            <igx-icon fontSet="material">chevron_right</igx-icon>
+        </button>
+        <button [disabled]="lastPage" (click)="paginate(totalPages - 1, false)" igxButton="icon" igxRipple
+            igxRippleCentered="true">
+            <igx-icon fontSet="material">last_page</igx-icon>
+        </button>
+        <select style="margin-left: 1rem;" (change)="parseToInt($event.target.value);">
+            <option [value]="val" [selected]="perPage == val" *ngFor="let val of [5, 10, 15, 20]">{{ val }}</option>
+        </select>
+    </div>
+</ng-template>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
index 7b8fbbc2a8..cbdfc5cc8b 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
@@ -34,6 +34,7 @@ export const hierarchicalGridRoutesData = {
     "hierarchical-grid-lod": { displayName: "Hierarchical Grid Load on Demand", parentName: "Hierarchical Grid" },
     "hierarchical-grid-custom-kb-navigation": { displayName: "Hierarchical Grid Custom Keyboard Navigation", parentName: "Hierarchical Grid" },
     "hierarchical-grid-paging-style": { displayName: "HGrid Paging Style", parentName: "Hierarchical Grid" },
+    "hierarchical-grid-multi-column-template": { displayName: "Hierarchical Grid Multi Column Header Template", parentName: "Hierarchical Grid" },
     "hierarchical-grid-row-edit-style": { displayName: "HGrid Row Edit Style", parentName: "Hierarchical Grid" },
     "hierarchical-grid-toolbar-style": { displayName: "HGrid Toolbar Style", parentName: "Hierarchical Grid" }
 };
diff --git a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
index 82372e1061..3dc6415a1f 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
@@ -26,6 +26,7 @@ import { HGridCustomFilteringSampleComponent } from "./hierarchical-grid-filteri
 import { HGridFilteringSampleComponent } from "./hierarchical-grid-filtering/hierarchical-grid-filtering.component";
 import { HierarchicalGridLoDSampleComponent } from "./hierarchical-grid-lod/hierarchical-grid-lod.component";
 import { HGridMultiCellStyleComponent } from "./hierarchical-grid-multi-cell-style/hierarchical-grid-multi-cell-style.component";
+import { HGridMultiHeaderTemplateSampleComponent } from "./hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component";
 import { HGridMultiHeadersSampleComponent } from "./hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component";
 import { HGridPagingStyleSampleComponent } from "./hierarchical-grid-paging-style/hierarchical-grid-paging-style.component";
 import { HGridPagingSampleComponent } from "./hierarchical-grid-paging/hierarchical-grid-paging.component";
@@ -44,7 +45,6 @@ import { HierarchicalGridToolbarStyleComponent } from "./hierarchical-grid-toolb
 import { HGridToolbarCustomSampleComponent } from "./hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component";
 import { HGridToolbarOptionsSampleComponent } from "./hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component";
 import { HGridToolbarTitleSampleComponent } from "./hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component";
-/* tslint:enable:max-line-length */
 
 export const hierarchicalGridRoutes: Routes = [
     {
@@ -245,6 +245,11 @@ export const hierarchicalGridRoutes: Routes = [
         data: hierarchicalGridRoutesData["hierarchical-grid-paging-style"],
         path: "hierarchical-grid-paging-style"
     },
+    {
+        component: HGridMultiHeaderTemplateSampleComponent,
+        data: hierarchicalGridRoutesData["hierarchical-grid-multi-column-template"],
+        path: "hierarchical-grid-multi-column-template"
+    },
     {
         component: HierarchicalGridToolbarStyleComponent,
         // tslint:disable-next-line:no-string-literal
diff --git a/src/app/hierarchical-grid/hierarchical-grid.module.ts b/src/app/hierarchical-grid/hierarchical-grid.module.ts
index 0505f1e83b..889c311aad 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.module.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid.module.ts
@@ -34,6 +34,7 @@ import { HGridCustomFilteringSampleComponent } from "./hierarchical-grid-filteri
 import { HGridFilteringSampleComponent } from "./hierarchical-grid-filtering/hierarchical-grid-filtering.component";
 import { HierarchicalGridLoDSampleComponent } from "./hierarchical-grid-lod/hierarchical-grid-lod.component";
 import { HGridMultiCellStyleComponent } from "./hierarchical-grid-multi-cell-style/hierarchical-grid-multi-cell-style.component";
+import { HGridMultiHeaderTemplateSampleComponent } from "./hierarchical-grid-multi-column-header-template/hierarchical-grid-multi-column-template.component";
 import { HGridMultiHeadersSampleComponent } from "./hierarchical-grid-multi-column-headers/hierarchical-grid-multi-column.component";
 import { HGridPagingStyleSampleComponent } from "./hierarchical-grid-paging-style/hierarchical-grid-paging-style.component";
 import { HGridPagingSampleComponent } from "./hierarchical-grid-paging/hierarchical-grid-paging.component";
@@ -92,6 +93,7 @@ import { HGridToolbarTitleSampleComponent } from "./hierarchical-grid-toolbar/hi
         HGridCustomKBNavigationComponent,
         HGridRowReorderComponent,
         HGridResizeLineStylingComponent,
+        HGridMultiHeaderTemplateSampleComponent,
         HierarchicalGridToolbarStyleComponent
     ],
     imports: [
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index acc94078ae..2d5fa8b13a 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -20,9 +20,11 @@ export const layoutsRoutesData = {
     "tabbar": { displayName: "Bottom Navigation Overview", parentName: "Bottom Navigation" },
     "tabbar-sample-1": { displayName: "Bottom Navigation Simple Panels", parentName: "Bottom Navigation" },
     "tabbar-sample-2": { displayName: "Bottom Navigation Customizing Panels", parentName: "Bottom Navigation" },
+    "tabbar-sample-3": { displayName: "Bottom Navigation Routing", parentName: "Bottom Navigation" },
     "tabs-sample-1": { displayName: "Tabs Overview", parentName: "Tabs" },
     "tabs-sample-2": { displayName: "Tabs Types", parentName: "Tabs" },
     "tabs-sample-3": { displayName: "Tabs Customizing", parentName: "Tabs" },
+    "tabs-sample-6": { displayName: "Tabs Routing", parentName: "Tabs" },
     "card-sample-0": { displayName: "Elevated Card", parentName: "Card" },
     "card-sample-1": { displayName: "Outlined Card", parentName: "Card" },
     "card-sample-2": { displayName: "Horizontal Card", parentName: "Card" },
diff --git a/src/app/layouts/layouts-routing.module.ts b/src/app/layouts/layouts-routing.module.ts
index 23e357d781..96922a5b84 100644
--- a/src/app/layouts/layouts-routing.module.ts
+++ b/src/app/layouts/layouts-routing.module.ts
@@ -30,12 +30,22 @@ import { LayoutComponent } from "./layout/layout.component";
 import { layoutsRoutesData } from "./layouts-routes-data";
 import { TabbarSample1Component } from "./tabbar/tabbar-sample-1/tabbar-sample-1.component";
 import { TabbarSample2Component } from "./tabbar/tabbar-sample-2/tabbar-sample-2.component";
+import {
+    BottomNavRoutingView1Component,
+    BottomNavRoutingView2Component,
+    BottomNavRoutingView3Component,
+    TabbarSample3Component } from "./tabbar/tabbar-sample-3/tabbar-sample-3.component";
 import { TabbarComponent } from "./tabbar/tabbar.component";
 import { TabsSample1Component } from "./tabs/tabs-sample-1/tabs-sample-1.component";
 import { TabsSample2Component } from "./tabs/tabs-sample-2/tabs-sample-2.component";
 import { TabsSample3Component } from "./tabs/tabs-sample-3/tabs-sample-3.component";
 import { TabsSample4Component } from "./tabs/tabs-sample-4/components/tabs-sample-4.component";
 import { TabsSample5Component } from "./tabs/tabs-sample-5/components/tabs-sample-5.component";
+import {
+    TabsRoutingView1Component,
+    TabsRoutingView2Component,
+    TabsRoutingView3Component,
+    TabsSample6Component} from "./tabs/tabs-sample-6/tabs-sample-6.component";
 
 export const layoutsRoutes: Routes = [
     {
@@ -157,6 +167,16 @@ export const layoutsRoutes: Routes = [
         data: layoutsRoutesData["tabbar-sample-2"],
         path: "tabbar-sample-2"
     },
+    {
+        children: [
+            { path: "arrivals",   component: BottomNavRoutingView1Component },
+            { path: "departures", component: BottomNavRoutingView2Component },
+            { path: "canceled",   component: BottomNavRoutingView3Component }
+        ],
+        component: TabbarSample3Component,
+        data: layoutsRoutesData["tabbar-sample-3"],
+        path: "tabbar-sample-3"
+    },
     {
         component: TabsSample1Component,
         data: layoutsRoutesData["tabs-sample-1"],
@@ -180,6 +200,16 @@ export const layoutsRoutes: Routes = [
         component: TabsSample5Component,
         path: "tabs-sample-5"
     },
+    {
+        children: [
+            { path: "arrivals",   component: TabsRoutingView1Component },
+            { path: "departures", component: TabsRoutingView2Component },
+            { path: "canceled",   component: TabsRoutingView3Component }
+        ],
+        component: TabsSample6Component,
+        data: layoutsRoutesData["tabs-sample-6"],
+        path: "tabs-sample-6"
+    },
     {
         component: CardComponent,
         data: layoutsRoutesData["card-sample-0"],
diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts
index 3822d76fcf..8fd4043748 100644
--- a/src/app/layouts/layouts.module.ts
+++ b/src/app/layouts/layouts.module.ts
@@ -7,6 +7,7 @@ import {
     IgxButtonModule,
     IgxCardModule,
     IgxCarouselModule,
+    IgxCheckboxModule,
     IgxDividerModule,
     IgxExpansionPanelModule,
     IgxGridModule,
@@ -16,7 +17,9 @@ import {
     IgxListModule,
     IgxNavbarModule,
     IgxProgressBarModule,
+    IgxRadioModule,
     IgxRippleModule,
+    IgxSelectModule,
     IgxSliderModule,
     IgxTabsModule,
     IgxToastModule
@@ -50,18 +53,31 @@ import {LayoutComponent} from "./layout/layout.component";
 import {LayoutsRoutingModule} from "./layouts-routing.module";
 import {TabbarSample1Component} from "./tabbar/tabbar-sample-1/tabbar-sample-1.component";
 import {TabbarSample2Component} from "./tabbar/tabbar-sample-2/tabbar-sample-2.component";
+import {
+    BottomNavRoutingView1Component,
+    BottomNavRoutingView2Component,
+    BottomNavRoutingView3Component,
+    TabbarSample3Component} from "./tabbar/tabbar-sample-3/tabbar-sample-3.component";
 import {TabbarComponent} from "./tabbar/tabbar.component";
 import {TabsSample1Component} from "./tabs/tabs-sample-1/tabs-sample-1.component";
 import {TabsSample2Component} from "./tabs/tabs-sample-2/tabs-sample-2.component";
 import {TabsSample3Component} from "./tabs/tabs-sample-3/tabs-sample-3.component";
 import {TabsSample4Component} from "./tabs/tabs-sample-4/components/tabs-sample-4.component";
 import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-5.component";
+import {
+    TabsRoutingView1Component,
+    TabsRoutingView2Component,
+    TabsRoutingView3Component,
+    TabsSample6Component} from "./tabs/tabs-sample-6/tabs-sample-6.component";
 
 @NgModule({
     declarations: [
         AvatarSample1Component,
         AvatarSample2Component,
         AvatarSample3Component,
+        BottomNavRoutingView1Component,
+        BottomNavRoutingView2Component,
+        BottomNavRoutingView3Component,
         CardSample1Component,
         CardSample2Component,
         CardSample3Component,
@@ -87,6 +103,11 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         LayoutComponent,
         TabbarSample1Component,
         TabbarSample2Component,
+        TabbarSample3Component,
+        TabsRoutingView1Component,
+        TabsRoutingView2Component,
+        TabsRoutingView3Component,
+        TabsSample6Component,
         TabbarComponent,
         TabsSample1Component,
         TabsSample2Component,
@@ -106,6 +127,7 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         IgxButtonModule,
         IgxCardModule,
         IgxCarouselModule,
+        IgxCheckboxModule,
         IgxDividerModule,
         IgxExpansionPanelModule,
         IgxGridModule,
@@ -115,7 +137,9 @@ import {TabsSample5Component} from "./tabs/tabs-sample-5/components/tabs-sample-
         IgxListModule,
         IgxNavbarModule,
         IgxProgressBarModule,
+        IgxRadioModule,
         IgxRippleModule,
+        IgxSelectModule,
         IgxSliderModule,
         IgxTabsModule,
         IgxToastModule
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
new file mode 100644
index 0000000000..d7cdc10e8a
--- /dev/null
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.html
@@ -0,0 +1,28 @@
+<igx-select [value]="currentDocumentLocation" (onSelection)="handleSelection($event)">
+    <label igxLabel>URL</label>
+    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation">
+        {{ aLocation }}
+    </igx-select-item>
+</igx-select>
+
+<router-outlet></router-outlet>
+
+<igx-bottom-nav>
+    <igx-tab label="Arrivals" icon="flight_land"
+        routerLink="arrivals"
+        routerLinkActive #rla1="routerLinkActive"
+        [isSelected]="rla1.isActive">
+    </igx-tab>
+
+    <igx-tab label="Departures" icon="flight_takeoff"
+        routerLink="departures"
+        routerLinkActive #rla2="routerLinkActive"
+        [isSelected]="rla2.isActive">
+    </igx-tab>
+
+    <igx-tab label="Canceled" icon="cancel"
+        routerLink="canceled"
+        routerLinkActive #rla3="routerLinkActive"
+        [isSelected]="rla3.isActive">
+    </igx-tab>
+</igx-bottom-nav>
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
new file mode 100644
index 0000000000..3c57f34272
--- /dev/null
+++ b/src/app/layouts/tabbar/tabbar-sample-3/tabbar-sample-3.component.ts
@@ -0,0 +1,103 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { ISelectionEventArgs } from "igniteui-angular";
+
+@Component({
+    selector: "app-tabbar-sample-3",
+    styleUrls: ["tabbar-sample-3.component.scss"],
+    templateUrl: "tabbar-sample-3.component.html"
+})
+export class TabbarSample3Component implements OnInit {
+    public urlLocations = [
+        "",
+        "/arrivals",
+        "/departures",
+        "/canceled"
+    ];
+
+    constructor(private router: Router) { }
+
+    public get currentDocumentLocation() {
+        return document.location.pathname;
+    }
+
+    public ngOnInit() {
+        const currentAddress: string = document.location.href;
+        if (currentAddress.indexOf("/samples/layouts") !== -1) {
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/samples/layouts/tabbar-sample-3" + this.urlLocations[i];
+            }
+        } else
+        if (currentAddress.indexOf("/layouts") !== -1) {
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/layouts/tabbar-sample-3" + this.urlLocations[i];
+            }
+        }
+    }
+
+    public handleSelection(eventArgs: ISelectionEventArgs): void {
+        this.router.navigateByUrl(eventArgs.newSelection.value);
+    }
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class BottomNavRoutingView1Component {
+    public data = [
+        { Flight: "LH1702", From: "Munich", Time: "12:25", Status: "Landed"},
+        { Flight: "W64332", From: "Dortmund", Time: "12:25", Status: "Expected"},
+        { Flight: "W64428", From: "Tel Aviv", Time: "12:40", Status: "Expected"},
+        { Flight: "OS795", From: "Vienna", Time: "12:45", Status: "Expected"},
+        { Flight: "UA9832", From: "Vienna", Time: "12:45", Status: "Expected"}
+    ];
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class BottomNavRoutingView2Component {
+    public data = [
+        { Flight: "SU2061", From: "Moscow", Time: "12:25", Status: "Boarding"},
+        { Flight: "FB1363", From: "Moscow", Time: "12:25", Status: "Boarding"},
+        { Flight: "FB491", From: "Zurich", Time: "12:30", Status: "Taxing"},
+        { Flight: "FR6043", From: "Munich", Time: "12:40", Status: "Boarding"},
+        { Flight: "W64329", From: "Frankfurt", Time: "12:55", Status: "Expected"},
+        { Flight: "QR228", From: "Doha", Time: "13:00", Status: "Check-in"}
+    ];
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class BottomNavRoutingView3Component {
+    public data = [
+        { Flight: "FB1363", From: "Moscow", Time: "12:25", Status: "Cancelled"},
+        { Flight: "FB491", From: "Zurich", Time: "12:30", Status: "Cancelled"},
+        { Flight: "FB437", From: "Frankfurt", Time: "12:45", Status: "Cancelled"}
+    ];
+}
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
new file mode 100644
index 0000000000..771244930a
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.html
@@ -0,0 +1,28 @@
+<igx-select [value]="currentDocumentLocation" (onSelection)="handleSelection($event)">
+    <label igxLabel>URL</label>
+    <igx-select-item *ngFor="let aLocation of urlLocations" [value]="aLocation">
+        {{ aLocation }}
+    </igx-select-item>
+</igx-select>
+
+<igx-tabs>
+    <igx-tab-item label="Arrivals" icon="flight_land"
+        routerLink="arrivals"
+        routerLinkActive #rla1="routerLinkActive"
+        [isSelected]="rla1.isActive">
+    </igx-tab-item>
+    
+    <igx-tab-item label="Departures" icon="flight_takeoff"
+        routerLink="departures"
+        routerLinkActive #rla2="routerLinkActive"
+        [isSelected]="rla2.isActive">
+    </igx-tab-item>
+
+    <igx-tab-item label="Canceled" icon="cancel"
+        routerLink="canceled"
+        routerLinkActive #rla3="routerLinkActive"
+        [isSelected]="rla3.isActive">
+    </igx-tab-item>
+</igx-tabs>
+
+<router-outlet></router-outlet>
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
new file mode 100644
index 0000000000..9dc7a825d9
--- /dev/null
+++ b/src/app/layouts/tabs/tabs-sample-6/tabs-sample-6.component.ts
@@ -0,0 +1,103 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { ISelectionEventArgs } from "igniteui-angular";
+
+@Component({
+    selector: "app-tabs-sample-6",
+    styleUrls: ["./tabs-sample-6.component.scss"],
+    templateUrl: "./tabs-sample-6.component.html"
+})
+export class TabsSample6Component implements OnInit {
+    public urlLocations = [
+        "",
+        "/arrivals",
+        "/departures",
+        "/canceled"
+    ];
+
+    constructor(private router: Router) { }
+
+    public get currentDocumentLocation() {
+        return document.location.pathname;
+    }
+
+    public ngOnInit() {
+        const currentAddress: string = document.location.href;
+        if (currentAddress.indexOf("/samples/layouts") !== -1) {
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/samples/layouts/tabs-sample-6" + this.urlLocations[i];
+            }
+        } else
+        if (currentAddress.indexOf("/layouts") !== -1) {
+            for (let i = 0; i < this.urlLocations.length; i++) {
+                this.urlLocations[i] = "/layouts/tabs-sample-6" + this.urlLocations[i];
+            }
+        }
+    }
+
+    public handleSelection(eventArgs: ISelectionEventArgs): void {
+        this.router.navigateByUrl(eventArgs.newSelection.value);
+    }
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class TabsRoutingView1Component {
+    public data = [
+        { Flight: "LH1702", From: "Munich", Time: "12:25", Status: "Landed"},
+        { Flight: "W64332", From: "Dortmund", Time: "12:25", Status: "Expected"},
+        { Flight: "W64428", From: "Tel Aviv", Time: "12:40", Status: "Expected"},
+        { Flight: "OS795", From: "Vienna", Time: "12:45", Status: "Expected"},
+        { Flight: "UA9832", From: "Vienna", Time: "12:45", Status: "Expected"}
+    ];
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class TabsRoutingView2Component {
+    public data = [
+        { Flight: "SU2061", From: "Moscow", Time: "12:25", Status: "Boarding"},
+        { Flight: "FB1363", From: "Moscow", Time: "12:25", Status: "Boarding"},
+        { Flight: "FB491", From: "Zurich", Time: "12:30", Status: "Taxing"},
+        { Flight: "FR6043", From: "Munich", Time: "12:40", Status: "Boarding"},
+        { Flight: "W64329", From: "Frankfurt", Time: "12:55", Status: "Expected"},
+        { Flight: "QR228", From: "Doha", Time: "13:00", Status: "Check-in"}
+    ];
+}
+
+@Component({
+    template: `
+        <br>
+        <igx-grid [data]="data">
+            <igx-column [field]="'Flight'" width="100"></igx-column>
+            <igx-column [field]="'From'" width="120"></igx-column>
+            <igx-column [field]="'Time'" width="100"></igx-column>
+            <igx-column [field]="'Status'" width="120"></igx-column>
+        </igx-grid>
+    `
+})
+export class TabsRoutingView3Component {
+    public data = [
+        { Flight: "FB1363", From: "Moscow", Time: "12:25", Status: "Cancelled"},
+        { Flight: "FB491", From: "Zurich", Time: "12:30", Status: "Cancelled"},
+        { Flight: "FB437", From: "Frankfurt", Time: "12:45", Status: "Cancelled"}
+    ];
+}
diff --git a/src/app/maps/MapDisplayImageryBingTiles/component.ts b/src/app/maps/MapDisplayImageryBingTiles/component.ts
index 9e65445467..e18205bb4f 100644
--- a/src/app/maps/MapDisplayImageryBingTiles/component.ts
+++ b/src/app/maps/MapDisplayImageryBingTiles/component.ts
@@ -24,7 +24,6 @@ export class MapDisplayImageryBingTiles implements AfterViewInit {
         tileSource.apiKey = MapUtility.getBingKey();
         tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels;
         let tileUri = tileSource.actualBingImageryRestUri;
-        console.log("tileUri " + tileUri);
 
         // resolving BingMaps uri based on HTTP protocol of hosting website
         const isHttpSecured = window.location.toString().startsWith("https:");
@@ -34,7 +33,6 @@ export class MapDisplayImageryBingTiles implements AfterViewInit {
             tileUri = tileUri.replace("https:", "http:");
         }
         tileSource.bingImageryRestUri = tileUri;
-        console.log("tileUri " + tileUri);
 
         this.map.backgroundContent = tileSource;
 
diff --git a/src/app/maps/geo-map-binding-multiple-shapes/map-binding-multiple-shapes.component.html b/src/app/maps/geo-map-binding-multiple-shapes/map-binding-multiple-shapes.component.html
index 910bdd39a0..091ece03f7 100644
--- a/src/app/maps/geo-map-binding-multiple-shapes/map-binding-multiple-shapes.component.html
+++ b/src/app/maps/geo-map-binding-multiple-shapes/map-binding-multiple-shapes.component.html
@@ -1,48 +1,51 @@
 <igx-geographic-map
     #map
+    name="map"
     width="100%"
     height="calc(100% - 60px)"
     zoomable="true" >
-    <igx-geographic-shape-series #shapeSeries
-                name="polygonSeries"
-                shapeMemberPath="points"
-                shapeFill="rgb(150, 150, 150)"
-                shapeStroke="Black"
-                shapeStrokeThickness={1.0} >
+    <igx-geographic-shape-series
+    #shapeSeries
+    name="polygonSeries"
+    shapeMemberPath="points"
+    shapeFill="rgba(184, 183, 183, 0.5)"
+    shapeStroke="Black"
+    shapeStrokeThickness={1.0} >
     </igx-geographic-shape-series>
-    <igx-geographic-polyline-series  #polylineSeries
-            [tooltipTemplate]="polylineTooltipTemplate"
-                  name="polylineSeries"
-                 shapeMemberPath="points"
-                 shapeStroke="rgba(147, 15, 180, 0.5)"
-                 thickness={3.0} >
+    <igx-geographic-polyline-series
+    #polylineSeries
+    name="polylineSeries"
+    shapeMemberPath="points"
+    shapeStroke="rgba(13, 124, 252, 0.9)"
+    thickness={2.0} >
     </igx-geographic-polyline-series>
-    <igx-geographic-symbol-series  #symbolSeries
-        name="symbolSeries"
-        longitudeMemberPath="longitude"
-        latitudeMemberPath="latitude"
-        markerType="Circle"
-        markerOutline="rgb(2, 102, 196)"
-        markerBrush="White" >
+    <igx-geographic-symbol-series
+    #symbolSeries
+    name="symbolSeries"
+    longitudeMemberPath="longitude"
+    latitudeMemberPath="latitude"
+    markerType="Circle"
+    markerOutline="Red"
+    markerBrush="White" >
     </igx-geographic-symbol-series>
 </igx-geographic-map>
 
-<ng-template let-series="series" let-item="item" #polylineTooltipTemplate>
+<ng-template let-series="series" let-item="item" #polylineTooltip>
     <div>
         <span>
-        {{item.capacity}}
+        Cable: {{item.name}}
         </span>
         <br />
         <span>
-        Distance: {{item.distance}}
+        Length: {{item.distance}}
         </span>
     </div>
 </ng-template>
 
-<ng-template let-series="series" let-item="item" #shapeTooltipTemplate>
+<ng-template let-series="series" let-item="item" #shapeTooltip>
     <div>
         <span>
-        {{item.name}}
+            Country: {{item.name}}
         </span>
         <br />
         <span>
@@ -51,10 +54,14 @@
     </div>
 </ng-template>
 
-<ng-template let-series="series" let-item="item" #pointTooltipTemplate>
+<ng-template let-series="series" let-item="item" #pointTooltip>
     <div>
         <span [style.color]="series.brush">
-                City: {{item.city}}
+            City: {{item.city}}
+        </span>
+        <br />
+        <span>
+            Population: {{item.population}}
         </span>
     </div>
 </ng-template>
diff --git a/src/app/maps/geo-map-binding-multiple-shapes/map-binding-multiple-shapes.component.ts b/src/app/maps/geo-map-binding-multiple-shapes/map-binding-multiple-shapes.component.ts
index 8f238daed7..2d435ba2a5 100644
--- a/src/app/maps/geo-map-binding-multiple-shapes/map-binding-multiple-shapes.component.ts
+++ b/src/app/maps/geo-map-binding-multiple-shapes/map-binding-multiple-shapes.component.ts
@@ -26,14 +26,14 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit {
     @ViewChild("symbolSeries", {static: true})
     public symbolSeries: IgxGeographicSymbolSeriesComponent;
 
-    @ViewChild("polylineTooltipTemplate", {static: true})
-    public polylineTooltipTemplate: TemplateRef<object>;
+    @ViewChild("polylineTooltip", {static: true})
+    public polylineTooltip: TemplateRef<object>;
 
-    @ViewChild("shapeTooltipTemplate", {static: true})
-    public shapeTooltipTemplate: TemplateRef<object>;
+    @ViewChild("shapeTooltip", {static: true})
+    public shapeTooltip: TemplateRef<object>;
 
-    @ViewChild("pointTooltipTemplate", {static: true})
-    public pointTooltipTemplate: TemplateRef<object>;
+    @ViewChild("pointTooltip", {static: true})
+    public pointTooltip: TemplateRef<object>;
 
     constructor() {
     }
@@ -41,6 +41,7 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit {
     public ngAfterViewInit(): void {
 
         this.map.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
+        this.map.backgroundContent = null;
 
         // loading a shapefile with geographic polygons
         const sdsPolygons = new ShapeDataSource();
@@ -54,7 +55,6 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit {
         sdsPolylines.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
         sdsPolylines.dataBind();
         sdsPolylines.importCompleted.subscribe(() => this.onPolylinesLoaded(sdsPolylines, ""));
-
         // loading a shapefile with geographic points
         const sdsPoints = new ShapeDataSource();
         sdsPoints.importCompleted.subscribe(() => this.onPointsLoaded(sdsPoints, ""));
@@ -70,19 +70,21 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit {
         // parsing shapefile data and creating geo-locations
         for (const record of sds.getPointData()) {
             const pop = record.fieldValues.POPULATION;
-            if (pop > 0) {
+            if (pop > 1000000) {
                 // each shapefile record has just one point
                 const location = {
                     city: record.fieldValues.NAME,
                     latitude: record.points[0][0].y,
                     longitude: record.points[0][0].x,
-                    population: pop
+                    population: (pop / 1000000).toFixed(0) + "M"
                 };
                 geoLocations.push(location);
             }
         }
         this.symbolSeries.dataSource = geoLocations;
-        this.symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
+        this.symbolSeries.markerOutline = "Red";
+        this.symbolSeries.markerBrush = "White";
+        this.symbolSeries.tooltipTemplate = this.pointTooltip;
     }
 
     public onPolylinesLoaded(sds: ShapeDataSource, e: any) {
@@ -103,12 +105,12 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit {
             };
             geoPolylines.push(route);
         }
-        this.polylineSeries.dataSource = geoPolylines;
         this.polylineSeries.shapeMemberPath = "points";
         this.polylineSeries.shapeFilterResolution = 2.0;
         this.polylineSeries.shapeStrokeThickness = 2;
-        this.polylineSeries.shapeStroke = "rgba(252, 32, 32, 0.9)";
-        this.polylineSeries.tooltipTemplate = this.polylineTooltipTemplate;
+        this.polylineSeries.shapeStroke = "rgba(13, 124, 252, 0.9)";
+        this.polylineSeries.tooltipTemplate = this.polylineTooltip;
+        this.polylineSeries.dataSource = geoPolylines;
     }
 
     public onPolygonsLoaded(sds: ShapeDataSource, e: any) {
@@ -118,15 +120,18 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit {
         // parsing shapefile data and creating geo-polygons
         sds.getPointData().forEach((record) => {
             // using field/column names from .DBF file
+            const pop = record.fieldValues.POPULATION;
             const country = {
                 gdp: record.fieldValues.GDP,
                 name: record.fieldValues.NAME,
                 points: record.points,
-                population: record.fieldValues.POPULATION
+                population: (pop / 1000000).toFixed(1) + "M"
             };
             geoPolygons.push(country);
         });
         this.shapeSeries.dataSource = geoPolygons;
-        this.shapeSeries.tooltipTemplate = this.shapeTooltipTemplate;
+        this.shapeSeries.shapeStroke = "Black";
+        this.shapeSeries.shapeFill = "rgba(184, 183, 183, 0.5)";
+        this.shapeSeries.tooltipTemplate = this.shapeTooltip;
     }
 }
diff --git a/src/app/maps/geo-map-binding-shp-polylines/map-binding-shp-polylines.component.html b/src/app/maps/geo-map-binding-shp-polylines/map-binding-shp-polylines.component.html
index aae41763f8..56135d4dc1 100644
--- a/src/app/maps/geo-map-binding-shp-polylines/map-binding-shp-polylines.component.html
+++ b/src/app/maps/geo-map-binding-shp-polylines/map-binding-shp-polylines.component.html
@@ -7,11 +7,11 @@
 <ng-template let-series="series" let-item="item" #template>
     <div>
         <span>
-        Airline: {{item.name}}
+        Cable: {{item.name}}
         </span>
         <br />
         <span>
-        Length: {{item.distance}} miles
+        Length: {{item.distance}} KM
         </span>
     </div>
 </ng-template>
diff --git a/src/app/maps/geo-map-custom-tooltips/map-custom-tooltips.component.html b/src/app/maps/geo-map-custom-tooltips/map-custom-tooltips.component.html
index cab3a20529..766bf57d79 100644
--- a/src/app/maps/geo-map-custom-tooltips/map-custom-tooltips.component.html
+++ b/src/app/maps/geo-map-custom-tooltips/map-custom-tooltips.component.html
@@ -6,8 +6,16 @@
 
 <ng-template let-series="series" let-item="item" #template>
     <div>
+        <span [style.color]="series.markerOutline">
+            City: {{item.name}}
+        </span>
+        <br />
+        <span>
+            Longitude: {{item.lon}}
+        </span>
+        <br />
         <span>
-            {{item.name}}
+            Latitude: {{item.lat}}
         </span>
     </div>
 </ng-template>
diff --git a/src/app/maps/geo-map-display-imagery-heat-tiles/map-display-imagery-heat-tiles.component.html b/src/app/maps/geo-map-display-imagery-heat-tiles/map-display-imagery-heat-tiles.component.html
index 15ecbaa7e8..bf3715143c 100644
--- a/src/app/maps/geo-map-display-imagery-heat-tiles/map-display-imagery-heat-tiles.component.html
+++ b/src/app/maps/geo-map-display-imagery-heat-tiles/map-display-imagery-heat-tiles.component.html
@@ -1,3 +1,2 @@
 <igx-geographic-map #map width="100%" height="calc(100% - 60px)">
-    <igx-geographic-tile-series name="heatTiles" [tileImagery]="tileImagery"></igx-geographic-tile-series>
-</igx-geographic-map>
\ No newline at end of file
+</igx-geographic-map>
diff --git a/src/app/maps/geo-map-display-imagery-heat-tiles/map-display-imagery-heat-tiles.component.ts b/src/app/maps/geo-map-display-imagery-heat-tiles/map-display-imagery-heat-tiles.component.ts
index cb84831060..58f09acfc8 100644
--- a/src/app/maps/geo-map-display-imagery-heat-tiles/map-display-imagery-heat-tiles.component.ts
+++ b/src/app/maps/geo-map-display-imagery-heat-tiles/map-display-imagery-heat-tiles.component.ts
@@ -1,9 +1,10 @@
-import { Component, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, ViewChild } from "@angular/core";
 
 import { HeatTileGenerator } from "igniteui-angular-core/ES5/igx-heat-tile-generator";
 import { ShapeDataSource } from "igniteui-angular-core/ES5/igx-shape-data-source";
 
 import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geographic-map-component";
+import { IgxGeographicTileSeriesComponent } from "igniteui-angular-maps/ES5/igx-geographic-tile-series-component";
 import { TileGeneratorMapImagery } from "igniteui-angular-maps/ES5/igx-tile-generator-map-imagery";
 
 @Component({
@@ -11,23 +12,18 @@ import { TileGeneratorMapImagery } from "igniteui-angular-maps/ES5/igx-tile-gene
     templateUrl: "./map-display-imagery-heat-tiles.component.html",
     styleUrls: ["./map-display-imagery-heat-tiles.component.scss"]
 })
-export class MapDisplayImageryHeatTilesComponent {
+export class MapDisplayImageryHeatTilesComponent implements AfterViewInit {
 
     @ViewChild("map", { static: true })
     public map: IgxGeographicMapComponent;
-
-    public data: any[];
     public tileImagery: TileGeneratorMapImagery;
 
     constructor() {
-        this.data = this.initData();
-
         this.tileImagery = new TileGeneratorMapImagery();
 
-        const con: ShapeDataSource = new ShapeDataSource();
-
-        con.importCompleted.subscribe((s, e) => {
-            const data = con.getPointData();
+        const sds: ShapeDataSource = new ShapeDataSource();
+        sds.importCompleted.subscribe((s, e) => {
+            const data = sds.getPointData();
             const lat: number[] = [];
             const lon: number[] = [];
             const val: number[] = [];
@@ -41,7 +37,7 @@ export class MapDisplayImageryHeatTilesComponent {
                         lon.push(pointsList[k].x);
                     }
                 }
-                const value = item.fieldValues["POP_2010"];
+                const value = parseInt(item.fieldValues["POP2010"], 10);
                 if (value >= 0) {
                     val.push(value);
                 } else {
@@ -49,6 +45,7 @@ export class MapDisplayImageryHeatTilesComponent {
                 }
             }
 
+            // generating heat map imagery tiles
             const gen = new HeatTileGenerator();
             gen.xValues = lon;
             gen.yValues = lat;
@@ -56,46 +53,37 @@ export class MapDisplayImageryHeatTilesComponent {
             gen.blurRadius = 6;
             gen.maxBlurRadius = 20;
             gen.useBlurRadiusAdjustedForZoom = true;
-            gen.minimumColor = "rgba(100,255, 0, 0.3922)";
-            gen.maximumColor = "rgba(255, 255, 0, 0.9412)";
+            gen.minimumColor = "rgba(100, 255, 0, 0.5)";
+            gen.maximumColor = "rgba(255, 255, 0, 0.5)";
             gen.useGlobalMinMax = true;
             gen.useGlobalMinMaxAdjustedForZoom = true;
             gen.useLogarithmicScale = true;
             gen.useWebWorkers = true;
-            gen.webWorkerInstance = new Worker("../heatworker.worker", { type: "module" });
+            // gen.webWorkerInstance = new Worker();
+            gen.webWorkerInstance = new Worker("../heatmap.worker", { type: "module" });
 
             gen.scaleColors = [
-                "rgba(0, 0, 255, 64)",
-                "rgba(0, 255, 255, 96)",
-                "rgba(0, 255, 0, 160)",
-                "rgba(255, 255, 0, 180)",
-                "rgba(255, 0, 0, 200)"
+                "rgba(0, 0, 255, .251)", "rgba(0, 255, 255, .3765)",
+                "rgba(50,205,50, .2675)", "rgba(255, 255, 0, .7059)",
+                "rgba(255, 0, 0, .7843)"
             ];
-
             this.tileImagery.tileGenerator = gen;
+
+            // generating heat map series
+            const series = new IgxGeographicTileSeriesComponent();
+            series.name = "heatMapSeries";
+            series.tileImagery = this.tileImagery;
+
+            // add heat map series to the map
+            this.map.series.add(series);
         });
 
-        con.shapefileSource = "assets/Shapes/AmericanCities.shp";
-        con.databaseSource = "assets/Shapes/AmericanCities.dbf";
-        con.dataBind();
+        sds.shapefileSource = "assets/Shapes/AmericanCities.shp";
+        sds.databaseSource = "assets/Shapes/AmericanCities.dbf";
+        sds.dataBind();
     }
 
-    public initData(): any {
-        const rows: any[] = [];
-        for (let i = 0; i < 5; i++) {
-            rows.push({
-                index: i,
-                name: "row" + i,
-                state: "Initial... Initial... Initial... Initial... ",
-                value: i * 10
-            });
-        }
-        rows.push({
-            index: 5,
-            name: "row5",
-            state: "Initial",
-            value: undefined
-        });
-        return rows;
+    public ngAfterViewInit(): void {
+        this.map.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
     }
 }
diff --git a/src/app/maps/geo-map-routes-data.ts b/src/app/maps/geo-map-routes-data.ts
index 95c0434582..4f41974207 100644
--- a/src/app/maps/geo-map-routes-data.ts
+++ b/src/app/maps/geo-map-routes-data.ts
@@ -6,6 +6,7 @@ export const geoMapRoutesData = {
     "geo-map-display-osm-imagery": { displayName: "Displaying OSM Imagery", parentName: "Geo Map" },
     "geo-map-display-bing-imagery": { displayName: "Displaying Bing Imagery", parentName: "Geo Map" },
     "geo-map-display-esri-imagery": { displayName: "Displaying Esri Imagery", parentName: "Geo Map" },
+    "geo-map-display-heat-imagery": { displayName: "Displaying Heat Tiles", parentName: "Geo Map" },
 
     "geo-map-binding-data-csv": { displayName: "Binding Data CSV", parentName: "Geo Map" },
     "geo-map-binding-data-json-points": { displayName: "Binding Data JSON", parentName: "Geo Map" },
@@ -22,6 +23,5 @@ export const geoMapRoutesData = {
     "geo-map-type-scatter-density-series": { displayName: "Scatter Density Series", parentName: "Geo Map" },
     "geo-map-type-scatter-symbol-series": { displayName: "Scatter Symbol Series", parentName: "Geo Map" },
     "geo-map-type-shape-polygon-series": { displayName: "Shape Polygon Series", parentName: "Geo Map" },
-    "geo-map-type-shape-polyline-series": { displayName: "Shape Polyline Series", parentName: "Geo Map" },
-    "geo-map-display-heat-imagery" : { displayName: "Display Heat Tiles", parentName: "Geo Map" }
+    "geo-map-type-shape-polyline-series": { displayName: "Shape Polyline Series", parentName: "Geo Map" }
 };
diff --git a/src/app/maps/geo-map-routing.module.ts b/src/app/maps/geo-map-routing.module.ts
index 1c2582442f..5bcd65dffe 100644
--- a/src/app/maps/geo-map-routing.module.ts
+++ b/src/app/maps/geo-map-routing.module.ts
@@ -26,7 +26,6 @@ import { MapDisplayImageryBingTiles } from "./MapDisplayImageryBingTiles/compone
 import { MapDisplayImageryEsriTiles } from "./MapDisplayImageryEsriTiles/component";
 import { MapDisplayImageryOSM } from "./MapDisplayImageryOSM/component";
 
-
 export const routes: Routes = [
     {
         component: MapDisplayImageryBingTiles,
diff --git a/src/app/maps/heatworker.worker.ts b/src/app/maps/heatmap.worker.ts
similarity index 100%
rename from src/app/maps/heatworker.worker.ts
rename to src/app/maps/heatmap.worker.ts
diff --git a/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.html b/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.html
new file mode 100644
index 0000000000..587bef4910
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.html
@@ -0,0 +1,44 @@
+<div class="wrapper theme">
+    <div class="sample-content">
+        <div class="sample-column">
+            <igx-input-group type="box">
+                <label igxLabel>Change copy separator</label>
+                <input type="text" igxInput [(ngModel)]="options.separator" />
+                <igx-suffix (pointerup)="options.separator = '\t'">
+                    <igx-icon>clear</igx-icon>
+                </igx-suffix>
+                <igx-hint>
+                    The default value is a single tabulation which is shown as whitespace above.
+                    Click the clear icon to reset it back to tabulation.
+                </igx-hint>
+            </igx-input-group>
+            <div class="grid-wrapper">
+                <igx-tree-grid #grid1 [data]="data" childDataKey="Employees" (onColumnInit)="initColumn($event)"
+                    [autoGenerate]="false" [showToolbar]="true" [clipboardOptions]="options">
+                    <igx-column field="ID"></igx-column>
+                    <igx-column field="HireDate" dataType="date"></igx-column>
+                    <igx-column field="Age" dataType="number" ></igx-column>
+                    <igx-column field="Name" dataType="string"></igx-column>
+                    <ng-template igxToolbarCustomContent let-grid="grid">
+                        <div class="tlb">
+                            <igx-switch [(ngModel)]="options.enabled">Grid copy behavior</igx-switch>
+                            <igx-switch [(ngModel)]="options.copyHeaders">Copying of header labels</igx-switch>
+                            <igx-switch [(ngModel)]="options.copyFormatters">Copying column formatters</igx-switch>
+                            <button igxButton="outlined" igxRippleCentered="true" (click)="grid.clearCellSelection()">
+                                <igx-icon fontSet="material">clear</igx-icon>
+                                Selection
+                            </button>
+                        </div>
+                    </ng-template>
+                </igx-tree-grid>
+            </div>
+
+            <div style="margin-top: 0.5rem">
+                <igx-input-group type="box">
+                    <label igxLabel>Paste your data here (or in Excel)</label>
+                    <textarea igxInput cols="30" rows="5"></textarea>
+                </igx-input-group>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.scss b/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.scss
new file mode 100644
index 0000000000..61f01b4cd2
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.scss
@@ -0,0 +1,40 @@
+@import '~igniteui-angular/lib/core/styles/themes/index';
+
+@mixin scrollbar-love($scrollbar-color: null) {
+    $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
+    $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
+
+    @if $scrollbar-color and luminance($scrollbar-color) < .5 {
+        $scrollbar-track: darken($scrollbar-color, 8%);
+        $scrollbar-thumb: lighten($scrollbar-color, 20%);
+    }
+
+    ::-webkit-scrollbar {
+        width: 16px;
+        height: 16px;
+        background-color: $scrollbar-track;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: $scrollbar-thumb;
+    }
+}
+
+:host ::ng-deep {
+    @include scrollbar-love();
+
+    .igx-switch__label {
+        line-height: 1rem;
+    }
+}
+
+.tlb {
+    display: flex;
+    max-width: 734px;
+}
+
+.grid-wrapper {
+    width: 50wh; 
+    height: 364px;
+    margin-top: 7px;
+}
\ No newline at end of file
diff --git a/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.ts b/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.ts
new file mode 100644
index 0000000000..1ac8396572
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnInit } from "@angular/core";
+import { EMPLOYEE_DATA } from "../tree-grid-childdatakey-sample/data";
+
+@Component({
+    selector: "tree-grid-clipboard-operations-sample",
+    styleUrls: ["tree-grid-clipboard-operations-sample.component.scss"],
+    templateUrl: "./tree-grid-clipboard-operations-sample.component.html"
+})
+export class TreeGridClipboardSampleComponent implements OnInit {
+
+    public data: any[];
+    public options = {
+        enabled: true,
+        copyHeaders: true,
+        copyFormatters: true,
+        separator: "\t"
+    };
+    private frmt: Intl.DateTimeFormat;
+
+    constructor() {
+        this.data = EMPLOYEE_DATA;
+    }
+
+    public ngOnInit() {
+    }
+
+    public formatter = (value: any) => `** ${value} **`;
+    public formatDate(val: Date) {
+        if (!this.frmt) {
+            this.frmt = new Intl.DateTimeFormat("en-US");
+        }
+        return this.frmt.format(val);
+    }
+    public initColumn(column) {
+        if (column.dataType === "date") {
+            column.formatter = this.formatDate;
+        } else {
+            column.formatter = this.formatter;
+        }
+        column.header = `🎉${column.field}`;
+    }
+}
diff --git a/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.html b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.html
new file mode 100644
index 0000000000..798be0b37b
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.html
@@ -0,0 +1,38 @@
+<div class="grid__wrapper">
+    <ng-template #columnGroupTemplate let-col>
+        <div class="column-group-template__container">
+            <igx-icon [attr.draggable]="false"
+                      (click)="toggleColumnGroup(col)"
+                      class="column-group-template__icon">
+                      {{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}}</igx-icon>
+            {{col.header}}
+        </div>
+    </ng-template>
+
+    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [rowSelectable]="false" height="480px"
+        displayDensity="compact" [allowFiltering]="true" width="100%">
+        <igx-column field="Name" dataType="string" [movable]="true" [sortable]="true" [resizable]="true" width="200px"></igx-column>
+        <igx-column-group [movable]="true" [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
+            <igx-column field="HireDate" dataType="date" [movable]="true" [sortable]="true" [resizable]="true"></igx-column>
+            <igx-column-group [movable]="true" header="Person Details">
+                <igx-column field="ID" dataType="number" [movable]="true" [resizable]="true" [filterable]="false"></igx-column>
+                <igx-column field="Title" dataType="string" [movable]="true" [sortable]="true" [resizable]="true"></igx-column>
+                <igx-column field="Age" dataType="number" [movable]="true" [sortable]="true" [resizable]="true"></igx-column>
+            </igx-column-group>            
+        </igx-column-group>
+        <igx-column-group header="Address Information" [headerTemplate]="columnGroupTemplate">
+            <igx-column sortable="true" resizable="true" field="Location" hidden="true"></igx-column>
+            <igx-column sortable="true" resizable="true" field="Phone" hidden="true"></igx-column>
+            <igx-column-group header="Location">
+                <igx-column field="Country" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
+                <igx-column field="City" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
+                <igx-column field="Address" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
+            </igx-column-group>
+            <igx-column-group header="Contact Information">
+                <igx-column field="Phone" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
+                <igx-column field="Fax" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
+                <igx-column field="PostalCode" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+    </igx-tree-grid>
+</div>
diff --git a/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.scss b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.scss
new file mode 100644
index 0000000000..386cbb8c38
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.scss
@@ -0,0 +1,12 @@
+.grid__wrapper {
+    margin: 10px;
+}
+
+.column-group-template__container {
+    display: flex; 
+    align-items: center;
+}
+
+.column-group-template__icon {
+    cursor: pointer;
+}
diff --git a/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.ts b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.ts
new file mode 100644
index 0000000000..c28c5feb0d
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component.ts
@@ -0,0 +1,37 @@
+import { Component, ViewChild } from "@angular/core";
+import { IgxColumnGroupComponent, IgxTreeGridComponent } from "igniteui-angular";
+import { generateEmployeeDetailedFlatData } from "../data/employees-flat-detailed";
+
+@Component({
+  selector: "app-tree-grid-multi-column-header-template-sample",
+  styleUrls: ["./tree-grid-multi-column-header-template-sample.component.scss"],
+  templateUrl: "./tree-grid-multi-column-header-template-sample.component.html"
+})
+export class TreeGridMultiColumnHeaderTemplateSampleComponent {
+
+    @ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent, static: true })
+    public treeGrid: IgxTreeGridComponent;
+    public data: any[] = generateEmployeeDetailedFlatData();
+    public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
+
+    constructor() {
+        for (const item of this.data) {
+            item.Location = `${item.Address}, ${item.City}, ${item.Country}`;
+        }
+    }
+
+    public toggleColumnGroup(columnGroup: IgxColumnGroupComponent) {
+        const columns = columnGroup.children.toArray();
+
+        if (columnGroup.header === "General Information") {
+            const col = columns[1];
+            col.hidden = !col.hidden;
+        } else if (columnGroup.header === "Address Information") {
+            for (const col of columns) {
+                col.hidden = !col.hidden;
+            }
+        }
+
+        this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
+    }
+}
diff --git a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html
index eda6da85aa..8e8be56228 100644
--- a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html
+++ b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.html
@@ -24,7 +24,7 @@
   </igx-tree-grid>
 
   <ng-template #pager let-grid>
-      <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-paginator">
+      <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-grid-paginator__pager" style="justify-content: center">
           <button [disabled]="grid.isFirstPage" (click)="grid.paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
               <igx-icon>first_page</igx-icon>
           </button>
@@ -40,4 +40,4 @@
           </button>
       </div>
   </ng-template>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss
index 5c8a4afc72..223a119a2e 100644
--- a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss
@@ -29,12 +29,6 @@ $progressBar-sample-theme: igx-progress-linear-theme(
   justify-content: space-between;
 }
 
-.igx-paginator>* {
-    margin: 0 .3125rem;
-    display: flex;
-    align-items: center;
-}
-
 .linear-bar-container {
     width: 100%;
-}
\ No newline at end of file
+}
diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html
index eda6da85aa..8e8be56228 100644
--- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html
+++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.html
@@ -24,7 +24,7 @@
   </igx-tree-grid>
 
   <ng-template #pager let-grid>
-      <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-paginator">
+      <div *ngIf="grid.paging && grid.totalPages > 0" class="igx-grid-paginator__pager" style="justify-content: center">
           <button [disabled]="grid.isFirstPage" (click)="grid.paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
               <igx-icon>first_page</igx-icon>
           </button>
@@ -40,4 +40,4 @@
           </button>
       </div>
   </ng-template>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
index a21eea03bc..eedcee4214 100644
--- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
+++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss
@@ -10,14 +10,9 @@ $dark-button: igx-button-theme( $icon-color: #FFCD0F, $icon-hover-color: #292826
 :host {
      ::ng-deep {
         @include igx-grid-paginator($dark-grid-paginator);
-        .igx-paginator {
+        .igx-grid-paginator__pager{
             @include igx-button($dark-button);
         }
-        .igx-paginator>* {
-            margin: 0 .3125rem;
-            display: flex;
-            align-items: center;
-        }
     }
 }
 
@@ -94,4 +89,4 @@ $dark-button: igx-button-theme( $icon-color: #FFCD0F, $icon-hover-color: #292826
 // $dark-button: igx-button-theme(
 //   $palette: $dark-palette,
 //   $schema: $custom-dark-schema
-// );
\ No newline at end of file
+// );
diff --git a/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html b/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html
index 7e2df3b6f1..430b4c7d9e 100644
--- a/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html
+++ b/src/app/tree-grid/tree-grid-remote-paging-sample/tree-grid-remote-paging-sample.component.html
@@ -12,7 +12,8 @@
         <igx-column field="Size" dataType="number" [formatter]="formatSize"></igx-column>
     </igx-tree-grid>
     <ng-template #customPager let-api>
-        <button [disabled]="firstPage" (click)="paginate(0, false)" igxButton="icon" igxRipple
+      <div class="igx-grid-paginator__pager" style="justify-content: center">
+            <button [disabled]="firstPage" (click)="paginate(0, false)" igxButton="icon" igxRipple
             igxRippleCentered="true">
             <igx-icon fontSet="material">first_page</igx-icon>
         </button>
@@ -31,5 +32,6 @@
             <option [value]="val" [selected]="perPage == val" *ngFor="let val of [5, 10, 25, 50]">{{ val
             }}</option>
         </select>
+      </div>
     </ng-template>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/tree-grid/tree-grid-routes-data.ts b/src/app/tree-grid/tree-grid-routes-data.ts
index 7db9ccc8fb..22f49013b2 100644
--- a/src/app/tree-grid/tree-grid-routes-data.ts
+++ b/src/app/tree-grid/tree-grid-routes-data.ts
@@ -55,5 +55,10 @@ export const treeGridRoutesData = {
     "tree-grid-row-reordering": { displayName: "TreeGrid Row Reordering", parentName: "TreeGrid" },
     "treegrid-remote-paging": { displayName: "TreeGrid Remote Paging", parentName: "TreeGrid" },
     "treegrid-paging-style": { displayName: "TreeGrid Paging Style", parentName: "TreeGrid" },
+    "treegrid-multi-column-header-template": {
+        displayName: "TreeGrid Multi Column Header Template",
+        parentName: "TreeGrid"
+    },
+    "tree-grid-clipboard-operations-sample": { displayName: "TreeGrid Clipboard Operations", parentName: "TreeGrid" },
     "treegrid-toolbar-style": { displayName: "TreeGrid Toolbar Style", parentName: "TreeGrid" }
 };
diff --git a/src/app/tree-grid/tree-grid-routing.module.ts b/src/app/tree-grid/tree-grid-routing.module.ts
index 6c79fc1e65..29eee17f17 100644
--- a/src/app/tree-grid/tree-grid-routing.module.ts
+++ b/src/app/tree-grid/tree-grid-routing.module.ts
@@ -6,6 +6,8 @@ import {
 import {
     TreeGridChilddatakeySampleComponent
 } from "./tree-grid-childdatakey-sample/tree-grid-childdatakey-sample.component";
+// tslint:disable-next-line: max-line-length
+import { TreeGridClipboardSampleComponent } from "./tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component";
 import {
     TreeGridColumnHidingSampleComponent
 } from "./tree-grid-column-hiding-sample/tree-grid-column-hiding-sample.component";
@@ -58,6 +60,9 @@ import {
 import { TreeGridMultiCellSelectionStyleComponent } from "./tree-grid-multi-cell-selection-style/tree-grid-multi-cell-selection-style.component";
 // tslint:disable-next-line: max-line-length
 import { TreeGridMultiCellSelectionComponent } from "./tree-grid-multi-cell-selection/tree-grid-multi-cell-selection.component";
+import {
+    TreeGridMultiColumnHeaderTemplateSampleComponent
+} from "./tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component";
 import {
     TreeGridMultiColumnHeadersSampleComponent
 } from "./tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component";
@@ -325,6 +330,16 @@ export const treeGridRoutes: Routes = [
         data: treeGridRoutesData["treegrid-paging-style"],
         path: "treegrid-paging-style"
     },
+    {
+        component: TreeGridMultiColumnHeaderTemplateSampleComponent,
+        data: treeGridRoutesData["treegrid-multi-column-header-template"],
+        path: "treegrid-multi-column-header-template"
+    },
+    {
+        component: TreeGridClipboardSampleComponent,
+        data: treeGridRoutesData["treegrid-clipboard-operations-sample"],
+        path: "tree-grid-clipboard-operations-sample"
+    },
     {
         component: TreeGridToolbarStyleComponent,
         data: treeGridRoutesData["treegrid-toolbar-style"],
diff --git a/src/app/tree-grid/tree-grid.module.ts b/src/app/tree-grid/tree-grid.module.ts
index 2741bd5d38..b8bc5ea72c 100644
--- a/src/app/tree-grid/tree-grid.module.ts
+++ b/src/app/tree-grid/tree-grid.module.ts
@@ -25,6 +25,8 @@ import {
 import {
     TreeGridChilddatakeySampleComponent
 } from "./tree-grid-childdatakey-sample/tree-grid-childdatakey-sample.component";
+// tslint:disable-next-line: max-line-length
+import { TreeGridClipboardSampleComponent } from "./tree-grid-clipboard-operations-sample/tree-grid-clipboard-operations-sample.component";
 import {
     TreeGridColumnHidingSampleComponent
 } from "./tree-grid-column-hiding-sample/tree-grid-column-hiding-sample.component";
@@ -76,6 +78,9 @@ import {
 import { TreeGridMultiCellSelectionStyleComponent } from "./tree-grid-multi-cell-selection-style/tree-grid-multi-cell-selection-style.component";
 // tslint:disable-next-line: max-line-length
 import { TreeGridMultiCellSelectionComponent } from "./tree-grid-multi-cell-selection/tree-grid-multi-cell-selection.component";
+import {
+    TreeGridMultiColumnHeaderTemplateSampleComponent
+} from "./tree-grid-multi-column-header-template-sample/tree-grid-multi-column-header-template-sample.component";
 import {
     TreeGridMultiColumnHeadersSampleComponent
 } from "./tree-grid-multi-column-headers-sample/tree-grid-multi-column-headers-sample.component";
@@ -171,6 +176,8 @@ import {
         TreeGridRowReorderComponent,
         TreeGridRemotePagingSampleComponent,
         TreeGridResizeLineStylingSampleComponent,
+        TreeGridMultiColumnHeaderTemplateSampleComponent,
+        TreeGridClipboardSampleComponent,
         TreeGridToolbarStyleComponent
     ],
     imports: [
diff --git a/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss b/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
index 1888342dbc..6dd6ca4e06 100644
--- a/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
+++ b/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
@@ -168,14 +168,17 @@
     }
     .finjs-slider {
         width: 40%;
+        min-width: 145px;
     }
     .finjs-play-controls {
         width: 45%;
         min-width: 500px;
+        margin-top: 20px;
     }
     .sample-toolbar {
         height: 20px;
         font-size: 0.8rem;
+        line-height: 20px;
     }
     .fin-dark-theme {
         .finjs-slider,
diff --git a/src/assets/Shapes/AmericanCities.dbf b/src/assets/Shapes/AmericanCities.dbf
index 505cc46189..db70c943bd 100644
Binary files a/src/assets/Shapes/AmericanCities.dbf and b/src/assets/Shapes/AmericanCities.dbf differ
diff --git a/src/assets/Shapes/AmericanCities.shx b/src/assets/Shapes/AmericanCities.shx
new file mode 100644
index 0000000000..23537405a1
Binary files /dev/null and b/src/assets/Shapes/AmericanCities.shx differ
diff --git a/web.config b/web.config
index 8b389f0054..700d4fabe8 100644
--- a/web.config
+++ b/web.config
@@ -19,7 +19,18 @@
   </rewrite>
   <staticContent>
     <remove fileExtension=".json" />
+    <remove fileExtension=".csv" />
+    <remove fileExtension=".shp" />
+    <remove fileExtension=".dbf" />
+    <remove fileExtension=".itf" />
+    <remove fileExtension=".svg" />
+
     <mimeMap fileExtension=".json" mimeType="application/json;charset=UTF-8;" />
+    <mimeMap fileExtension=".csv"  mimeType="application/csv;charset=UTF-8;" />
+    <mimeMap fileExtension=".shp"  mimeType="application/octet-stream" />
+    <mimeMap fileExtension=".dbf"  mimeType="application/octet-stream" />
+    <mimeMap fileExtension=".itf"  mimeType="application/octet-stream" />
+    <mimeMap fileExtension=".svg"  mimeType="image/svg+xml" />
   </staticContent>
   <httpProtocol>
       <customHeaders>