How to change header width in vuetify table?

Question

Vue.js

I use the vuetify table component, I need to change the header width with the mouse, something like this library ( an example of its use ), but it does not work with data-table vuetify, maybe someone has ideas or ready-made solutions?

Answer 1

with data-table vuetify it doesn't work

Yah? How did you try to make it work? Suddenly wrong? Why didn't they show it?
Add a reference to the table component instance:

<v-data-table
  ref="table"
  ...

After mounting through this link, it will be possible to reach the element table:

mounted() {
  new ColumnResizer.default(this.$refs.table.$el.querySelector('table.v-datatable'), {
    liveDrag: true,
    draggingClass: 'rangeDrag',
    gripInnerHtml: '<div class="rangeGrip"></div>',
    minWidth: 8,
  });
},

https://jsfiddle.net/q93ucah5/