how to hide bootstrap-vue table header row

Question

bootstrap-vue will by default create a header row for my data. Is there any way to hide the header row for a <b-table> so only data items will be rendered?

Answer 1

From the documentation here, there is an option to set the class for the header (i.e the generated <thead>) with thead-class set to the <b-table> element, or to the header row (i.e the <tr> element under the <thead>) with thead-tr-class set to the <b-table>. Only note that if the <style> is scoped this will not work. Here is a simple component based on this idea.

<template>
  <b-table :items="items" thead-class="hidden_header"/>
</template>

<script>

export default {
  name: 'my-table',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<!-- If we add "scoped" attribute to limit CSS to this component only 
     the hide of the header will not work! -->
<style scoped>
    <!-- put scoped CSS here -->
</style>
<style>
.hidden_header {
  display: none;
}
</style>