HTML Table Conditional Row Formatting

The issue appears to be how the datatables library handles rendering. It applies the styles after rendering the data, which appears to be causing it to skip the first column.

You can try applying the formatting during the drawCallback.

$(myTable).DataTable({

  data: reorderedData,

  lengthMenu: itemsPerPageOptions,

  columns: colNames,


  createdRow: function(row, data, dataIndex) {


    // This formatting applies during the row creation phase

    var daysOld = data[0]; // First column value (Days Old)


    if (daysOld == 1) {

      $(row).css('background-color', 'lightyellow');

    } else if (daysOld > 1) {

      $(row).css('background-color', 'lightcoral');

    }

  },



  // Add a drawCallback function to apply additional formatting

  drawCallback: function() {

    var table = $(myTable).DataTable();


    // Iterate through all rows to ensure formatting applies

    table.rows().every(function(rowIdx, tableLoop, rowLoop) {

      var data = this.data();

      var row = this.node();


      var daysOld = data[0]; // Get the value of the first column


      if (daysOld == 1) {

        $(row).css('background-color', 'lightyellow');

      } else if (daysOld > 1) {

        $(row).css('background-color', 'lightcoral');

      }

    });

  }

});

or target the specific cell in the first column rather than the row.

$(myTable).DataTable({

  data: reorderedData,

  lengthMenu: itemsPerPageOptions,

  columns: colNames,


  createdRow: function(row, data, dataIndex) {

    var daysOld = data[0]; // First column value (Days Old)


    // Apply background color to the first column (specific cell)

    var firstCell = $('td', row).eq(0); // Target the first column


    if (daysOld == 1) {

      $(row).css('background-color', 'lightyellow'); // Entire row

      firstCell.css('background-color', 'lightyellow'); // First column

    } else if (daysOld > 1) {

      $(row).css('background-color', 'lightcoral'); // Entire row

      firstCell.css('background-color', 'lightcoral'); // First column

    }

  }

});