TableSorter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.22.1/js/jquery.tablesorter.combined.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body>
    <div class="container">
        	<h1>Example</h1>

        <p>Click on the row headers to sort...</p>
        <table id="sortable_table" class="table table-collapsed table-bordered table-striped table-condensed tablesorter">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Ranking</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td onclick="childRow(this, 'toggle1');">Click Me!</td>
                    <td>20</td>
                </tr>
                <tr class="tablesorter-hasChildRow">
                    <td>I have a child!</td>
                    <td>10</td>
                </tr>
                <tr class="tablesorter-childRow expand-child" id="existing">
                    <td colspan="3">ExistingChild</td>
                </tr>
                <tr>
                    <td onclick="childRow(this, 'toggle2');">Click Me!</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

CSS

td, th {
    text-align: center;
}

JavaScript

function childRow(source, target) {
    var childRowId = '#' + target;
    if ($(childRowId).length) {
        $(source).parent().removeClass('tablesorter-hasChildRow');
        $(childRowId).remove();
    } else {
        $(source).parent().addClass('tablesorter-hasChildRow');
        $(source).parent().after('<tr class="tablesorter-childRow expand-child"><td colspan="3">Hello World!</td></tr>');
        $(source).parent().next().attr('id', target);
        
    }
}


$(function () {
    $('table').tablesorter();
});