JSFiddle - React, Tailwind, and code Playground

by aureltime

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://raw.githack.com/vedmack/yadcf/4e9b9edee6bb17476dabeeae8ce236f1a203445c/dist/jquery.dataTables.yadcf.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	        <thead>
	          <tr>
	            <th>Some Data</th>
	            <th>Numbers</th>
	            <th>Yes / No</th>
	            <th>Values</th>
	            <th>Tags</th>
	          </tr>
            <tr>
	            <th></th>
	            <th></th>
	            <th></th>
	            <th></th>
	            <th></th>
	          </tr>
	        </thead>
	        <tbody>
	          <tr class="odd gradeX">
	            <td>Some Data 1</td>
	            <td>1000</td>
	            <td>Yes</td>
	            <td>a_value,b_value</td>
	            <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
	          </tr>
	          <tr class="even gradeC">
	            <td>Some Data 2</td>
	            <td>22</td>
	            <td>No</td>
	            <td>b_value,c_value</td>
	            <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
	          </tr>
	          <tr class="odd gradeA">
	            <td>Some Data 3</td>
	            <td>33</td>
	            <td>Yes</td>
	            <td>a_value</td>
	            <td><span class="label lightblue">Tag2</span><span class="label lightblue">Tag3</span></td>
	          </tr>
	          <tr class="even gradeA">
	            <td>Some Data 4</td>
	            <td>44</td>
	            <td>No</td>
	            <td>b_value</td>
	            <td><span class="label lightblue">Tag2</span></td>
	          </tr>
	          <tr class="odd gradeA">
	            <td>Some Data 5</td>
	           ...

CSS

.red {
  border-right : 5px solid red;
}

JavaScript

dataTable = $('#example').DataTable({
orderCellsTop : true,
	scrollY : 100,
  scrollCollapse : true,
  columnDefs : [
  { targets :[2], className : "red"}
  ]
});