question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cell conditional formatting/style

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7

github_iconTop GitHub Comments

3reactions
shiamaloncommented, Sep 21, 2017

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.

2reactions
shiamaloncommented, Sep 25, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Use conditional formatting to highlight information
Select the cells that you want to conditionally format. On the Home tab, in the Styles group, click the arrow next to Conditional...
Read more >
Excel Conditional Formatting - CustomGuide
1. Select the cells you want to change. 2. Click the Cell Styles button on the Home tab. 3. Select a conditional formatting...
Read more >
Conditional Formatting in Excel (Easy Tutorial)
Conditional Formatting with Formulas · 1. Select the range A1:E5. · 2. On the Home tab, in the Styles group, click Conditional Formatting....
Read more >
Excel 2013: Conditional Formatting - GCF Global
Select the desired cells for the conditional formatting rule. ... Hover the mouse over the desired preset, then choose a preset style from...
Read more >
Excel conditional formatting formulas based on another cell
Excel's predefined conditional formatting, such as Data Bars, Color Scales and Icon Sets, are mainly purposed to format cells based on their own ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found