Recently, I came across a bootstrap-vue table that caught my attention:
https://i.sstatic.net/5jENs.png
Below is the code snippet for the table setup:
<template>
<div class="container">
<h1 class="pt-2 pb-3">Bootstrap Table</h1>
<b-table striped hover :items="items" :fields="fields" primary-key></b-table>
</div>
</template>
<script>
export default {
data() {
return {
"fields": [
{
"key": "first_name",
"label": "My First Name",
"sortable": true,
},
{
"key": "last_name",
"label": "My Last Name",
"sortable": true,
},
{
"key": "age",
"label": "Age",
"sortable": true,
"sortByFormatted": false,
},
],
"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" },
{ "age": 38, "first_name": "Jami", "last_name": "Carney" }
]
};
}
};
</script>
One thing that's bothering me is the presence of the (Click to sort Ascending) text in each column header.
I find it strange as this text isn't mentioned anywhere in the code itself.
This issue has left me puzzled especially since I am using vue v2.6 for this project.