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 !

Are you getting any JS errors? Also, that syntax isn't familiar to me but could you try <template v-slot:cell(edit)="data"> — Hannah
– Hannah, Commented Oct 30, 2020 at 10:15
Same problem with any error in console with your code <template v-slot:cell(edit)="data"> — Tony S
– Tony S, Commented Oct 30, 2020 at 10:24

Hiws · Accepted Answer · 2020-10-30 16:46:17Z

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.

answered Oct 30, 2020 at 16:46

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap-Vue how to create a custom column?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related