Merge pull request #10627 from IgniteUI/dkamburov/pivot-sample-display-density

chore(pivot): Add display density to pivot sample

Author: dkamburov

src/app/pivot-grid/pivot-grid.sample.html

@@ -1,8 +1,15 @@
-<igx-pivot-grid
-    #grid1
-    [data]="origData"
-    [width]="'100%'"
-    [height]="'100%'"
-    [defaultExpandState]='true'
-    [pivotConfiguration]="pivotConfigHierarchy">
-</igx-pivot-grid>
+<div class="sample-column">
+    <h4>Display Density</h4>
+    <div class="density-chooser">
+        <igx-buttongroup>
+            <button igxButton [disabled]="grid1.displayDensity === compact"
+                (click)="setDensity('compact')">Compact</button>
+            <button igxButton [disabled]="grid1.displayDensity === cosy" (click)="setDensity('cosy')">Cosy</button>
+            <button igxButton [disabled]="grid1.displayDensity === comfortable"
+                (click)="setDensity('comfortable')">Comfortable</button>
+        </igx-buttongroup>
+    </div>
+    <igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
+        [pivotConfiguration]="pivotConfigHierarchy">
+    </igx-pivot-grid>
+</div>

src/app/pivot-grid/pivot-grid.sample.scss

@@ -3,6 +3,10 @@
     height: 100%;
 }
 
+.density-chooser {
+    margin-bottom: 16px;
+}
+
 :host ::ng-deep {
     .upFont {
         color: lightgreen;

src/app/pivot-grid/pivot-grid.sample.ts

@@ -4,7 +4,8 @@ import {
     IgxPivotGridComponent,
     IPivotConfiguration,
     PivotAggregation,
-    IgxPivotDateDimension
+    IgxPivotDateDimension,
+    DisplayDensity
 } from 'igniteui-angular';
 import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 
@@ -41,6 +42,9 @@ export class IgxTotalSaleAggregate {
 })
 export class PivotGridSampleComponent {
     @ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
+    public comfortable: DisplayDensity = DisplayDensity.comfortable;
+    public cosy: DisplayDensity = DisplayDensity.cosy;
+    public compact: DisplayDensity = DisplayDensity.compact;
 
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [
@@ -80,7 +84,7 @@ export class PivotGridSampleComponent {
                     key: 'SUM',
                     aggregator: IgxPivotNumericAggregate.sum,
                     label: 'Sum'
-                 },
+                },
                 enabled: true,
                 styles: {
                     upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 300,
@@ -101,11 +105,11 @@ export class PivotGridSampleComponent {
                     key: 'SUM',
                     aggregator: IgxTotalSaleAggregate.totalSale,
                     label: 'Sum of Sale'
-                },{
+                }, {
                     key: 'MIN',
                     aggregator: IgxTotalSaleAggregate.totalMin,
                     label: 'Minimum of Sale'
-                },{
+                }, {
                     key: 'MAX',
                     aggregator: IgxTotalSaleAggregate.totalMax,
                     label: 'Maximum of Sale'
@@ -149,5 +153,10 @@ export class PivotGridSampleComponent {
         {
             ProductCategory: 'Clothing', UnitPrice: 16.05, SellerName: 'Walter',
             Country: 'Bulgaria', City: 'Plovdiv', Date: '02/19/2020', UnitsSold: 492
-        }];
+        }
+    ];
+
+    public setDensity(density: DisplayDensity) {
+        this.grid1.displayDensity = density;
+    }
 }