Bootstrap Vue table: show details when row clicked

Question

Trying to achieve different from documentation experience: showing row details not by clicking on the button, but when row clicked. And documentation is a lack of details on how to make it different as in examples.

<b-table
    v-if="tableIsReady"
    :items="deals"
    :fields="fields" 
    :per-page="recordsPerPage"
    no-local-sorting 
    @sort-changed="sorting" 
    responsive 
    flex 
    striped 
    hover
    @row-clicked="expandAdditionalInfo" 
  > 
   <template slot="row-details" slot-scope="row">
    <b-card>
      <h1>hello</h1>
    </b-card>
  </template>
 </b-table>

Here is my function but I think it's not working at all

expandAdditionalInfo(row) {
  row.showDetails();
}

Solution 1

As mentioned on the row details support section of the Bootstrap Vue table documentation, you can change the _showDetails property of the row item:

If the record has it's _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.

In your case, you would want something like:

expandAdditionalInfo(row) {
  row._showDetails = !row._showDetails;
},

As demonstrated in this codepen

Solution 2

Hard to find... but just add this:

@row-clicked="item=>$set(item, '_showDetails', !item._showDetails)"

Explanation

The $set preserves the reactivity even if _showDetails didn't exist.

It's a pitty that the row object is not accessible, so toggleDetails is not an option here.

Comments

[Anand]

Is there any direct way to hide all the other rows that are displaying the details?

[Tomhah]

@Anand Best option I can think of is iterating over all rows, comparing each row to the row you wish to show (such as with a unique ID), and setting _showDetails to true for your desired row, and false for all the others. I don't know of any built in functionality which would handle this for you.

[Tarrakis]

It is advised in the Boostrap.Vue docs that it's better to use the toggleDetails function, instead of modifying the property directly.

[Jay Bienvenu]

Is this for a particular version of BV? It isn't working for me in v2.2. row._showDetails = !row._showDetails does nothing and row.toggleDetails() throws "not a function."

[Tomhah]

Does the _showDetails property already exist in your item's data before you try to toggle it? The documentation mentions that the property must already exist prior to you trying to toggle it due to limitations with Vue's reactivity: bootstrap-vue.js.org/docs/components/table/#row-details-supp‌​ort. This answer was written for an earlier release candidate of BV, however the codepen I linked is running the latest version and is still working.

[udo]

@estani: impressed by your vue-fu (from kung-fu). this indeed works. -> @Jay: try to use the slot as following <template slot="row-details" slot-scope="row">id: {{ row.id }}</template> -> does not(!) work with slots using this syntax <template v-slot:row-details="row">id: {{ row.id }}</template> (at least at the moment...)

[blazerunner44]

Brilliant! Thank you!