CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Varinder Sohal
Varinder Sohal

Reputation: 1292

How to create vuetify datatable with rearranging columns?

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

Answers (1)

chans
chans

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

Related Questions