JSFiddle - React, Tailwind, and code Playground

by lokopi

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<table id="datatable" class="table table-bordered table-condensed" cellspacing="0" cellpadding="0" border="1">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Person</th>
                        <th>Peopel Date</th>
                        <th>WhoMan</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Person</th>
                        <th>Peopel Date</th>
                        <th>WhoMan</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Person</th>
                        <th>Peopel Date</th>
                        <th>WhoMan</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                        <th>Person</th>
                        <th>Peopel Date</th>
                        <th>WhoMan</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                    ...

JavaScript

var table = $('#datatable').DataTable({ "bDestroy": true, "sScrollX": true, "oLanguage": { sProcessing: "<img src='/Images/loader.gif'>" }, "paging": false, "fnServerData": function (sSource, aoData, fnCallback, oSettings) { oSettings.jqXHR = $.ajax( { "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback } ); }, "bProcessing": true, "bServerSide": true, "processing": true, "serverSide": true, "ScrollY": "calcDataTableHeight()", "Searching": true,


              "sAjaxSource": "/Wip/SummaryAjax?month=" + month + "&year=" + year
 
              "sPaginationType": "full_numbers",
              "bDeferRender": true,
              "iDisplayLength": 10,
 
 
//Rendering Columns of the Table.
              "columnDefs": [
                   {
 
                       "render": function (data, type, row) {
 
                           if (row[20] == 'True') {
 
                               return data + "</br><div style='background-color:#FEFC85;width:100%;height:30px;vertical-align:middle'></div> ";
                           }
                           else {
 
                               return data;
                           }
 
                       },
                       "targets": 0
                   },
                   {
                       "render": function (data, type, row) {
 
                           if (row[20] == 'True') {
                               return data + "</br><div style='background-color:#FEFC85;width:100%;height:30px;vertical-align:middle'></div> ";
                           }
                           else {
                               return data;
                           }
 
                       },
                       "targets": 1
                   },
                      {
                          "render": function (data, type, row) {
 
                              var dataToconvert = '';
                              var rowsixteen = '';
                           ...