Bootstrap-Vue how to create a custom column?

Question

here my code :

      <b-table
          hover
          :items="usergroupTable.datas"
          :fields="usergroupTable.fields"
          :sort-by.sync="sortBy"
          :sort-desc.sync="sortDesc"
          responsive="sm"
      >
        <template #cell(edit)="data">
          <b-button @click="editItem(data.id)">Delete</b-button>
          <b-button @click="editItem(data.id)">Edit</b-button>
        </template>
      </b-table>

Here my datas :

data() {
    return {
      usergroupTable: {
        filter: null,
        fields: [
          'edit',
          { key: 'usergroupname', label:'User Group Name' , sortable: true},
          { key: 'product', label:'Product' , sortable: true},
          { key: 'seatslimits', label:'Seats Limit' , sortable: true},
          { key: 'expirationdate', label:'Expiration Date' , sortable: true},
          { key: 'lastpayment', label:'Last Payment' , sortable: true},
          { key: 'nextpayment', label:'Next Payment' , sortable: true},
        ],
        datas: [
          { id: 5 ,usergroupname: 'IUT Bordeaux', product: 'Light', seatslimits: '20', expirationdate: '2021/08/01', lastpayment: '', nextpayment: '' },
          { id: 8, usergroupname: 'Admins', product: 'God', seatslimits: '', expirationdate: '', lastpayment: '', nextpayment: '' }
        ],
      }
    }
  },

I try to have add and editing button each row, but now Edit column is empty, i don't see my buttons.

Anyone have an idea of the problem ? Thanks !

Answer 1

As mentioned in the comments, you're using version 2.0.0-rc.28 which has a different naming syntax for <b-table> slots.

The syntax you're using is only available in the 2.0.0 release and above, so if you want to use that you need to update.

If you can't upgrade and need to stay on your current version. The syntax is v-slot:['[field_key]'] for cells, v-slot:['HEAD[field_key]'] for head cells, and v-slot:['FOOT[field_key]'] for footer cells.

The reason you have to wrap it in brackets, is because that's the syntax for dynamic when using v-slot , and therefore the naming [field_key] isn't directly useable. Which is also why this naming syntax only exists in 2.0.0-rc.28 . It's different in prior versions, and later versions.