JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jquery-datatables-column-filter.googlecode.com/svn-history/r77/trunk/media/js/jquery-1.5.1.min.js"></script>
<script src="https://jquery-datatables-column-filter.googlecode.com/svn-history/r77/trunk/media/js/jquery-ui.js"></script>
<script src="https://jquery-datatables-column-filter.googlecode.com/svn-history/r77/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
<script src="https://jquery-datatables-column-filter.googlecode.com/svn-history/r77/trunk/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://jquery-datatables-column-filter.googlecode.com/svn-history/r77/trunk/media/css/demo_page.css">
<link rel="stylesheet" href="https://jquery-datatables-column-filter.googlecode.com/svn-history/r77/trunk/media/css/demo_table.css">
<link rel="stylesheet" href="https://jquery-datatables-column-filter.googlecode.com/svn-history/r77/trunk/media/css/themes/base/jquery-ui.css">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

	
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">

	</head>




<body id="dt_example">

		<div id="container">
			<a href="index.html">Home</a>
			<a href="http://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter">Wiki</a> 
			<div class="full_width big">

				JQuery DataTable Column Filter - Using Checkboxes
			</div>
			
			<h1>Preamble</h1>
			<p>
				DataTables ColumnFilter plugin can be used with checkboxes as fiters 
			</p>

			
	
			
			
			<h1>Live example</h1>







			<div id="demo">

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS...

CSS

.toggle-check {
		 overflow: auto; 
		 clear: both; 
		 bottom:10%;
		 left:0;
		 text-align: left;
		 position: absolute; 
		 z-index: 99997;
	}

JavaScript

$(document).ready( function () {
				$('#example')
					.dataTable()
					.columnFilter(
						{ /*sPlaceHolder: "head:after",*/ 
							aoColumns:
							[	{  type: "checkbox", values: null /*[ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Tasman', 'Webkit']*/ },
								{},
								{},
								{},
								{ 
									type: "checkbox", 
									values: 
									[ 
										{value: 'A', label: 'Grade A' },
										{value: 'B', label: 'Grade B' },
										{value: 'C', label: 'Grade C' },
										'U',
										'X'
									]  
								} 
							]
						});		
			} );