CODEWITHSUNDEEP
jqueryhtmlbootstrap-table
Alex Leith
Alex Leith

Reputation: 168

Bootstrap-Table expanding/collapsing table example starting collapsed

I'm implementing a table that has expanding/collapsing groups, and it's working, but I can't figure out how to start the groups collapsed.

I'm working with this: http://jsfiddle.net/Knoxvillekm/byv2pk24/

If you click the headings, the blue rows in this image, the rows beneath collapse.

bootstrap-table groups

How can I change it so that these groups are collapsed by default?

EDIT: including code.

The page I'm working with uses a lot of bootstrap and javascript, but here's the relevant parts.

HTML:

          <table  class="table table-hover"
                  data-row-style="rowStyle"
                  id="layer-list"
                  data-unique-id="dataid"
                  data-group-by="true"
                  data-group-by-field="group"
                  data-search="true"
                  data-show-columns="false"
                  data-show-toggle="false"
                  data-detail-view="true"
                  data-detail-formatter="detailFormatter">
            <thead class="hidden">
              <tr>
                <th class="hidden" data-field="group">Group</th>
                <th data-field="title">Name</th>
              <tr>
            </thead>
            <tbody class="searchable"></tbody>
          </table>

Upvotes: 1

Views: 6160

Answers (1)

Alex Leith
Alex Leith

Reputation: 168

I found a solution, which was pretty simple actually.

In the 'collapsing-table.js' file I link to above, I altered the 'rowStyle' function to this:

//Table functions
function rowStyle(row, index) {
    return {
        classes: 'feature-row hidden'
    }

}

Note the 'hidden' tag. This make the rows hidden by default!

Edit: this doesn't work with the search, which means implementing this properly is more effort than I'm prepared to go into currently...

Upvotes: 1

Related Questions