Vuetify: [Feature Request] Drag and Reorder v-data-table headers

[ahummel25]

Problem to solve

Is there any existing way to drag and reorder the data table columns along with their respective items? In looking at #2234, this functionality is great but I can't figure out a way to do this at the headers.

Proposed solution

Very similar to #2234, but with the table's headers and respective items.

Trying to get something started here...

https://codepen.io/anon/pen/yjgyqY?editors=1111

[KaelWD]

This might be possible with additional libraries, but isn't something we want to implement. Feel free to open a PR on the vuetifyjs.com repo if you come up with an example.

[wunderdojo]

I was looking to do the same thing today. Worked out how to get it going with sortablejs and a custom directive. In case it helps anyone else I added a Codepen here: https://codepen.io/wunderdojo/pen/XyZBmP

[ahummel25]

Looks pretty good!

[kerry-perret]

Anything new?

[wunderdojo]

It's tagged as won't fix so I'm guessing you'll need to do something like what I did. It's been working fine in production for me.

[kerry-perret]

Well, considering the number of things that needs to be implemented to achieve what we want we are considering to move to the tabulator component.

[frontsujdev]

This is a good working

[hercip]

If anyone need a [email protected] version based on @wunderdojo work here is one:
https://codepen.io/hercip/pen/XWXWgja
line 10: <template v-slot:header="{ props: { headers } }"> is "the big change" here