How to create vuetify datatable with rearranging columns?

Question

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?

chans chans · Accepted Answer · 2019-10-29T09:11:52

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

How to create vuetify datatable with rearranging columns?

1 Answers