title: Bootstrap Vue table: show details when row clicked
body: <p>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.</p>
  
  <pre><code>&lt;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" 
    &gt; 
     &lt;template slot="row-details" slot-scope="row"&gt;
      &lt;b-card&gt;
        &lt;h1&gt;hello&lt;/h1&gt;
      &lt;/b-card&gt;
    &lt;/template&gt;
   &lt;/b-table&gt;
  </code></pre>
  
  <p>Here is my function but I think it's not working at all</p>
  
  <pre><code>expandAdditionalInfo(row) {
    row.showDetails();
  }
  </code></pre>