KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Table: is it possible to change the font color in a cell depends on content? #630

Open Eugene opened this topic on on Jan 29, 2019 - 11 comments

Eugene commented on Jan 29, 2019

For example, make the numbers red if they are below 0 or red background for 0 value?

Regards, Eugene

KoolReport commented on Jan 29, 2019

Please follow the Table cssClass options. In your case, you may define the function for td. You will receive the $value and the $columnName as parameter. Base on them, you can decide the cssClass for the cell. Then you should have your own definition like color of text or background for your own style.

Eugene commented on Jan 29, 2019

Thanks, this code works for me

 "td"=>function($row,$columnName){
                    if($columnName=="totalCost" && $row["totalCost"]==0){
                        return "noprice";
                    } else {
                        return"";
                    }
                }
eMaX commented on Apr 30, 2023

Thanks. Do you have a more complete working example? Like where do you then define "noprice"?

Eugene commented on Apr 30, 2023

noprice is the name of the class

you can define css style for it in the same place you define styles for your project

eMaX commented on May 1, 2023

Thanks! Do you have a minimal working example? I’m using server side. It’s not applying the style.

Eugene commented on May 1, 2023

I am sorry I don't understand clear what do you mean saying "I’m using server side. It’s not applying the style."

My example cannot help you even i give you my css file

You must use the code above in your view file this way:

...
<?php
    Table::create(array(
        "dataStore" => your datastore
         "columns" => array( your columns)
           
        "cssClass" => array(
            "table" => "table table-hover table-bordered",

            "td" => function ($row, $columnName) {
                if ($columnName == "totalCost" && $row["totalCost"] == 0) { //CHANGE TO YOUR LOGIC HERE
                    return "noprice";
                } else {
                    return "";
                }
            }
        ),
    ...
 ));
    ?>

and add the corresponding style for the noprice HTML class in your css file.

eMaX commented on May 1, 2023

Thank you Eugene.

So what I have is this:

        "serverSide"=>true,

        "method"=>'post',
        "columns"=>array(

At the moment, I'm resorting to:

       "options"=>array(
            "paging"=>true,
            ...
            "rowCallback" => "function(row, data, index) {
                if (data.region == 'APJ') {
                    $('td:eq(0)', row).addClass('yellow');
                }

What does not work is this:

        "cssClass" => array(
            "table" => "table table-hover table-bordered",

            "td" => function ($row, $columnName) {
                if ($columnName == "region" && $row["region"] == 'APJ') {    
                    return "yellow";
                } else {
                    return "";
                }
            }
        ),

What I meant before is that somehow I don't see cssClass do anything.

Thanks again!

Eugene commented on May 1, 2023

So the version with the rowCallback works but with the cssClass does not work?

eMaX commented on May 1, 2023

yes

Eugene commented on May 2, 2023

I think you should publish the whole view file with problems here and koolreport team can have a look.

Sebastian Morales commented on May 4, 2023

eMax, I see that you used DataTables' serverSide processing which would nullify cssClass' td. However you can still use either options' rowCallBack or cssClass' tdJs client-side function as documented here:

https://www.koolreport.com/docs/datagrid/datatables/#set-custom-css-classes

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

None