@spacebnd/vuetify-data-table-resizable-columns NPM

vuetify-data-table-resizable-columns

Resizable columns Vue directive for Vuetify v-data-table

Online Demo

Install

npm install @spacebnd/vuetify-data-table-resizable-columns

Registration

// main.js

import vuetify from '@/plugins/vuetify'
import ResizableColumns from '@spacebnd/vuetify-data-table-resizable-columns'

Vue.use(ResizableColumns)

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount('#app')

Usage

<template>
  <v-data-table 
    v-resizable-columns 
    :headers="headersArr" 
    :items="itemsArr"
  >
  </v-data-table>
</template>

Options

Expects: string
Available values: 'debug' 'redraw'

Examples

# debug

<template>
  <v-data-table 
    v-resizable-columns="option" 
    :headers="headersArr" 
    :items="itemsArr"
  >
  </v-data-table>
</template>

<script>
export default {
  data () {
    return {
      option: 'debug'
    }
  }
}
// debug messages will be shown to the console
</script>

# redraw

<template>
  <v-data-table 
    v-resizable-columns="option" 
    :headers="headersArr" 
    :items="itemsArr"
  >
  </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        option: null
      }
    },
    watch: {
      someProperty: function (val) {
        if (val > someConditionRequiringRedrawing) {
          this.$nextTick(() => {
            this.option = 'redraw'
          })
          // after redrawing, the 'option' property will be automatically assigned 'null', 
          // which makes it possible to use it an unlimited number of times
        }
      },
    }
  }
</script>