feat(grid): conditional cell styling implementation #1079

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,17 @@ 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) {
+            const self = this;
+            Object.entries(this.column.cellClasses).forEach(([name, cb]) => {
+                const value = typeof cb === 'function' ? (cb as any)(self.row.rowData, self.column.field) : cb;
+                if (value) {
+                    defaultClasses.push(name);
+                }
+            });
+        }
 
         const classList = {
             'igx_grid__cell--edit': this.inEditMode,