Merge pull request #10059 from IgniteUI/rkaraivanov/grid-header-styles-input

feat(grid): Added style bindings for headers

Author: zdrawku

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 12.1.3
+
+### New Features
+- `igxGrid`
+    - Added `headerStyles` and `headerGroupStyles` inputs to the column component.
+    Similar to `cellStyles` is exposes a way to bind CSS properties and style the grid headers.
+
 ## 12.1.2
 - `igxGrid`
     - The column formatter callback signature now accepts the row data as an additional argument:

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -517,6 +517,27 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     @Input()
     public headerClasses = '';
 
+    /**
+     * Sets conditional style properties on the column header.
+     * Similar to `ngStyle` it accepts an object literal where the keys are
+     * the style properties and the value is the expression to be evaluated.
+     * ```typescript
+     * styles = {
+     *  background: 'royalblue',
+     *  color: (column) => column.pinned ? 'red': 'inherit'
+     * }
+     * ```
+     * ```html
+     * <igx-column [headerStyles]="styles"></igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @notifyChanges()
+    @WatchColumnChanges()
+    @Input()
+    public headerStyles = null;
+
     /**
      * Sets/gets the class selector of the column group header.
      * ```typescript
@@ -532,6 +553,28 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     @WatchColumnChanges()
     @Input()
     public headerGroupClasses = '';
+
+    /**
+     * Sets conditional style properties on the column header group wrapper.
+     * Similar to `ngStyle` it accepts an object literal where the keys are
+     * the style properties and the value is the expression to be evaluated.
+     * ```typescript
+     * styles = {
+     *  background: 'royalblue',
+     *  color: (column) => column.pinned ? 'red': 'inherit'
+     * }
+     * ```
+     * ```html
+     * <igx-column [headerGroupStyles]="styles"></igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @notifyChanges()
+    @WatchColumnChanges()
+    @Input()
+    public headerGroupStyles = null;
+
     /**
      * Sets a conditional class selector of the column cells.
      * Accepts an object literal, containing key-value pairs,
@@ -562,7 +605,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * ```typescript
      * styles = {
      *  background: 'royalblue',
-     *  color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') : 'red': 'inherit'
+     *  color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit'
      * }
      * ```
      * ```html

projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts

@@ -19,7 +19,8 @@ import {
     IgxColumnFormatterPipe,
     IgxSummaryFormatterPipe,
     IgxGridAddRowPipe,
-    IgxHeaderGroupWidthPipe
+    IgxHeaderGroupWidthPipe,
+    IgxHeaderGroupStylePipe
 } from './pipes';
 
 @NgModule({
@@ -42,7 +43,8 @@ import {
         IgxGridAddRowPipe,
         IgxColumnFormatterPipe,
         IgxSummaryFormatterPipe,
-        IgxHeaderGroupWidthPipe
+        IgxHeaderGroupWidthPipe,
+        IgxHeaderGroupStylePipe
     ],
     exports: [
         IgxGridFilterConditionPipe,
@@ -63,7 +65,8 @@ import {
         IgxGridAddRowPipe,
         IgxColumnFormatterPipe,
         IgxSummaryFormatterPipe,
-        IgxHeaderGroupWidthPipe
+        IgxHeaderGroupWidthPipe,
+        IgxHeaderGroupStylePipe
     ],
     imports: [
         CommonModule

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -345,3 +345,22 @@ export class IgxHeaderGroupWidthPipe implements PipeTransform {
         return hasLayout ? '' : `${Math.max(parseFloat(width), minWidth)}px`;
     }
 }
+
+@Pipe({ name: 'igxHeaderGroupStyle' })
+export class IgxHeaderGroupStylePipe implements PipeTransform {
+
+    public transform(styles: { [prop: string]: any }, column: IgxColumnComponent, _: number): { [prop: string]: any } {
+        const css = {};
+
+        if (!styles) {
+            return css;
+        }
+
+        for (const prop of Object.keys(styles)) {
+            const res = styles[prop];
+            css[prop] = typeof res === 'function' ? res(column) : res;
+        }
+
+        return css;
+    }
+}

projects/igniteui-angular/src/lib/grids/grid/column.spec.ts

@@ -443,6 +443,41 @@ describe('IgxGrid - Column properties #grid', () => {
         row.cells.forEach(cell => expect(cell.nativeElement.getAttribute('style')).toMatch('background: black'));
     });
 
+    it('should apply custom CSS bindings to grid headers', () => {
+        const fix = TestBed.createComponent(ColumnHaederClassesComponent);
+        fix.detectChanges();
+        const grid = fix.componentInstance.grid;
+
+
+        const styles = {
+            background: 'rebeccapurple',
+            color: 'white'
+        };
+
+        grid.columns.forEach(col => col.headerStyles = styles);
+        fix.detectChanges();
+
+        grid.headerCellList.forEach(header => expect(header.nativeElement.getAttribute('style')).toMatch('background: rebeccapurple'));
+
+    });
+
+    it('should apply custom CSS bindings to grid header groups', () => {
+        const fix = TestBed.createComponent(ColumnHaederClassesComponent);
+        fix.detectChanges();
+        const grid = fix.componentInstance.grid;
+
+
+        const styles = {
+            background: 'rebeccapurple',
+            color: 'white'
+        };
+
+        grid.columns.forEach(col => col.headerGroupStyles = styles);
+        fix.detectChanges();
+
+        grid.headerGroupsList.forEach(hGroup => expect(hGroup.nativeElement.getAttribute('style')).toMatch('background: rebeccapurple'));
+    });
+
     it('should set title attribute on column header spans', () => {
         const fix = TestBed.createComponent(ColumnsFromIterableComponent);
         fix.detectChanges();

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -12,6 +12,7 @@
         <ng-container *ngFor="let child of column.children" >
             <igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
                 [ngClass]="child.headerGroupClasses"
+                [ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
                 [column]="child"
                 [igxColumnMovingDrag]="child"
                 [ghostHost]="grid.outlet.nativeElement"
@@ -70,6 +71,7 @@
         <ng-container *ngFor="let child of column.children">
             <igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
                 [ngClass]="child.headerGroupClasses"
+                [ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
                 [column]="child"
                 [style.min-width]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
                 [style.flex-basis]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
@@ -86,6 +88,7 @@
         class="igx-grid-th--fw"
         [id]="grid.id + '_' + column.field"
         [ngClass]="column.headerClasses"
+        [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
         [igxColumnMovingDrag]="column"
         [ghostHost]="grid.outlet.nativeElement"
         [attr.droppable]="true"

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

@@ -65,6 +65,7 @@
             <ng-container *ngFor="let column of pinnedColumnCollection | igxTopLevel">
                 <igx-grid-header-group
                     [ngClass]="column.headerGroupClasses"
+                    [ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
                     [column]="column"
                     [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                     [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
@@ -83,6 +84,7 @@
         >
             <igx-grid-header-group
                 [ngClass]="column.headerGroupClasses"
+                [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
                 [column]="column"
                 [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                 [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
@@ -94,6 +96,7 @@
             <ng-container *ngFor="let column of pinnedColumnCollection | igxTopLevel">
                 <igx-grid-header-group
                     [ngClass]="column.headerGroupClasses"
+                    [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
                     [column]="column"
                     [style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
                     [style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"