Feature request - Conditional cell styling capability

[tkiryu]

Scenario what I'd like to achieve

I'd like to conditionally change cell background color according to another cell value or something. I think this is a common scenario and am advanced story of this.

https://github.com/IgniteUI/igniteui-angular/wiki/igxGrid-Specification
Story 12: As an end user, I expect styling capabilities allowing me to set the cell background color and the cell content font color to a custom color provided via its hex encoded string.

Problem

In order to achieve that, only we can do for now is use cell template like this.

// Only when booleanColumn's cell value is true, "checked" class is added to the cell template.
<igx-column [field]="'stringColumn'" [dataType]="'string'" [header]="'string1'">
  <div *igxCell="let value; let cell = cell" [class.checked]="cell.row.rowData['booleanColumn']">
    {{ value }}
  </div>
</igx-column>

.checked {
  color: blue;
  font-weight: bold;
  background-color: salmon;
}

But, It doesn't work as I expect because the igx-grid-cell has default padding so that background color of the cell template can not be filled inside the cell.

Current Solution

So I have to remove default padding of the igx-grid-cell and put padding to the cell template inside the cell.

<igx-column [field]="'stringColumn'" [dataType]="'string'" [header]="'string2'" [cellClasses]="'noPadding'">
  <div class="padding" *igxCell="let value; let cell = cell" [class.checked]="cell.row.rowData['booleanColumn']">
    {{ value }}
  </div>
</igx-column>

:host::ng-deep {
  // remove padding from the cell
  .noPadding {
    padding: 0;
  }
  // put padding to the cell template inside the cell
  .padding {
    padding: 1rem 1.5rem;
  }
}

It works as we expect.

But this solution is a little hassle.

Here is a sample what I explained above. You can change cell background dynamically by clicking checkbox.
https://stackblitz.com/edit/igx-grid-cell-style2

Expect

I'd like a feature that we can attach conditional classes to the cell directly so that we don't have to remove default padding.

For example, cellClassses accepts function in addition to string like below.

<igx-column [field]="'stringColumn'" [dataType]="'string'" [header]="'string2'" [cellClasses]="conditionalStyleFunc">

// This function takes cell value and its row data, then returns classes as string.
conditionalStyleFunc(cellValue, rowData): string {
  const cellClasses = ['foo'];
  if (cellValue === 'something') {
    cellClasses.push('bar');
  }
  if (rowData['anotherCell'] === true) {
    cellClasses.push('baz');
  }
  // if all the condition matches, "foo bar baz" would be returned.
  return cellClasses.join(' ');
}

It's just an idea. But such a capability would enable the developers more easily handle conditional styling not only background color but also many other css props for cells.

I would appreciate your consideration.

[tkiryu]

All, thank you sooo much!