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();
}

It might not be the only issue, but you're missing `()` on your `row.showDetails`, so it should be `row.showDetails()`. — Kirk Larkin, Sep 14 '18 at 08:11
This [question](https://stackoverflow.com/questions/51836186/get-row-element-form-row-clicked-event/51836992) might help. — Kirk Larkin, Sep 14 '18 at 09:07

score 24 · Answer 1 · answered Nov 03 '19 at 19:06

24

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.

answered Nov 03 '19 at 19:06

estani

24,254
2
93
76

1

@estani: impressed by your vue-fu (from kung-fu). this indeed works. -> @Jay: try to use the slot as following `` -> does **not(!)** work with slots using this syntax `` (at least at the moment...) – udo Apr 23 '20 at 13:30
Brilliant! Thank you! – blazerunner44 May 01 '20 at 17:42

Tomhah · Accepted Answer · 2018-09-16T11:06:56.047

16

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

edited Sep 16 '18 at 11:06

answered Sep 16 '18 at 01:03

Tomhah

386
2
7

Is there any direct way to hide all the other rows that are displaying the details? – Anand Nov 08 '18 at 14:36
2

@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. – Tomhah Nov 11 '18 at 09:42
1

It is advised in the Boostrap.Vue docs that it's better to use the toggleDetails function, instead of modifying the property directly. – Tarrakis Sep 30 '19 at 17:09
1

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." – Jay Bienvenu Jan 13 '20 at 22:35
1

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: https://bootstrap-vue.js.org/docs/components/table/#row-details-support. 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. – Tomhah Jan 14 '20 at 23:10

Bootstrap Vue table: show details when row clicked

2 Answers2

Explanation