JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<div class="table-responsive">
	      <table id="docenti" class="table table-striped table-bordered" cellspacing="0" width="100%">
	        <thead>
	            <tr>
	                <th>Name</th>
	                <th>Position</th>
	                <th>Office</th>
	                <th>Age</th>
	                <th>Start date</th>
	                <th>Salary</th>
	            </tr>
	        </thead>
	        <tfoot>
	            <tr>
	                <th>Name</th>
	                <th>Position</th>
	                <th>Office</th>
	                <th>Age</th>
	                <th>Start date</th>
	                <th>Salary</th>
	            </tr>
	        </tfoot>
	        <tbody>
	            <tr>
	                <td>Tiger Nixon</td>
	                <td>System Architect</td>
	                <td>Edinburgh</td>
	                <td>61</td>
	                <td>2011/04/25</td>
	                <td>$320,800</td>
	            </tr>
	            <tr>
	                <td>Garrett Winters</td>
	                <td>Accountant</td>
	                <td>Tokyo</td>
	                <td>63</td>
	                <td>2011/07/25</td>
	                <td>$170,750</td>
	            </tr>
	            <tr>
	                <td>Ashton Cox</td>
	                <td>Junior Technical Author</td>
	                <td>San Francisco</td>
	                <td>66</td>
	                <td>2009/01/12</td>
	                <td>$86,000</td>
	            </tr>
	  ...

JavaScript

$(document).ready(function() {
		    //Individual column searching (text inputs): https://datatables.net/examples/api/multi_filter.html
			// Setup - add a text input to each footer cell
		    $('#docenti tfoot th').each( function () {
		        var title = $(this).text();
		        $(this).html( '<input type="text" class="form-control" placeholder="'+title+'" />' );
		    } );
		 
		 	//Individual column searching (text inputs): https://datatables.net/examples/api/multi_filter.html
		    // DataTable
		    var table = $('#docenti').DataTable( {
	            //Scroll - vertical, dynamic height: https://datatables.net/examples/basic_init/scroll_y_dynamic.html
	            scrollY:        '80vh',
		        scrollCollapse: true,
		        paging:         false,
		        //State saving: https://datatables.net/examples/basic_init/state_save.html
		        stateSave: true,
		        //Internationalisation: https://datatables.net/manual/i18n
		    	//nternationalisation plug-ins: https://datatables.net/plug-ins/i18n/
	            language: {
	                "url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/Italian.json"
	            },
		    } );
		 
		 	//Individual column searching (text inputs): https://datatables.net/examples/api/multi_filter.html
		    // Apply the search
		    table.columns().every( function () {
		        var that = this;
		 
		        $( 'input', this.footer() ).on( 'keyup change', function () {
		            if ( that.search() !== this.value ) {
		                that
		                    .search( this.value )
		                    .draw();
		            }
		        } );
		    } );
		} );