Adding custom Class to Row based on specific Cell Value

Adding custom Class to Row based on specific Cell Value

devang3devang3 Posts: 18Questions: 1Answers: 0

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

Replies

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

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

  • devang3devang3 Posts: 18Questions: 1Answers: 0
    edited April 2021

    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 ?

  • kthorngrenkthorngren Posts: 21,262Questions: 26Answers: 4,934

    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

  • devang3devang3 Posts: 18Questions: 1Answers: 0

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

  • devang3devang3 Posts: 18Questions: 1Answers: 0

    Solved! changed field name

  • devang3devang3 Posts: 18Questions: 1Answers: 0

    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");
          }
        },
    
  • kthorngrenkthorngren Posts: 21,262Questions: 26Answers: 4,934

    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

  • devang3devang3 Posts: 18Questions: 1Answers: 0

    Solved Thanks!

This discussion has been closed.