JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css">
<script src="http://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<div style="padding-left:16px; padding-right:16px;">
<table id="QotHstry" class="display cell-border compact responsive nowrap stripe" width="100%">
<thead>
<tr>
  <th class="never"></th>  
  <th class="control all"></th>
  <th class="FieldLabel dt-left all">Created On</th>
  <th class="FieldLabel dt-left all">Estimate Nums</th>
  <th class="FieldLabel dt-left not-mobile  not-tablet">Description</th>
  <th class="FieldLabel dt-left mobile tablet">Company Name</th>
  <th class="FieldLabel dt-left">Prepared For</th>
  <th class="FieldLabel dt-left">Finished Size</th>
  <th class="FieldLabel dt-left">Color</th>
  <th class="FieldLabel dt-left">Coating</th>
  <th class="FieldLabel dt-left">Material</th>
  <th class="FieldLabel dt-left">Prep</th>
  <th class="FieldLabel dt-left">Finishing</th>
  <th class="FieldLabel dt-right">Quantity 1</th>
  <th class="FieldLabel dt-right">Quantity 2</th>
  <th class="FieldLabel dt-right">Quantity 3</th>
  <th class="FieldLabel dt-right">Quantity 4</th>
  <th class="FieldLabel dt-right">Quantity 5</th>
  <th class="FieldLabel dt-left">Postal Code</th>
</tr>
</thead>
<tbody>
<tr>
<td class="never">ROWID1</td>
<td class="control all"></td>    
<td class="dt-left all">12/05/2014 10:00 AM</td>
<td class="dt-left all">110434</td>
<td class="dt-left"></td>
<td class="dt-left">Test Company</td>
<td class="dt-left">Test User</td>
<td class="dt-left">50" x 50"</td>
<td class="dt-left">4 Color</td>
<td class="dt-left">Aqueous</td>
<td...

CSS

table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
  top: 2px;
  left: 4px;
  height: 14px;
  width: 14px;
  display: block;
  position: absolute;
  color: white;
  border: 2px solid white;
  border-radius: 14px;
  text-align: center;
  line-height: 12px;
  box-shadow: 0 0 3px #444;
  box-sizing: content-box;
  content: "+";
  background-color: #31b131;
}

.KnSelRow { 
  background-color:rgb(121,117,46)!important; 
  color:rgb(255,255,255)!important;
}

JavaScript

$(document).ready(function() {
  var hQotHstry = $('#QotHstry').DataTable({
    "info": true,
    "language": {
      "emptyTable": 'No quotes were found to display. Click the \"New\" button to get started.',
      "zeroRecords": "No quotes were found which matched your search.",
      "info": "Showing _START_ to _END_ of _TOTAL_ quotes.",
      "infoFiltered": "(Filtered from _MAX_ total quotes)",
      "infoEmpty": "No quotes found."
    },
    "ordering": false,
    "paging": true,
    "pageLength": 10,
    "pagingType": "simple_numbers",
    "searching": true,
    "responsive": {
      "details": {
        "type": "column"
      }
    }
  });
    
  $('#QotHstry tbody').on('click', 'tr', function () {
    if (!$(this).hasClass('KnSelRow')) {
      hQotHstry.$('tr.KnSelRow').removeClass('KnSelRow');
      $(this).addClass('KnSelRow');
    }
  });
    
  $('#QotHstry tbody tr:eq(0)').click();
});