How to show an empty row in BootstrapVue's b-table - vue.js

Question

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.
On BoostrapVue's b-table page, 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 show-empty, 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).
So the html is currently:
<b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" >
</b-table>
And in the vue data i have:
dogs: [], //because i want to mimic an empty table
dogHeaders: ['name','color','age'],
Can someone show me an example how to do this?
edit: i currently see only a workaround with populating my dogs array with an empty dog like so:
dogs: [{name:'',color:'',age:''}],
But i guess there should be a better way (+ this workaround gives a row that has less height than an actual filled row)

Answer 1

You could use b-table with show-empty attribute and slots. I prepared a code snippet to show this:
new Vue({
el: '#app',
data: {
dogs: [],
dogHeaders: ['name', 'color', 'age'],
}
})
<link href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" show-empty>
<template #empty="scope">
Empty row
</template>
</b-table>
</div>

Answer 2

I think the example is right there in the docs. They provide slots for exactly this use case, where you can put anything you want:
<b-table bordered :head-variant="'light'" hover :items="dogs" :fields="dogHeaders" show-empty>
<template #empty="scope">
Whatever HTML you put here will be shown when the table is empty
</template>
</b-table>

Answer 3

Since you want to render actual cells, you can use the top-row slot instead of the standard empty slot.
You can then conditionally render the slot using a v-if, based on whether the dogs array is empty or not.
Then render empty cells (<td>) inside the slot for each element in your dogHeaders array.
new Vue({
el: '#app',
data() {
return {
dogs: [],
dogHeaders: ['name', 'color', 'age']
}
},
methods: {
addRow() {
this.dogs.push({
name: 'Pence',
color: 'Black',
age: 53
})
}
}
})
<link href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app" class="p-3">
<b-btn #click="dogs = []">Reset Table</b-btn>
<b-btn #click="addRow">Add row</b-btn>
<hr />
<b-table bordered head-variant="light" hover :items="dogs" :fields="dogHeaders">
<template #top-row v-if="dogs.length === 0">
<!-- Adding to the cell so that it maintains the standard cell height -->
<td v-for="i in dogHeaders.length"> </td>
</template>
</b-table>
</div>