How to set a checkbox as a first field of a Bootstrap Vue Table

4
votes

(Sorry for my bad english)

I am very new using Vue and Bootstrap Vue.

I am building a table with the data of an API. The fields of the first row are built from the keys of the array received from the API. Like this: https://i.stack.imgur.com/abq1Q.png

I want to add a checkbox in the first column, instead the field "index", but really I don't know how. I want this: https://i.stack.imgur.com/mpna8.png

This is my code:

template: /*html*/`
    <div class="mx-auto commodity card">
            <div class="commodity__div-buttons">
                <div class="commodity__buttons">
                    <b-button variant="success">Add row</b-button> 
                    <b-button variant="danger">Delete</b-button> 
                </div>
                <div class="commodity__generate">
                    <b-button variant="primary" @click="getSessionStorageData">Generate</b-button> 
                </div>
            </div>

        <b-table striped hover responsive :fields="fields" :items="commodity_data">
            <template #cell(index)="data">
                <input type="checkbox">
            </template>
        </b-table>
    </div>
    `,
    data() {
        return {
            commodity_data: [],
            fields: [
                'index',
                {
                    key: 'hu_count',
                    label: 'Hu Count'
                },
                {
                    key: 'dimensions',
                    label: 'Dimensions'
                },
                {
                    key: 'weight',
                    label: 'Weight'
                }
            ]
        }
    }

Thanks a lot for the help.

1
javascripthtmlvue.jsvuejs2bootstrap-vue

1 Answers

1
votes

You can use the head slot with the field name, in your case "index":

<template #head(index)="slotData">
   <b-form-checkbox></b-form-checkbox>
</template>

The format is just like the cell slot templates but with head.