DataTable conditional cell formatting based on sorted column

Rick Inman commented on Feb 26, 2021

I am looking for a way to apply css to individual cells in a column depending whether it has been sorted.

Example: 3 column data grid (col1, col2, col3). Default sort order is applied to col1 through cssClass like this:

"cssClass"=>array(
      "td"=>function ($row, $columnName) {
          if ($col1=="Percent1") { 
              if ((float)($row["Percent1"]) < 49.50) {
                  return "redclass";
              } elseif ((float)($row["Percent1"]) < 69.50) {
                  return "yellowclass";
              } else { return "greenclass"; }
          }
        }
      )

I would like to apply this same cssClass config to a different column dynamically when the alternate column is clicked to sort.

Example: user clicks on col2 -> apply cssClass to col2 cells.

Thanks for the input.

David Winterburn commented on Mar 1, 2021

Hi Rick,

"cssClass" is processed on server side (php) while sorting a column in DataTables is performed on client side (no callback to server needed). Thus, it's not simple to change/remove a column's css classes when an alternate column is clicked to sort (it's doable with with a lot of js code).

In your case I think there's a more simpler solution. In single column sort mode, the sorted column of DataTables has a css class called "sorting_1" (it's set dynamically on client side). Therefore, we could combine this with "cssClass" like this:

//MyReport.view.php
<style>
    .sorting_1.low-value {
        color: red;
    }

    .sorting_1.medium-value {
        color: yellow;
    }

    .sorting_1.high-value {
        color: green;
    }
</style>

    ...
    "cssClass"=>array(
      "td"=>function ($row, $columnName) {
          if (in_array($columnName, ["Percent1", "Percent2", "Percent3"])) { 
              if ((float)($row[$columnName]) < 49.50) {
                  return "low-value";
              } elseif ((float)($row[$columnName]) < 69.50) {
                  return "medium-value";
              } else { return "high-value"; }
          }
        }
      )

Hope this helps. Thanks!

Rick Inman commented on Mar 1, 2021

Thank you David. I will give this a try. This looks like it will work well!

In the case of enabling using js, I am not seeing id's or names defined in the DataTable creation. What can js use to identify components/events? I'd potentially like to use this to extend the UI for search components too. Thanks for the direction on this too.

Rick.

David Winterburn commented on Mar 3, 2021

Hi Rick,

The js DataTables object could be referenced using DataTables' "name" like this:

<?php
    ...
    DataTables::create(array(
        "name" => "myDataTables",
        ...

?>
<script>
    console.log(myDataTables);
    ...
</script>

KoolReport's Forum

DataTable conditional cell formatting based on sorted column #1928

Build Your Excellent Data Report