how to hide bootstrap-vue table header row
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>
In your fields object add thStyle each column.
fields: [{
key: 'key_here',
label: 'Column Name',
thStyle: {
display: 'none'
}
]
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>