JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<meta charset="utf-8">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>
<link href="https://cdn.datatables.net/2.0.5/css/dataTables.dataTables.min.css" rel="stylesheet" media="all" />
</head>
<body>
<style>
.colthumb { width: 20px;height:20px; border:solid 1px black; display:inline-block;}
</style>
<table class="testdatatable">
</table>
<script>
let colorcount = 300;
let sharedData = [];
function randCol() {
return "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6,'0');
}
function colLuminosity(col) {
var r = parseInt(col.substring(1,3),16);
var g = parseInt(col.substring(3,5),16);
var b = parseInt(col.substring(5,7),16);
return (r+g+b)/3;
}
function buildData() {
sharedData = [];
// Fill some random data
for(var i=0;i<colorcount;i++)
sharedData.push({num: i, color: randCol() });
}
function buildDatable() {
buildData();
datatable = $('.testdatatable').DataTable({
paging: true,
lengthMenu: [ 100, 200, 500 ],
info: true,
autoWidth: false,
searching: true,
data: sharedData,
order: [ 0, "asc" ],
columns: [
{
data: 'num',
type: 'num'
},
{
type: 'num',
data: function (row, type, val, meta) {
if(type == 'set') {
row.color = val.color;
return row.color;
}
else if(type === 'display') {
return "<span class='colthumb'...