JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
<body>
<table class="ogrid display table table-striped table-bordered nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                        <th style="width:90px;" class=""><span>Assign Date</span></th>
                        <th style="width:120px;" class=""><span>Assign By</span></th>
                        <th><span>Info</span></th>
                        <th style="width:90px;" class=""><span>Remove Date</span></th>
                        <th style="width:120px;" class=""><span>Remove By</span></th>
                        <th style="width:90px;" class=""><span>Range1</span></th>
                        <th style="width:90px;" class=""><span>Range2</span></th>
                        <th style="width:90px;" class=""><span>Flag1</span></th>
                        <th style="width:70px;" class=""><span>Flag2</span></th>
                        <th style="width:70px;" class=""><span>Signals</span></th>
                        <th style="width: 50px; max-width: 50px; padding: 0;" data-priority="1"></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
</body>

CSS

table.dataTable.ogrid { table-layout: fixed; }
table.dataTable.ogrid td { text-overflow: ellipsis; }
table.dataTable.ogrid th, table.dataTable.ogrid td {padding: 5px 3px;font-size: 13px;overflow: hidden; }
table.dataTable.ogrid tbody tr .edit {cursor: pointer;}
table.dataTable.ogrid tbody tr .delete {cursor: pointer;}
table.dataTable.ogrid tbody tr .action {cursor: pointer;}
table.dataTable.ogrid tbody tr i.fa { padding: 0 3px;}
table.dataTable.ogrid tbody tr td.actions .btn-group { vertical-align: top;}

table.dataTable.ogrid img.icon { width: 16px;height: 16px;}

JavaScript

var $grid = $('.ogrid');

var columns = [{"data":"AssignDateStr","title":"Assign Date","orderable":true,"responsivePriority":1000},
{"data":"AssignBy","title":"Assign By","orderable":true,"responsivePriority":1001},
{"data":"Info","title":"Info","orderable":true,"responsivePriority":1},
{"data":"RemoveDateStr","title":"Remove Date","orderable":true,"responsivePriority":1003},
{"data":"RemoveBy","title":"Remove By","orderable":true,"responsivePriority":1004},
{"data":"Range1","title":"Range1","orderable":false,"responsivePriority":1005},
{"data":"Range2","title":"Range2","orderable":false,"responsivePriority":1006},
{"data":"Flag1","title":"Flag1","orderable":false,"responsivePriority":1007},
{"data":"Flag2","title":"Flag2","orderable":false,"responsivePriority":1008},
{"data":"Signals","title":"Signals","orderable":false,"responsivePriority":1009},
{"title":"","responsivePriority":1,"class":"actions"}];

var columnDefs = [
{"responsivePriority":1,"targets":2},
{"targets":-1,"responsivePriority":1,"data":null,"defaultContent":"<i class=\"fa fa-edit edit\" title=\"edit record\"></i>","orderable":false}];

var dataSet = [
{"ID":2,"RefID":1,"Info":"16OO826","AssignDateStr":"04/16/2016 11:00","AssignBy":"user1", "RemoveDateStr":"04/18/2016 14:30","RemoveBy":"user3","Range1":"10 - 20","Range2":"0 - 1000", "Flag1":60,"Flag2":true,"Signals":"0"},
{"ID":3,"RefID":1,"Info":"Table1","AssignDateStr":"04/14/2016 14:53","AssignBy":"user2", "RemoveDateStr":"04/15/2016 22:00","RemoveBy":"user3","Range1":"20 - 32","Range2":"0 - 1000", "Flag1":60,"Flag2":true,"Signals":"0"},
{"ID":4,"RefID":1,"Info":"Table2","AssignDateStr":"04/18/2016 15:00","AssignBy":"user2", "RemoveDateStr":"04/19/2016 12:00","RemoveBy":"user2","Range1":"0 - 50","Range2":"0 - 2000", "Flag1":120,"Flag2":false,"Signals":"0"},
{"ID":10,"RefID":1,"Info":"A304","AssignDateStr":"09/06/2016 00:00","AssignBy":"user1", "RemoveDateStr":"","RemoveBy":"","Range1":"20 - 28","Range2":"0 - 6000",...