Как изменять ширину заголовков в таблице vuetify?

Question

[NikClik]

Использую компонент таблицы vuetify, необходимо мышкой менять ширину заголовка, что-то типа вот этой библиотеки (пример ее использования), но с data-table vuetify она не работает, может у кого-то есть идеи или готовые решения?

Answer 1

[0xD34F]

с data-table vuetify она не работает

Да ну? А как вы пытались заставить её работать? Вдруг неправильно? Почему не показали?

Добавляем ссылку на экземпляр компонента таблицы:

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

После монтирования через эту ссылку можно будет достучаться до элемента 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/

Comments

[NikClik]

Извини, я долбаеб, спасибо за помощь