JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%">     
    </table>

CSS

.background {
 background-color: blue;
}

.backgroud-red {
  background-color: red;
}

.background-yellow {
  background-color: yellow;
}

JavaScript

/* $(document).ready(function() {
    $('#example').DataTable();
} );
 */
 
 let className = ""
 
 const data = [{title: "Walk in", totalRevenue: 2002, growth: 3.2}, {title: "Retail", totalRevenue: 1231, growth: 2.2},
 {title: "Hospital", totalRevenue: 5421, growth: 1.9},
 {title: "Online", totalRevenue: 2442, growth: 3.2},
 {title: "Fitness", totalRevenue: 8742, growth: 0.3}]
 
 const otherData = [{newTitle: 'More data', newTotalRevenue: 2000, newGrowthRate: 3.2}]
 
    var table = $('#example').DataTable({
    	rowCallback: function(row, data, index){
  	if(data[2] < 3){
    	$(row).find('td:eq(2)').css('background-color', 'red');
    }
  },
        "columnDefs": [
            {
                "targets": [1, 2],
                "className": 'dt-body-right'
            },
        ],
        data: [data,otherData],
        responsive: true,
        paging: true,
        searching: false,
        bInfo: true,
        "order": [[2, "desc"]],
        "pageLength": 20,
        columns: [
            {
                data: "title",
                title: "Title",
            },
            { data: "totalRevenue", title: 'Revenue' },
            { data: "growth", title: 'Revenue Growth' },
            { data: "newTitle", title: "New Column"}
        
        ]
    });