Adding custom Class to Row based on specific Cell Value

devang3

Link to test case: http://live.datatables.net/ruqizeye/1/

Description of problem: I am trying to give a new class to a row Where in column "Available" value of cell is "No"

"createdRow": function( row, data, dataIndex ) {
if ( data[4] == "Yes" ) {
$(row).addClass( 'red' );
}
}

Tried to use above code I am unable to get it working.

PS: using it with Bootstrap 5

tangerine

Your column with "Yes" is column 3, not 4.

devang3

Sorry my Mistake I want "No" in red BG

It still won't add the class...

Also column 2 is Grouped so will I have to keep it at 3 or 4 ?

kthorngren

Your row data is objects not arrays. You need to use data.available instead of data[4], for example:
http://live.datatables.net/ruqizeye/2/edit

Kevin

devang3

It definitely worked here but on my actual data it's not working...

devang3

Solved! changed field name

devang3

It doesn't work on fetching data from Google Sheets...

ajax: {
      url:google-sheet.json
      dataSrc: "feed.entry",
    },

As suggested above worked perfectly on locally stored json

createdRow: function (row, data, dataIndex) {
      if (data.available == "No") {
        $(row).addClass("text-muted red available-no");
      }
    },

kthorngren

Without seeing the data structure its hard to say. Can you provide a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Start by debugging the createdRow function. Take a look at the values of the data parameter passed into the function. Is there a data.available object? Does it have the value 'No'?

Inspect the row you expect the classes assigned to and see if they are assigned. Maybe the CSS is being applied to the class?

Kevin

devang3

Solved Thanks!