JSFiddle - React, Tailwind, and code Playground

by jpsdj01

HTML

<!doctype html>
			<html lang="en">
			<head>
				<meta charset="UTF-8">

				<!-- Meta to not put the web page in the browser cache -->
				<meta http-equiv="Pragma" content="no-cache" />
				<meta http-equiv="Cache-control" content="no-cache" />

				<!-- Meta refesh ths page automatically - in sec. -->
				<meta http-equiv="refresh" content="240">

				<!-- set CDN for datatable librairie -->
				<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/r-2.2.2/dt-1.10.18/datatables.min.css"/>
				<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.bootstrap.min.css"/>

				<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/r-2.2.2/datatables.min.js"></script>
				<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.12.1/sorting/absolute.js"></script>
				<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
				<!-- call librairie datatable and set columns order -->

			</head>
			<body style="font-family: colibri, Arial, Helvetica, sans-serif;" >
				
				<!-- Title and update -->
				<div  class="row" style="padding:0; font-size:13px;">
					<h3 class="col-md-6" align="left" >SLA</h3>
					<p class="col-md-6" align="right" style="color:#696969">Last update : 2022-06-03 10:08</p>
				</div>

				<!-- Table -->
				<table id="tableSla" class="table table-condensed table-bordered table-hover text-center" style="font-size: 14px; width:100%">
					<thead class="table-secondary"> 
						<tr><th style="text-align:center">Process</th><th style="text-align:center">PC10519</th><th style="text-align:center">PC10520</th><th style="text-align:center">PC10523</th><th style="text-align:center">PC0524</th>
						</tr>
					</thead>
					<tbody><tr><td style="text-align:left;padding:5px;padding-left:10px;">Average_SLA</td><td class="average-css"...

CSS

.average-css{
	font-weight:600 !important;
	background-color:#333 !important;
	color:white !important;
}

JavaScript

$( document ).ready(function() {
					var namesType = $.fn.dataTable.absoluteOrder( [
    					{ value: "Average_SLA", position: "top" }
					] );

					var table = $("#tableSla").DataTable({
						pageLength: 25,
						fixedHeader: false,
						aaSorting: [],
						//orderFixed: {pre: [0, "asc"]},
						columnDefs: [
							{ type: namesType, targets: 0 },
							{ "width": "20%", "targets": 0 },
						],
						createdRow: function (row, data, index) {
        					if (data[0] == "Average_SLA") {
            					$(row).addClass("average-css");
        					}
    					}
					});
				});