JSFiddle - React, Tailwind, and code Playground

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Dug Sohn

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div>
        <h4>History Ledger</h4>

    </div>
    <div id="toolbar">
    </div>
    <table id="myTable" class="table   table-borders">
        <thead>
            <tr>
                <th>Date <i class="fa fa-sort pull-right"></i></th>
                <th>Ref</th>
                <th class="bg-warning">Charges</th>
                <th class="bg-success">Payments</th>
                <th>Balance</th>

</tr>
        </thead>
        <tbody>
            <tr>
                <td>1/1/2017</td>
                <td><i class="fa fa-file-pdf-o"></i></td>
                <td class="bg-warning">$300.00</td>
                <td class="bg-success"></td>
                <td>$300</td>
                <!-- id number is generated by tt_template -->
                <span style="display: none;" id="desc0">
                    <strong class="bold">Note:</strong>
                    <br>
                    <pre>Usage 120kwh</pre>
                </span>
            </tr>
            <tr>
                <td>1/10/2017</td>
                <td><i class="fa fa-cc-visa"></i></td>
                <td class="bg-warning"></td>
                <td class="bg-success">-$300</td>
                <td></td>
                <!-- id number is generated by tt_template -->
                <span style="display: none;" id="desc1">
                    <a href="#" data-toggle="collapse" data-target="#z1"><strong class="bold">Description:</strong></a>
                    <br>
      ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
/*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/

body {
    margin: 10px;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

var $table = $('#myTable');

$table.on('expand-row.bs.table', function (e, index, row, $detail) {
    
    var res = $("#desc" + index).html();
    $detail.html(res);
    console.log('row expanded', e, index);
});

$table.find("tr>td>.detail-icon").on('click',function(e){
    // NOTE - I assume expand-row behaivour added in bootstrap-table.js with a += or similar, so adding this here doesnt break that but does stop propagation
    
    // https://developer.mozilla.org/en-US/docs/Web/API/Event
    
    e.preventDefault();
    e.stopPropagation(); // need at least this line
    // e.stopImmediatePropagation(); // not sure how is different from above line
});
    


$table.on("click-row.bs.table", function(e, row, $tr) {
    
    
    // prints Clicked on: table table-hover, no matter if you click on row or detail-icon
    console.log("Clicked on: " + $(e.target).attr('class'), e);
   
    
    // In my real scenarion, trigger expands row with text detailFormatter..
    //$tr.find(">td>.detail-icon").trigger("click");
    $tr.find(">td>.detail-icon").triggerHandler("click");
    
});