title: bootstrap-vue toggle expand table row
body: <p>This seems to remain unanswered so here is another attempt at a solution.</p>
  
  <p>Currently in bootstrap-vue, I am rendering a <code>b-table</code>. I would like to improve this by having the ability to select a row and collapse/expand an extra div/row/etc to show further information.</p>
  
  <p>In the below snippet you will see what I am trying. The problem is that I can't seem to get the expanded data to span the number of columns in the table. I have tried adding <code>&lt;tr&gt;&lt;td colspan="6"&gt;&lt;/td&gt;&lt;/tr&gt;</code> but it doesn't seem to span like I would expect. Any workarounds for this? Thanks.</p>
  
  <pre><code>&lt;b-table
      :items="case.cases"
      :fields="tableFields"
      head-variant="dark"&gt;
      &lt;template
          slot="meta.status"
          slot-scope="data"&gt;
      &lt;b-badge
          v-b-toggle.collapse1
          :variant="foobar"
          tag="h6"&gt;
          {{ data.value }}
      &lt;/b-badge&gt;
      &lt;/template&gt;
      &lt;template
          slot="@id"
          slot-scope="data"&gt;
          &lt;span
              v-b-toggle.collapse1&gt;
              {{ data.value }}
          &lt;/span&gt;
          &lt;b-collapse id="collapse1"&gt;
              Collapse contents Here
          &lt;/b-collapse&gt;
      &lt;/template&gt;
  &lt;/b-table&gt;`
  </code></pre>