Bootstrap table with subtables with additional columns

Question

I am using bootstrap table (http://bootstrap-table.wenzhixin.net.cn/) and I have a situation where I have nested subtables. In my subtable I would have multiple rows with one additional column in each sub table. Something like below:

    #   |   Project     |   Number of Lines
+   1   |   ABC         |   15,000

        #   |   Project     |   Repo    |   Number Of Lines
    +   1   |   ABC         |   abc     |   1500

            #   |   Project     |   Repo    |   Language    |   Number Of Lines
            1   |   ABC         |   abc     |   java        |   1000
            2   |   ABC         |   abc     |   xml         |   500

    +   2   |   ABC         |   def     |   1440
    +   3   |   ABC         |   ghi     |   1200
    +   4   |   ABC         |   kbc     |   1700

+   2   |   DEK         |   15,000
+   3   |   TREM        |   15,000
+   4   |   BER         |   15,000

Do you think it's possible to have additional columns in subtables using bootstrap-table library? If so can someone please provide an example? I appreciate your help.

Thank you, Ravi Hasija

Answer 1

Yes it does, as whatever you pass into detailView is whats used, so if the table you create/use there has more columns, it will show them.

Thats why there is no 'subtable' option, just detailView and the ability to pass or even dynamically create whatever content there you want.

http://bootstrap-table.wenzhixin.net.cn/documentation/

---

http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html

<div class="container">
    <h1>Sub Table</h1>
    <p>Use <code>onExpandRow</code> event to handle your detail view.</p>
    <table id="table"
           data-detail-view="true">
        <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>
<script>
    var $table = $('#table');
    $(function () {
        buildTable($table, 8, 1);
    });
    function expandTable($detail, cells) {
        buildTable($detail.html('<table></table>').find('table'), cells, 1);
    }
    function buildTable($el, cells, rows) {
        var i, j, row,
                columns = [],
                data = [];
        for (i = 0; i < cells; i++) {
            columns.push({
                field: 'field' + i,
                title: 'Cell' + i,
                sortable: true
            });
        }
        for (i = 0; i < rows; i++) {
            row = {};
            for (j = 0; j < cells; j++) {
                row['field' + j] = 'Row-' + i + '-' + j;
            }
            data.push(row);
        }
        $el.bootstrapTable({
            columns: columns,
            data: data,
            detailView: cells > 1,
            onExpandRow: function (index, row, $detail) {
                expandTable($detail, cells - 1);
            }
        });
    }
</script>

That prints off columns using indexs, doesnt pass in any data via url or other means.

But you can clearly see that buildTable just prints off a <table> and calls bootstrapTable init code on that new table when OnExpandRow is triggered, which calls buildTable again on next OnExpandRow, and ect to ad infinitum.

Whatever table you put into the detailView is what is used, regardless of the parent table.

Just use F12 to see the output once you expand a few rows.