how do hidden or delete the header field in bootstrap-vue b-table?

Question

for some reason, I don't want to show the fields of b-table in my web. In other words, I don't want to show the table head fields.

But I never find how to hidden or delete the fields(such as Information field name) in bootstrap-vue.

Please help me.

And I have another question, why can I get the value of items by cell(information)="row".

here is my test code, you can run it on playground.

Thank you in advance for you help.

<template>
  <div>
    <b-table
      striped
      hover
      :items="items"
    >
      <template v-slot:cell(information)="row">
        <p>{{row.item.information.test1}}</p>
        <p>{{row.item.information.test2}}</p>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { information: { test1: 1, test2: 1 } },
        { information: { test1: 3, test2: 3 } },
        { information: { test1: 2, test2: 2 } },
        { information: { test1: 4, test2: 4 } }
      ]
    };
  }
};
</script>

Answer 1

If you want to completely hide the thead of the table, you can add thead-tr-class="d-none" to your b-table. This will completely hide the thead.

thead-tr-class can be found under the property reference of b-table on the Bootstrap-Vue documentation.

d-none is a bootstrap utility class which can be found display utilities, on the Bootstrap documentation.