CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-vue
StevenV
StevenV

Reputation: 113

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

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)

Upvotes: 1

Views: 9155

Answers (4)

Berkay Nayman
Berkay Nayman

Reputation: 258

"bootstrap-vue": "2.21.1"

"vue": "2.x"

    const formatter = (value) => value ? value : '---'
    const tableColumns = [
        { key: 'name', formatter: value => formatter(value) },
        { key: 'color', formatter: value => formatter(value) },
        { key: 'age', formatter: value => formatter(value) },
        { key: 'sex', formatter: value => formatter(value) }
    ]

Upvotes: 0

Brother Woodrow
Brother Woodrow

Reputation: 6372

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>

Upvotes: 2

Hiws
Hiws

Reputation: 10324

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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 &nbsp; to the cell so that it maintains the standard cell height -->
      <td v-for="i in dogHeaders.length">&nbsp;</td>
    </template>
  </b-table>
</div>

Upvotes: 1

Iman Shafiei
Iman Shafiei

Reputation: 1617

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/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

Upvotes: 3

Related Questions