17

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?

It-Z
  • 1,761
  • 1
  • 17
  • 31

4 Answers4

24

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 is 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>
Mahmoud Fayez
  • 3,278
  • 2
  • 17
  • 33
It-Z
  • 1,761
  • 1
  • 17
  • 31
  • 14
    May I add that instead of using a custom class `.hidden_header`, you could more easily use the Bootstrap default `d-none`, which will hide it. – podcastfan88 Sep 24 '18 at 17:52
  • thx the scoped hint helped me a lot. now i would like to ask why that is that scoped prevents it? if none other parent component is setting some attribute, and it is only handled in that component why doesn't the scoped work? thanks – caniaskyouaquestion Jan 17 '19 at 12:35
7

you could simply use "bootstrap magic" and add thead-class="d-none" to hide the header row:

<template>
  <b-table :items="items" thead-class="d-none" />
</template>
udo
  • 3,632
  • 4
  • 43
  • 62
4

In your fields object add thStyle each column.

fields: [{
  key: 'key_here',
  label: 'Column Name',
  thStyle: {
     display: 'none'
  }
]
JuanBruno
  • 41
  • 2
0

Doesn't look like there is anything in docs to hide the row completely, but you can use CSS to hide it:

table > thead {
    display:none !important;
}

The !important flag is to override the default settings.

aprouja1
  • 1,617
  • 5
  • 15