Add some styling.

Author: MKirova

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -184,6 +184,10 @@
         @extend %igx-grid__tr--inner !optional;
     }
 
+    @include e(tr, $m: header) {
+        @extend %igx-grid__tr--header !optional;
+    }
+
     @include e(tr, $m: group) {
         @extend %grid-row--group !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1217,6 +1217,11 @@
         background: inherit;
     }
 
+    %igx-grid__tr--header {
+        display: flex; 
+        align-items: center;
+    }
+
     %igx-grid__tr--add-animate {
         @include animation(scale-in-ver-center .2s $ease-in-out-quad);
     }

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -21,7 +21,7 @@ import { IPivotConfiguration, IPivotDimension } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 
 let NEXT_ID = 0;
-const MINIMUM_COLUMN_WIDTH = 136;
+const MINIMUM_COLUMN_WIDTH = 200;
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html

@@ -98,11 +98,10 @@
 
 
     <ng-template #headerTemplate let-column>
-        <div class="header-group-template__container">
-            <igx-icon [attr.draggable]="false"
+        <div class="igx-grid__tr--header igx-grid__row-indentation--level-{{ level }}">
+            <igx-icon *ngIf="hasChild" [attr.draggable]="false"
                       (click)="grid.toggleRow(rowID)"
-                      style='cursor: pointer;'
-                      class="header-group-template__icon">
+                      style='cursor: pointer;'>
                       {{grid.expansionStates.get(rowID) ? 'expand_more' : 'expand_less'}}</igx-icon>
             {{column.header}}
         </div>

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts

@@ -17,7 +17,7 @@ import { IgxGridSelectionService } from '../selection/selection.service';
 import { IPivotDimension } from './pivot-grid.interface';
 
 
-const MINIMUM_COLUMN_WIDTH = 136;
+const MINIMUM_COLUMN_WIDTH = 200;
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-pivot-row',
@@ -91,9 +91,7 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         ref.instance.header = field;
         ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
         (ref as any).instance._vIndex = this.grid.columns.length + this.index;
-        if (this.hasChild) {
-            ref.instance.headerTemplate = this.headerTemplate;
-        }
+        ref.instance.headerTemplate = this.headerTemplate;
         return ref.instance;
     }
 }