JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                 <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Map Columns</th>
            </tr>
        </thead>
        <tbody>
            <tr>
               <td class="details-control" data-agencies='["agency22", "agency33","agency17","agency89"]'></td>       
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>
                <button type="button" class="btn">Assign Agenc and Glob</button>
            </td>
            </tr>
            <tr>
                 <td class="details-control" data-agencies='["agency23", "agency344","agency7","agency8"]'></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>
                <button type="button" class="btn">Assign Agenc and Glob</button>
            </td>
            </tr>
            <tr>
                 <td class="details-control" data-agencies='["agency2", "agency53","agency67","agency29"]'></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>
                <button type="button" class="btn">Assign Agenc and Glob</button>
  ...

CSS

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

JavaScript

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<fieldset> <legend>    Agencies  </legend>   <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>agencies has to come from data attributes from tds</td>'+
        '</tr>'+
        '<tr>'+
            '<td>agencies has to come from data attributes from tds</td>'+
        '</tr>'+
        '<tr>'+
            '<td>agencies has to come from data attributes from tds</td>'+
        '</tr>'+
    '</table> </fieldset>' 
        
}
$(document).ready(function() {
     var table = $('#example').DataTable();
     
    

// Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            console.log(row);
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
   // End add event 
    
    $("#divPopUp").dialog({
        resizable: true,
        autoOpen: false,
        width: 550,
        modal: true,
        buttons: {
            "Save": function() {
                var text = $(this).find( ":checkbox:checked" ).map(function() {
                    return this.value+' ';
                }).get().join();
                
                var obj = $(this).data("opener");
                $(obj).parents('td:first').siblings(':eq(2)').find(':text').val(text);
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close:function(){
            $(this).find(...