JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<table id="myCsps">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>

JavaScript

$("#myCsps").dataTable({
            "bFilter": false,
            "bInfo": true,
            "bProcessing": true,
            "sPaginationType": "bootstrap",
            "asStripClasses": null,
            "oLanguage":{
                "sInfo": "Total CSPs: _TOTAL_",
            "oPaginate": {
                "sNext": "",
               "sLast": "",
                "sFirst": null,
                "sPrevious": null
           }
            },
            //oSearch: { "sSearch": "Type here...", "bRegex": false, "bSmart": false },
            "bLengthChange": false,
            "aaData": data,
            "aoColumns": columnSettings,
            "fnRowCallback": function( nRow, aData, iDisplayIndex,iDisplayIndexFull) {

                $(nRow).children().each(function(index, td) {

                    if(index == 7)  {

                        if ($(td).html() === "Schedule0") {
                            $(td).css("background-color", "#078DC6");
                        } 
                        else if ($(td).html() === "Schedule1") {
                            $(td).css("background-color", "#FFDE00");
                        }                    
                        else if ($(td).html() === "Schedule2") {
                            $(td).css("background-color", "#06B33A");
                        }                    
                        else if ($(td).html() === "Schedule3") {
                            $(td).css("background-color", "#FF3229");
                        } else {
                            $(td).css("background-color", "#FF3229");
                        }                    


                    }
                });                       
                return nRow;
            }
        });
});