Expand/Collapse All Actions in a bootstrap Vue.js table

Question

I made a Vue.js bootstrap table for loading some data from local JSON files. I've implemented an option for Show/Hide details of specific row (shows full data message of a specific row). I'm trying to implement a checkbox or a button where I can expand/collapse (Show/Hide) details of all rows. I've tried some things, but it just doesn't seem to work. I don't have many experiences with Vue. https://i.sstatic.net/Sqk62.jpg --> this is how the app looks right now https://codepen.io/frane_caleta/pen/KKPMKrL --> codepen of my code, you won't be able to load it without JSON file though https://i.sstatic.net/fgh7o.jpg --> JSON data example

Feel free to ask if you need any more details about this app / project!

Part of my code where I'm showing/hiding details of specific row:

 <b-table 
    id="myTable" 
    class="text-center" 
    :small="small" 
    :bordered="bordered" hover head-variant="dark" 
    v-if="activeFields.length > 0" 
    stacked="md"
    :items="cptItems" :fields="activeFields" :current-page="currentPage" :per-page="perPage"
    :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" @filtered="onFiltered"
    :tbody-tr-class="rowClass"
    >    
    <template slot="actions" slot-scope="row">
        <b-button size="sm" @click="row.toggleDetails">
            {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        </b-button>
    </template>
    <template slot="row-details" slot-scope="row">
        <b-card>
            <b-card-text id="msg" class="text-break text-left" v-html="row.item.message"></b-card-text>
        </b-card>
    </template>
</b-table>

Here's an example of how you can implement it: codepen.io/Hiws/pen/dEqvEL — Hiws
– Hiws, Commented Aug 20, 2019 at 12:49
This actually works perfectly! Thank you very much. Post this as an answer so I can accept it — Frane Caleta
– Frane Caleta, Commented Aug 20, 2019 at 13:54

Hiws · Accepted Answer · 2019-08-20 14:12:42Z

2

You can simply create a method which runs over each item in the table collection and set _showDetails to either true for open and false for closed.

In the codepen i also created a computed property which checks if any of the elements in the collection is open and returns true if so. That way i can create a single button to toggle all rows.

https://codepen.io/Hiws/pen/dEqvEL

answered Aug 20, 2019 at 14:12

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Expand/Collapse All Actions in a bootstrap Vue.js table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related