JSFiddle - React, Tailwind, and code Playground

by alexseitz

HTML

<html>
<head>
	<title>Test</title>
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
	<script src="https://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.0.9.2.js"></script>
	
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example" class="display">
	<thead>
		<tr>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
			<th>Comment</th>
		</tr>
	</thead>
	<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>
			<td contentEditable></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>
			<td contentEditable></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>
			<td contentEditable></td>
		</tr>
		<tr>
			<td>Cedric Kelly</td>
			<td>Senior Javascript Developer</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2012/03/29</td>
			<td>$433,060</td>
			<td contentEditable></td>
		</tr>
	</tbody>
</table>
</body>
</html>

JavaScript

$(document).ready(function() {
			
			var table = $('#example').DataTable( {
				"lengthMenu": [[-1], ["All"]],
				dom: 'Brt',
			} );
		
			yadcf.init(table,
			[
				{
					column_number: 6
				}
			] );
			
			$('th').on( 'mousemove', function(){
				if($(this).text().includes("Comment")){
					$('#example').DataTable().cells( 'td' ).invalidate().draw();
				}
			});
			
		} );