JSFiddle - React, Tailwind, and code Playground

by jpsdj01

HTML

<?php
		$tab = Array(
    		"headers" => Array
        		(
            		"0" => "service",
            		"1" => "PC10519",
            		"2" => "PC10520",
            		"3" => "PC10523",
            		"4" => "PC10524"
        		),

    		"Average_SLA" => Array
        		(
            		"1" => "Average_SLA",
            		"2" => "97.94 %",
            		"3" => "98.29 %",
            		"4" => "97.28 %",
            		"5" => "99.08 %"
        		),
    		"process#1" => Array
        		(
            		"0" => "process#1",
            		"PC10519" => "100.00 %",
            		"PC10520" => "100.00 %",
            		"PC10523" => "100.00 %",
            		"PC10524" => "100.00 %"
        		),

    		"process#2" => Array
        		(
            		"0" => "process#2",
            		"PC10519" => "98.34 %",
            		"PC10520" => null,
            		"PC10523" => null,
            		"PC10524" => "100.00 %"
        		),

    		"process#3" => Array
        		(
            		"0" => "process#3",
            		"PC10519" => "98.35 %",
            		"PC10520" => "98.23 %",
            		"PC10523" => "98.35 %",
            		"PC10524" => "98.67 %"
        		),

    		"process#4" => Array
        		(
            		"0" => "process#4",
            		"PC10519" => "100.00 %",
            		"PC10520" => "100.00 %",
            		"PC10523" => "100.00 %",
            		"PC10524" => "100.00 %"
        		),

    		"process#15" => Array
        		(
            		"0" => "process#5",
            		"PC10519" => "98.32 %",
            		"PC10520" => "98.43 %",
            		"PC10523" => "98.44 %",
            		"PC10524" => "98.83 %"
        		),

    		"process#16" => Array
        		(
            		"0" => "process#6",
            		"PC10519" => "98.34 %",
            		"PC10520" => "99.76 %",
            		"PC10523" => "97.99 %",
            		"PC10524" => "98.41 %"
        		),

    		"process#7" => Array
        		(
            		"0" => "process#7",
            		"PC10519" => "100.00 %",
       ...

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");
        					}
    					}
					});
				});