Recently, I developed a vue.js bootstrap table to load data from local JSON files. My current challenge is implementing show/hide columns using checkboxes. While I have solved most of the issue, there's one lingering problem: when I hide a column and then try to show it again by clicking on the same checkbox, the table order gets disrupted (the column moves to the last position).
To give you an idea of my progress, here is how the app looks now: https://i.sstatic.net/Sqk62.jpg. You can also view the code on CodePen: https://codepen.io/frane_caleta/pen/KKPMKrL. However, please note that loading it without the JSON file won't work. Here's an example of the JSON data structure: https://i.sstatic.net/fgh7o.jpg.
This is my first time asking a question here, so if you require more information to help me solve this problem, please don't hesitate to ask :)
<b-form-group label="Hide columns: ">
<b-form-checkbox-group id="checkbox-group-1" v-model="selected" :options="fields" name="flavour-1">
</b-form-checkbox-group>
</b-form-group>
//my table
<b-table id="myTable"
:small="small"
:bordered="bordered"
hover head-variant="dark"
stacked="md"
:items="cptItems"
:fields="selected"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
@filtered="onFiltered"
:tbody-tr-class="rowClass"
v-if="selected.length > 0">
</b-table>
//Javascript file
function initializeVue() {
return new Vue({
el: '#app',
data() {
return {
items: data.logdatas,
selected: [],
fields: [{
text: 'Origin',
value: {
key: 'origin',
label: 'Origin',
sortable: true,
class: 'text-center',
index: 0
}
},
{
text: 'Timestamp',
value: {
key: 'timeStamp',
label: 'Timestamp',
sortable: true,
class: 'text-center',
index: 1
}
},
{
text: 'Level',
value: {
key: 'level',
label: 'Level',
sortable: true,
class: 'text-center',
index: 2
}
}, ...there are 4 more fields like this...
//my method for creating the checkboxes
created() {
this.selected = this.fields.map(field => field.value);
}