title: How to show an empty row in BootstrapVue's b-table
body: <p>I am using a b-table from BootstrapVue. However, when the array of objects for my table is empty, i want to show the table headers + 1 empty row, without any text in the cells of the table.</p>
  <p>On <a href="https://bootstrap-vue.org/docs/components/table#table-style-options" rel="nofollow noreferrer">BoostrapVue's b-table page</a>, there is some explanation about showing something for an empty table, but i'm not following the explanation. There is also no visual of the outcome.
  When using <code>show-empty</code>, it gives a simple text 'no records ...', but i don't want the text. Or maybe i want a custom text (depending on the language when using i18n).</p>
  <p>So the html is currently:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;b-table bordered :head-variant=&quot;'light'&quot; hover :items=&quot;dogs&quot; :fields=&quot;dogHeaders&quot; &gt;
  &lt;/b-table&gt;
  </code></pre>
  <p>And in the vue data i have:</p>
  <pre class="lang-js prettyprint-override"><code>dogs: [], //because i want to mimic an empty table
  dogHeaders: ['name','color','age'],
  </code></pre>
  <p>Can someone show me an example how to do this?</p>
  <p>edit: i currently see only a workaround with populating my dogs array with an empty dog like so:</p>
  <pre class="lang-js prettyprint-override"><code>dogs: [{name:'',color:'',age:''}],
  </code></pre>
  <p>But i guess there should be a better way (+ this workaround gives a row that has less height than an actual filled row)</p>