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 Agencies</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 Agencies</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 Agencies</button>
            </td>
        </tr>
    </tbody>
</table>
<div id="divPopUp">
    <div>
        <input class="chk" id="mychk1" type="checkbox" value="Account : Account Phone (PHONE, 40 )"...

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;">' + $.map(d.agencies, function (v) {
        return '<tr>' +
            '<td>' + v + '</td>' +
            '</tr>'

    }).join('') +
        '</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
            row.child(format($(this).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(":checkbox").removeAttr('checked');
            $(this).dialog("close");
        }
    });

    $('button.btn').on('click', function () {
        var title = $(this).parents('td:first').siblings(':eq(0)').text();
        console.log("title is : " + title);
       ...