JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://karman.d2.wris.net/home/includes/js/libs/dataTables-1.10.0/media/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://karman.d2.wris.net/home/includes/js/libs/dataTables-1.10.0/media/css/jquery.dataTables.css">
<script src="karman.d2.wris.net/home/includes/js/libs/dataTables-1.10.0/media/js/dataTables.bootstrap.js"></script>
<script src="http://karman.d2.wris.net/home/includes/js/libs/bootstrap.min.js"></script>
<script src="http://karman.d2.wris.net/home/includes/js/functions.js"></script>
<link rel="stylesheet" href="http://karman.d2.wris.net/home/includes/css/bootstrap.css">
<script src="http://karman.d2.wris.net/home/includes/js/base.js"></script>
   <div style="width:960px; overflow-x:scroll;">
    <div id="productListContainer">
		<table id="productList" class="standard" width="100%">
			<thead>
				<tr>
					<th>Product Code</th>
                    <th>Col1</th>
                    <th>col2</th>
                    <th>col3</th>
                    <th>Col1</th>
                    <th>col2</th>
                    <th>col3</th>
                    <th>Col1</th>
                    <th>col2</th>
                    <th>col3</th>
                    <th>Col1</th>
                    <th>col2</th>
                    <th>col3</th>
                </tr>
			</thead>
			<!--- products list --->
			<tbody>
					<tr>
                        <td>PC1</td>
                        <td>PC1col1</td>
                        <td>PC1col2</td>
                        <td>PC1col3</td>
                        <td>PC1col1</td>
                        <td>PC1col2</td>
                        <td>PC1col3</td>
                        <td>PC1col1</td>
                        <td>PC1col2</td>
                        <td>PC1col3</td>
                        <td>PC1col1</td>
                        <td>PC1col2</td>
                        <td>PC1col3</td>
                    </tr>
					<tr>
                        <td>PC2</td>
             ...

JavaScript

var table = $('#productList').dataTable({
		"paging"      : false,
//		"scrollY"       : 300,
//		"scrollX"		: true,
//       "scrollCollapse": true
	})

$("#productList tfoot th").each( function ( i ) {
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(this).empty() )
            .on( 'change', function () {
                table.column( i )
                    .search( '^'+$(this).val()+'$', true, false )
                    .draw();
            } );
 
        table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );