Ngx-datatable: Cell conditional formatting/style

[shiamalon]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ x] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Ineed help to format cells according to some specific rules.

Reproduction of the problem

I have this table:

<ngx-datatable class='material' [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
                    [rowHeight]="'auto'" [limit]="25" [rows]='rows' [sortType]="'multi'"
                    [selectionType]="'multiClick'">
                    <ngx-datatable-column prop="propertyName" name="Property"></ngx-datatable-column>
                    <ngx-datatable-column prop="unitName" name="Unit"></ngx-datatable-column>
                    <ngx-datatable-column prop="paymentRefAmount" name="Amount($)"></ngx-datatable-column>
                    <ngx-datatable-column prop="paymentRefStatusTxt" name="Status"></ngx-datatable-column>
                    <ngx-datatable-column prop="paymentRefdueDateTxt" name="Due Date"></ngx-datatable-column>
                    <ngx-datatable-column prop="paymentRefOverDueDays" name="Over Due Days" [cellClass]="getClassColor"></ngx-datatable-column>
                </ngx-datatable>

works perfectly. Now I want to change text color for Over Due Days column. I have the [cellClass]="getCellClass" function just like on css demo.

On the TS getCellClass is defined as :

  getCellClass({ row, column, value }) {
    return value > 10 ? "color:red" : "color:green";
  }

It doens't matter what I set as the return of the function it doesn't change the color. Can someone help me?

Thanks in advance.

[shiamalon]

I know its a support request, but I also wan't to mention that is not super clear how to do this and it would be nice to have a nice explanation/tutorial on the documentation/git.

[shiamalon]

Figured the issue now. The css classes cannot be loaded on the css file imported on the component. Only if loaded them through assets/styles and a custom style.scss it will work.

[shiamalon]

Thanks @shiamalon

[shiamalon]

Figured the issue now. The css classes cannot be loaded on the css file imported on the component. Only if loaded them through assets/styles and a custom style.scss it will work.

[shiamalon]

Figured the issue now. The css classes cannot be loaded on the css file imported on the component. Only if loaded them through assets/styles and a custom style.scss it will work.

[andrewryan1906]

This would have been really nice if it was somewhere in the documentation. Pulling my hair out trying to figure out how to do basic styling...

[dp1127]

Thank you so much @shiamalon for such solution. it works.