JSFiddle - React, Tailwind, and code Playground

by FirstBug

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.3.1/css/colReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/colreorder/1.3.1/js/dataTables.colReorder.min.js"></script>
<br>
<button id="redraw">redraw</button>
<table id="example" class="display" cellspacing="0" width="100%">

</table>

CSS

td.red {
  background-color: red;
}

JavaScript

$(document).ready(function() {
  $("#redraw").click(function() {

    table.draw('page');
  });

  //
  var data = [{
    id: 12,
    name: 'Fred',
    highlight: ['name']
  }, {
    id: 13,
    name: 'Simon',
    highlight: []
  }, {
    id: 14,
    name: 'Albert',
    highlight: ['name']
  }];
  //
  var table = $('#example').DataTable({
    colReorder: {
      //order: [1, 0]
    },
    "columns": [{
      'title': 'ID',
      'data': 'id',
      'name': 'id',
    }, {
      'title': 'Name',
      'data': 'name',
      'name': 'name',
    }],
    data: data,
    rowCallback: function(row, data, index) {
      var _table = $(this).dataTable().api();
      var _hasHighlight = data.highlight && data.highlight.length;
      if (_hasHighlight) {
      
        $(row).find('td').each(function(_colIndex) {
          //var _cell = _table.cell(this);
          //var _colIndex = _cell.index().column;
          var _col = _table.column(_colIndex);
          var _dataSrc = _col.dataSrc();
          console.log(_dataSrc);
          if ($.inArray(_dataSrc, data.highlight) !== -1) {
            $(this).addClass('red');
          }
        }); 
      }
    }
  });

});