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?
Add a comment
|
4 Answers
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>
2 Comments
podcastfan88
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.
caniaskyouaquestion
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
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>
1 Comment
Yasin Okumuş
That is much simpler
In your fields object add thStyle each column.
fields: [{
key: 'key_here',
label: 'Column Name',
thStyle: {
display: 'none'
}
]
Comments
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.
1 Comment
It-Z
Thanks! yet I was looking for a more "vueish" solution