Grid - conditional cell styling

CHANGELOG.md

@@ -3,6 +3,8 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 6.2.0
+-`igxGrid`:
+    - **Breaking change** `cellClasses` input on `IgxColumnComponent` now accepts an object literal to allow conditional cell styling.
 - `igx-datePicker` selector is deprecated. Use `igx-date-picker` selector instead.
 - `igxOverlay`: `OverlaySettings` now also accepts an optional `outlet` to specify the container where the overlay should be attached.
 - `igxToggleAction` new `outlet` input controls the target overlay element should be attached. Provides a shortcut for `overlaySettings.outlet`.

projects/igniteui-angular/src/lib/grid/README.md

@@ -170,7 +170,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`paginationTemplate`|TemplateRef|You can provide a custom `ng-template` for the pagination part of the grid.|
 |`groupingExpressions`| Array | The group by state of the grid.
 |`groupingExpansionState`| Array | The list of expansion states of the group rows. Contains the expansion state(expanded: boolean) and an unique identifier for the group row (Array<IGroupByExpandState>) that contains a list of the group row's parents described via their fieldName and value.
-|`groupsExpanded`| Boolean | Determines whether created groups are rendered expanded or collapsed.  | 
+|`groupsExpanded`| Boolean | Determines whether created groups are rendered expanded or collapsed.  |
 
 ### Outputs
 
@@ -276,7 +276,7 @@ Inputs available on the **IgxGridColumnComponent** to define columns:
 |`minWidth`|string|Columns minimal width|
 |`maxWidth`|string|Columns miximum width|
 |`headerClasses`|string|Additional CSS classes applied to the header element.|
-|`cellClasses`|string|Additional CSS classes applied to the cells in this column.|
+|`cellClasses`|string|Additional CSS classes that can be applied conditionally to the cells in this column.|
 |`formatter`|Function|A function used to "template" the values of the cells without the need to pass a cell template the column.|
 |`index`|string|Column index|
 |`filteringIgnoreCase`|boolean|Ignore capitalization of strings when filtering is applied. Defaults to _true_.|
