Bootstrap Vue table: show details when row clicked

21
votes

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();
}
2
javascriptvue.jsbootstrap-vue
It might not be the only issue, but you're missing () on your row.showDetails, so it should be row.showDetails(). – serpent5
jesus christ. right. still showDetails is not a function – anton zlydenko
This question might help. – serpent5
please provide the structure of deals array or object – Boussadjra Brahim

2 Answers

14
votes

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

20
votes

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.