Reputation: 1292
I am working on the VueJs template and I need to create a data table with rearranging columns. I get the Codepen with rearranging columns but when I added select boxes with this it creates issues and the table is invisible at some point when rearranging columns again agian. I added this method to sort the headers I think it creates conflicts
sortTheHeadersAndUpdateTheKey(evt) {
const headersTmp = this.headers;
const oldIndex = evt.oldIndex;
const newIndex = evt.newIndex;
if (newIndex >= headersTmp.length) {
let k = newIndex - headersTmp.length + 1;
while (k--) {
headersTmp.push(undefined);
}
}
headersTmp.splice(newIndex, 0, headersTmp.splice(oldIndex, 1)[0]);
this.table = headersTmp;
this.anIncreasingNumber += 1;
}
I created the New Codepen with select boxes. so how can I solve this issue?
Upvotes: 1
Views: 1199
Reputation: 5260
As per the above code, the table is invisible at some point due to evt value doesn't have old and new index, Instead it has old and new position
Need to refactor the existing function by decrementing the position values to get the index, so we don't need while loop to add a new index
sortTheHeadersAndUpdateTheKey(evt) {
const headersTmp = this.headers;
const oldIndex = evt.oldIndex - 1;
const newIndex = evt.newIndex - 1;
headersTmp.splice(newIndex, 0, headersTmp.splice(oldIndex, 1)[0]);
this.table = headersTmp;
this.anIncreasingNumber += 1;
},
Working codepen here: https://codepen.io/chansv/pen/MWWvPOw?editors=1010
Upvotes: 1