title: How to create vuetify datatable with rearranging columns?
body: <p>I am working on the VueJs template and I need to create a data table with rearranging columns. I get the <a href="https://codepen.io/demoapp456/pen/JjjywWP" rel="nofollow noreferrer">Codepen</a> 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 </p>
  
  <pre><code>sortTheHeadersAndUpdateTheKey(evt) {
     const headersTmp = this.headers;
     const oldIndex = evt.oldIndex;
     const newIndex = evt.newIndex;
     if (newIndex &gt;= 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;
  }
  </code></pre>
  
  <p>I created the <a href="https://codepen.io/demoapp456/pen/jOOLvZp" rel="nofollow noreferrer">New Codepen</a> with select boxes. so how can I solve this issue?</p>