JSFiddle - React, Tailwind, and code Playground

by cubicalmonkey

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/cr-1.5.4/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<div id='parentdiv'>

</div>

CSS

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center !important;
    cursor: pointer !important;
  }
  tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
  }

JavaScript

$('#parentdiv').append( $('<table/>',{
    'class'         :'table', 
    'id'            :'ONT_table'  
  }));


ONT_TABLE = function ( combinedData ) {  
console.log ( combinedData)
        if ( !$.fn.dataTable.isDataTable( '#ONT_table' ) ) {  
          table = $('#ONT_table').DataTable({   
            "processing": true,
            "orderClasses": false,
            dom: 'Bfrtip',
            rowId: "FSAN",
            buttons: [
              'excel'
            ],   
            columns: [
              {    
                //"className": "details-control",
                "class":  "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
              },   
              {    
                 "MAC": "weblink",
                 "data": "MAC",
                 "title": "MAC",
                 "render": function(data, type, row, meta){
                   data = '<a href="https://'+location.hostname+'/merlin/?MAC=' + data + '" target="_blank" >' + data + '</a>';
                   return data;
                 }    
              },   
              {    
                 "FSAN": "weblink",
                 "data": "FSAN",
                 "title":"FSAN",
                 "render": function(data, type, row, meta){
                   data = '<a href="https://'+location.hostname+'/merlin/?MAC=' + data + '" target="_blank" >' + data + '</a>';
                   return data;
                 }    
              },   
              { "data": "ONT-ID",
                "title": "ONT-ID"
              },   
              { "data": "Subscriber Count",
                "title": "Subscriber Count"
              },   
              { "data": "Address",     
                "title": "Address"
              },   
              { "data": "Status",     
                "title": "Status"
              },   
              { "data": "Model",     
                "title": "Model"
              },  ...