I'm working on a table that populates data from a database using Bootstrap-vue. The database includes a field labeled "day" which contains string values like "mon", "tue", "wed", and so on. I need the table to sort this column by day order rather than alphabetically. Is there a way to achieve this?
My experience with Vue and Bootstrap Vue is still limited. While I've successfully set up the table to fetch data from the database and display it as objects based on defined fields, I'm struggling with sorting.
Here is a simplified code snippet illustrating the issue:
HTML:
<div id='root'>
<b-container fluid>
<h1>Welcome</h1>
<br/>
<b-table
show-empty
stacked="md"
:items="tableItems"
:fields="fields"
sort-by="day"
>
</b-table>
</b-container>
</div>
Vue:
new Vue({
el: '#root',
data() {
return {
tableItems: [
{name: 'Mark', age: '23', day:'wed'},
{name: 'John', age: '21', day:'thu'},
{name: 'Stephen', age: '24', day:'tue'},
{name: 'Will', age: '31', day:'fri'},
{name: 'Andrew', age: '27', day:'wed'},
{name: 'James', age: '24', day:'mon'},
{name: 'Shawn', age: '29', day:'tue'},
],
fields: [
{ key: 'name', label: 'Name', sortable: true},
{ key: 'age', label: 'Age', sortable: true, class: 'text-center' },
{ key: 'day', label: 'Day', sortable: true},
],
}
}
});
At present, the code organizes the data in the day column alphabetically. However, my goal is to have it sorted by days of the week (e.g., "mon", "tue", "wed", etc).