I am currently using a bootstrap-vue table with the following structure;
https://i.sstatic.net/5sv6R.png
Below is the code snippet for reference;
<template>
<div>
<b-table hover :items="items"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{
age: 89,
first_name: 'Geneva',
last_name: 'Wilson',
_rowVariant: 'danger'
},
{
age: 40,
first_name: 'Thor',
last_name: 'MacDonald',
_cellVariants: { age: 'info', first_name: 'warning' }
},
{ age: 29, first_name: 'Dick', last_name: 'Dunlap' }
]
}
}
}
</script>
If dealing with a large number of rows in the table, there might be a need to pin the top header row in place. This will ensure that as you scroll through the content, the header row containing column names remains visible at the top, enhancing readability.
The table formatting provided here was sourced from the official bootstrap-vue documentation.
My current setup involves Vue v2.6 paired with BootstrapVue libraries.