@@ -407,7 +407,7 @@ import {
 |`groupRow` | IGroupByRecord | Yes | No | The group row data. Contains the related group expression, level, sub-records and group value. |
 |`expanded` | boolean | Yes | No | Whether the row is expanded or not. |
 |`groupContent` | ElementRef | Yes | No | The container for the group row template. Holds the group row content. |
-|`focused` | boolean | Yes | No | Returns whether the group row is currently focused. | 
+|`focused` | boolean | Yes | No | Returns whether the group row is currently focused. |
 
 ### Methods
 

projects/igniteui-angular/src/lib/grid/cell.component.ts

@@ -369,10 +369,16 @@ export class IgxGridCellComponent implements OnInit, OnDestroy, AfterViewInit {
      */
     @HostBinding('class')
     get styleClasses(): string {
-        const defaultClasses = [
-            'igx-grid__td igx-grid__td--fw',
-            this.column.cellClasses
-        ];
+        const defaultClasses = ['igx-grid__td igx-grid__td--fw'];
+
+        if (this.column.cellClasses) {
+            Object.entries(this.column.cellClasses).forEach(([name, cb]) => {
+                const value = typeof cb === 'function' ? (cb as any)(this.row.rowData, this.column.field) : cb;
+                if (value) {
+                    defaultClasses.push(name);
+                }
+            }, this);
+        }
 
         const classList = {
             'igx_grid__cell--edit': this.inEditMode,

projects/igniteui-angular/src/lib/grid/cell.spec.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, OnInit } from '@angular/core';
 import { async, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -8,6 +8,7 @@ import { IgxStringFilteringOperand } from '../../public_api';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { HelperUtils} from '../test-utils/helper-utils.spec';
+import { SampleTestData } from '../test-utils/sample-test-data.spec';
 
 const DEBOUNCETIME = 30;
 
@@ -71,7 +72,8 @@ describe('IgxGrid - Cell component', () => {
                 GridWithEditableColumnComponent,
                 NoColumnWidthGridComponent,
                 CellEditingTestComponent,
-                CellEditingScrollTestComponent
+                CellEditingScrollTestComponent,
+                ConditionalCellStyleTestComponent
             ],
             imports: [NoopAnimationsModule, IgxGridModule.forRoot()]
         }).compileComponents();
@@ -563,7 +565,7 @@ describe('IgxGrid - Cell component', () => {
                 await wait(100);
                 fixture.detectChanges();
 
-                const testCells = fixture.debugElement.queryAll(By.css('.testCell'));
+                const testCells = grid.getColumnByName('firstName').cells;
                 cellElem = testCells[testCells.length - 1].nativeElement;
 
                 cellElem.dispatchEvent(new Event('focus'));
@@ -650,7 +652,6 @@ describe('IgxGrid - Cell component', () => {
         });
     });
 
-
     it('keyboard navigation', (async () => {
         const fix = TestBed.createComponent(DefaultGridComponent);
         fix.detectChanges();
@@ -1055,6 +1056,28 @@ describe('IgxGrid - Cell component', () => {
             done();
         });
     });
+
+    it('should be able to conditionally style cells', () => {
+        const fixture = TestBed.createComponent(ConditionalCellStyleTestComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.grid;
+
+        grid.getColumnByName('UnitsInStock').cells.forEach((cell) => {
+            expect(cell.nativeElement.classList).toContain('test1');
+        });
+
+        const indexColCells = grid.getColumnByName('ProductID').cells;
+
+        expect(indexColCells[3].nativeElement.classList).not.toContain('test');
+        expect(indexColCells[4].nativeElement.classList).toContain('test2');
+        expect(indexColCells[5].nativeElement.classList).toContain('test');
+        expect(indexColCells[6].nativeElement.classList).toContain('test');
+
+        expect(grid.getColumnByName('ProductName').cells[4].nativeElement.classList).toContain('test2');
+        expect(grid.getColumnByName('InStock').cells[4].nativeElement.classList).toContain('test2');
+        expect(grid.getColumnByName('OrderDate').cells[4].nativeElement.classList).toContain('test2');
+    });
 });
 
 @Component({
@@ -1254,7 +1277,7 @@ export class CellEditingTestComponent {
 @Component({
     template: `
         <igx-grid [data]="data" width="300px" height="250px">
-            <igx-column [editable]="true" field="firstName" cellClasses='testCell'></igx-column>
+            <igx-column [editable]="true" field="firstName"></igx-column>
             <igx-column [editable]="true" field="lastName"></igx-column>
             <igx-column field="age" [editable]="true" [dataType]="'number'"></igx-column>
             <igx-column field="isActive" [editable]="true" [dataType]="'boolean'"></igx-column>
@@ -1288,3 +1311,58 @@ export class CellEditingScrollTestComponent {
         this.grid.parentVirtDir.getHorizontalScroll().scrollLeft = newLeft;
     }
 }
+
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" [width]="'900px'" [height]="'500px'" [rowSelectable]="true">
+        <igx-column *ngFor="let c of columns" [field]="c.field"
+                                              [header]="c.field"
+                                              [width]="c.width"
+                                              [movable]="true"
+                                              [groupable]="true"
+                                              [resizable]="true"
+                                              [sortable]="true"
+                                              [filterable]="true"
+                                              [editable]="true"
+                                              [cellClasses]="c.cellClasses">
+        </igx-column>
+    </igx-grid>`,
+    styleUrls: ['../test-utils/grid-cell-style-testing.scss'],
+})
+export class ConditionalCellStyleTestComponent implements OnInit {
+    public data: Array<any>;
+    public columns: Array<any>;
+
+    @ViewChild('grid') public grid: IgxGridComponent;
+
+    cellClasses;
+    cellClasses1;
+
+    callback = (rowData: any, columnKey: any) => {
+        return rowData[columnKey] >= 5;
+    }
+
+    callback1 = (rowData: any) => {
+        return rowData[this.grid.primaryKey] === 5;
+    }
+
+    public ngOnInit(): void {
+        this.cellClasses = {
+            'test': this.callback,
+            'test2': this.callback1
+        };
+
+        this.cellClasses1 = {
+            'test2': this.callback1
+        };
+
+        this.columns = [
+            { field: 'ProductID', width: 100, cellClasses: this.cellClasses },
+            { field: 'ProductName', width: 200, cellClasses: this.cellClasses1 },
+            { field: 'InStock', width: 150, cellClasses: this.cellClasses1 },
+            { field: 'UnitsInStock', width: 150, cellClasses: {'test1' : true } },
+            { field: 'OrderDate', width: 150, cellClasses: this.cellClasses1 }
+        ];
+        this.data = SampleTestData.foodProductDataExtended();
+    }
+}

projects/igniteui-angular/src/lib/grid/column.component.ts

@@ -297,17 +297,23 @@ export class IgxColumnComponent implements AfterContentInit {
     @Input()
     public headerClasses = '';
     /**
-     * Sets/gets the class selector of the column cells.
+     * Sets a conditional class selector of the column cells.
+     * Accepts an object literal, containing key-value pairs,
+     * where the key is the name of the CSS class, while the
+     * value is either a callback function that returns a boolean,
+     * or boolean, like so:
      * ```typescript
-     * let columnCellsClass = this.column.cellClasses;
+     * callback = (rowData, columnKey) => { return rowData[columnKey] > 6; }
+     * cellClasses = { 'className' : this.callback };
      * ```
      * ```html
-     * <igx-column [cellClasses] = "'column-cell'"></igx-column>
+     * <igx-column [cellClasses] = "cellClasses"></igx-column>
+     * <igx-column [cellClasses] = "{'class1' : true }"></igx-column>
      * ```
      * @memberof IgxColumnComponent
      */
     @Input()
-    public cellClasses = '';
+    public cellClasses: any;
     /**
      * Gets the column index.
      * ```typescript

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

@@ -286,7 +286,7 @@ export class TemplatedColumnsComponent {
             <igx-column field="ProductId"  dataType="number" width="100px"></igx-column>
             <igx-column field="Number1" dataType="number" width="100px"></igx-column>
             <igx-column field="Number2" dataType="number" width="100px" [headerClasses]="'headerAlignSyle'"></igx-column>
-            <igx-column field="Number3" dataType="number" width="100px" [cellClasses]="'headerAlignSyle'"></igx-column>
+            <igx-column field="Number3" dataType="number" width="100px" [cellClasses]="{'headerAlignSyle':true}"></igx-column>
             <igx-column field="Number4" dataType="number" width="100px"></igx-column>
             <igx-column field="Number5" dataType="number" width="100px"></igx-column>
             <igx-column field="Number6" dataType="number" width="100px"></igx-column>

projects/igniteui-angular/src/lib/test-utils/grid-cell-style-testing.scss

@@ -0,0 +1,17 @@
+:host::ng-deep {
+    .test2 {
+        color: black !important;
+        font-weight: bold;
+        background-color: greenyellow !important;
+    }
+    .test {
+        color: red;
+        font-weight: bold;
+        background-color: yellow;
+    }
+    .test1 {
+        color: blue ;
+        font-weight: bold;
+        background-color: salmon;
+    }
+}

src/app/app.component.ts

@@ -90,6 +90,11 @@ export class AppComponent implements OnInit {
             icon: 'view_column',
             name: 'Grid Column Moving'
         },
+        {
+            link: '/gridConditionalCellStyling',
+            icon: 'view_column',
+            name: 'Grid Cell Styling'
+        },
         {
             link: '/gridColumnPinning',
             icon: 'view_column',

src/app/app.module.ts

@@ -56,6 +56,7 @@ import { GridToolbarSampleComponent } from './grid-toolbar/grid-toolbar.sample';
 import { GridVirtualizationSampleComponent } from './grid-remote-virtualization/grid-remote-virtualization.sample';
 import { ButtonGroupSampleComponent } from './buttonGroup/buttonGroup.sample';
 import { GridColumnGroupsSampleComponent } from './grid-column-groups/grid-column-groups.sample';
+import { GridCellStylingSampleComponent } from './gird-cell-styling/grid-cell-styling.sample';
 
 import { GridGroupBySampleComponent } from './grid-groupby/grid-groupby.sample';
 import { DropDownSampleComponent } from './drop-down/drop-down.sample';
@@ -110,6 +111,7 @@ const components = [
     GridToolbarSampleComponent,
     GridVirtualizationSampleComponent,
     GridColumnGroupsSampleComponent,
+    GridCellStylingSampleComponent,
 
     CustomContentComponent,
     ColorsSampleComponent,

src/app/app.routing.ts

@@ -37,7 +37,7 @@ import { GridSelectionComponent } from './grid-selection/grid-selection.sample';
 import { GridVirtualizationSampleComponent } from './grid-remote-virtualization/grid-remote-virtualization.sample';
 import { ButtonGroupSampleComponent } from './buttonGroup/buttonGroup.sample';
 import { GridGroupBySampleComponent } from './grid-groupby/grid-groupby.sample';
-
+import { GridCellStylingSampleComponent } from './gird-cell-styling/grid-cell-styling.sample';
 
 const appRoutes = [
     {
@@ -174,6 +174,10 @@ const appRoutes = [
         path: 'gridColumnResizing',
         component: GridColumnResizingSampleComponent
     },
+    {
+        path: 'gridConditionalCellStyling',
+        component: GridCellStylingSampleComponent
+    },
     {
         path: 'gridSummary',
         component: GridSummaryComponent

src/app/gird-cell-styling/grid-cell-styling.sample.html

@@ -0,0 +1,28 @@
+<div class="wrapper">
+    <app-page-header title="Grid Conditional Cell Styling">
+        Allows condional cell styling.
+    </app-page-header>
+
+    <div class="sample-content">
+        <div class="sample-column">
+            <igx-grid #grid1 [data]="data" [primaryKey]="'ID'" [width]="'900px'" [height]="'500px'" [rowSelectable]="true">
+                <igx-column *ngFor="let c of columns" [field]="c.field"
+                                                      [header]="c.field"
+                                                      [width]="c.width"
+                                                      [movable]="true"
+                                                      [groupable]="true"
+                                                      [resizable]="true"
+                                                      [sortable]="true"
+                                                      [filterable]="true"
+                                                      [editable]="true"
+                                                      [cellClasses]="c.cellClasses">
+                </igx-column>
+            </igx-grid>
+            <div class="sample-buttons">
+                <button igxButton="raised" (click)="toggleColumn('ContactName')">Pin/Unpin 'ContactName'</button>
+                <button igxButton="raised" (click)="toggleColumn('ContactTitle')">Pin/Unpin 'ContactTitle'</button>
+                <button igxButton="raised" (click)="toggleColumn('Address')">Pin/Unpin 'Address'</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/gird-cell-styling/grid-cell-styling.sample.scss

@@ -0,0 +1,26 @@
+.sample-buttons {
+    margin-top: 24px;
+}
+
+[igxButton]+[igxButton] {
+    margin-left: 8px;
+}
+
+
+:host::ng-deep {
+    .test1 {
+        color: red;
+        font-weight: bold;
+        background-color: yellow;
+    }
+    .test2 {
+        color: blue;
+        font-weight: bold;
+        background-color: salmon;
+    }
+    .test3 {
+        color: black !important;
+        font-weight: bold !important;
+        background-color: greenyellow !important;
+    }
+}