JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<table id="outer">
    <thead>
        <tr>
            <th style="width: 25%;">ID</th>
            <th style="width: 25%;">Summary</th>
            <th style="width: 25%;">Date</th>
            <th style="text-align: center;">Expand</th>
        </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>test</td>
    <td>January 1, 2014</td>
    <td style="text-align: center; white-space: nowrap;">
        <a href="#" data-id="1" class="expander">Expand</a>
    </td>
    </tr>
    <tr>
    <td>2</td>
    <td>test</td>
    <td>January 1, 2014</td>
    <td style="text-align: center; white-space: nowrap;">
        <a href="#" data-id="2" class="expander">Expand</a>
    </td>
    </tr>
    <tr>
    <td>3</td>
    <td>test</td>
    <td>January 1, 2014</td>
    <td style="text-align: center; white-space: nowrap;">
        <a href="#" data-id="3" class="expander">Expand</a>
    </td>
    </tr>
    </tbody>
</table>

JavaScript

var innerData = [{
    'id': 0,
    'name': 'test1',
    'date': '1/12/2015',
    'test': 'this is a test',
},{
    'id': 1,
    'name': 'test1',
    'date': '1/12/2015',
    'test': 'this is a test',
},{
    'id': 2,
    'name': 'test1',
    'date': '1/12/2015',
    'test': 'this is a test',
},{
    'id': 3,
    'name': 'test1',
    'date': '1/12/2015',
    'test': 'this is a test',
}];
                 
$(function() {
    var $dt = $('#outer').DataTable( {
        "paging":   false,
        "searching": false,
        "ordering": false,
        "info":     false
    });
    console.log('here');
    
    
        $('.expander').click(function(e) {
            e.preventDefault();
            var tr = jQuery(this).closest('tr');
            var row = $dt.row( tr );
            var id = $(this).data('id');
            if ( row.child.isShown() ) {
                tr.removeClass( 'details' );
                row.child.hide();
            }
            else {
                if (!$(this).data('hasChild')) {
                     row.child( '<table cellpadding="0" cellspacing="0" border="0" class="display table subTable" id="subtable_'+id+'"></table>' ).show();
                    
                    $('#subtable_'+id).dataTable( {
                                "paging":   false,
                                "searching": false,
                                "ordering": false,
                                "info":     false,
                                "data": innerData,
                                "columns": [
                                    { "title": "ID", data: "id" },
                                    { "title": "test", data: "name" },
                                    { "title": "date", data: "date" },
                                    { "title": "test", data: "test" }]
                    });
                    $(this).data('hasChild', true);
                } else {
                    row.child.show();
                }
             ...