Expand all Bootstrap-Vue b-table rows

I have a b-table which looks something like this:

<b-table :fields="fields" :items="tableRows">
  <template #head(expand_all+)="data">
    //would like to make this a button to expand all row-details
    <div class="text-right">{{data.label}}</div>
  </template>
  ...
  <template #cell(expand_all+)="data">
    <div class="expand-arrow-container":class="{ 'expanded': data.detailsShowing }" @click="data.toggleDetails">
      <font-awesome-icon icon="chevron-right" />
    </div>
  </template>
  ...
  <template #row-details="row">
    //display data here
  </template>
</b-table>

Now, all of this works fine and and my row details expand/contract as I would expect (see b-table row-details for more information).

The problem arises in that I want to be able to click one button and expand/contract all the row-details. My plan is to change template #head(expand_all+)="data" into a button which can be clicked to accomplish this. However, I do not know how to do this. I have searched and read the b-table documentation and have not found any way of accomplishing what I want. I've even taken a look at the table object to see if it had any references to its rows and I didn't see anything.

Do any of you know a way to accomplish this? Getting a reference to the rows would make this a simple problem, but as I mentioned I didn't see anything. I am also not looking to swap out the b-table with a bunch of b-collapse elements since I have put a lot of work into the table.

Solution

As described on the docs, you can set a _showDetails property on your items passed to the table. Which if set to true will expand that row's details. This means you could loop through all your items and set that property to true to expand all rows. And do the same with false to collapse them.

If the record has its _showDetails property set to true, and a row-details scoped slot exists, a new row will be shown just below the item, with the rendered contents of the row-details scoped slot.

Here's two example methods you could use. We're using $set because we're adding a new property to an already existing object. You can read more about why here

expandAll() {
  for(const item of this.tableRows) {
    this.$set(item, '_showDetails', true)
  }
},
collapseAll() {
  for(const item of this.tableRows) {
    this.$set(item, '_showDetails', false)
  }
}