JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-flash-1.2.1/b-html5-1.2.1/b-print-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.2/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-flash-1.2.1/b-html5-1.2.1/b-print-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.2/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>



<table id="myTable" class="display">
			<thead>
				<tr>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th><input type="text" id="search-category" placeholder="search category"></th>
					<th><input type="text" id="search-sub-category" placeholder="search sub-category"></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<th></th>
					<th>1foo/foo</th>
					<th>2foo</th>
					<th>3foo</th>
					<th>4foo</th>
					<th>5foo-foo</th>
					<th>6foo</th>
					<th>7foo</th>
					<th>8foo</th>
					<th>9foo</th>
					<th>10foo</th>
					<th>11foo</th>
					<th>12foo foo</th>
					<th>13foo foo foo</th>
					<th>14foo</th>
					<th>15foo</th>
				</tr>
			</thead>
			<tbody>
				<tr class="alt">
					<td><input type="checkbox" name="1" id="1"></td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy data</td>
					<td>dummy...

JavaScript

$(document).ready(function() {
		var table = $('#myTable').DataTable({
			"aaSorting":[1,'asc'],//set sort on second column to match home page(default behavious is sort on first column)
			dom: 'Blfrtip',
			buttons: [
				{
					extend: 'excel',
					text: 'Download Excel',
					exportOptions: {
						columns: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],//do not export tickbox columnm
						modifier: {
							selected: true
						}
					}
				},
				{
					text: 'reload page',
					action: function () {//write gnats query on button press
					location.reload(); 
					}
				}

			],
			"columnDefs": [
				{ "name": "checkbox",   "targets": 0 },
				{ "name": "mib",  "targets": 1 },
				{ "name": "oid", "targets": 2 },
				{ "name": "type",  "targets": 3 },
				{ "name": "category",    "targets": 4 },
			],
			colReorder: {
				fixedColumnsLeft: 2
			},
			select: {
				style: 'multi',
				selector: ':checkbox'
			}

		});
			new $.fn.dataTable.FixedColumns( table, {
				leftColumns: 1,
				rightColumns: 1
			} );
		$('#search-category').bind('input propertychange',function(){
			table
			.column($(this).parent().index()+':visible')//rather than stating column index, this finds it so the column can be reordered and still search
			.search(this.value)
			.draw();
		}),
		$('#search-sub-category').bind('input propertychange', function(){
			table
			.column($(this).parent().index()+':visible')
			.search(this.value)
			.draw();
		})
		$(':checkbox').change(
			function(){
				var $this = $(this);
				var $row = $(this).closest('tr');
				if (this.checked) {
					//console.log($this.attr('id')+" checked");
					//$row.addClass('selected');
					//console.log(table.row($row).data()[1]);
					
				}
				if (!this.checked) {
					//console.log($this.attr('id')+" unchecked");
					//$row.removeClass('selected');
				}
			}
		);
		$('input:checked').each(function() {//select ticked rows on load
			var $row = $(this).closest('tr');			
			table.row($row).select();
		});
	});