CODEWITHSUNDEEP
vue.jsbootstrap-vue
rufus05
rufus05

Reputation: 43

Footer in b-table is not displayed - Bootstrap-vue

I'm using the "bootstrap-vue" version: "2.0.0-rc.11", and I don't know why the footer in the table doesn't work. I tried the documentation examples, but it didn't work for me.

My Code:

<!-- TEST 1 -->
<b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0">
    <template v-slot:custom-foot>
        <tr>
            <td class="bg-dark text-white">
                TEST 1
            </td>
        </tr>
    </template>
</b-table>

<!-- TEST 2 -->
<b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0">
    <template v-slot:cell(name)="data">
        TEST 2
    </template>
</b-table>

data() {
    return {
    fields: [
        { key: 'name', label: 'Full Name' },
        { key: 'age', label: 'Age' },
        { key: 'sex', label: 'Sex' }
    ],
    items: [
        { name: 'John', sex: 'Male', age: 42 },
        { name: 'Jane', sex: 'Female', age: 36 },
        { name: 'Rubin', sex: 'Male', age: 73 },
        { name: 'Shirley', sex: 'Female', age: 62 }
    ]
    }
}

It simply does not display the footer.

Upvotes: 0

Views: 1258

Answers (1)

Hiws
Hiws

Reputation: 10334

The issues you're facing is with the version you're using.

The custom-foot slot was introduces in the 2.0.0 release, and isn't available in the rc version.

The same goes for your TEST 2 example. The slot syntax you're using here was introduced in 2.0.0.

Prior to that it was [field], HEAD[field] and FOOT[field] in the version 2.0.0-rc.28. (and ONLY this version).

In version 2.0.0-rc.27 and below it's field, HEAD_field, FOOT_field.

I would suggest you look to upgrade your version, to get the latest features and fixes, as the one you're currently on is quite old.

The only major patch in between the newest and the one you're using was the 2.0.0 release which introduced some breaking changes.

There's a migration guide you can use to avoid too many issues.

If you don't want/can't upgrade. You can instead clone down the git repository and generate the docs locally on your machine for the version you're using. This way the information on the docs will match your version to avoid confusion.

You can even upload it to your own host if you need it to accessible online.

Upvotes: 3

Related Questions