The component extends the vuetable2, placing a dropdown menu that allows the user to show and hide the grid columns.

Requirements

• Vue.js ^2.0.0

Installation

$ npm install vuetable2-column-visibility --save

Usage

First we need to import and register the vue-events plugin somewhere in our project. We can do it in every file we use vuetable2 or simply in out App.vue:

import Vue from 'vue'
import VueEvents from 'vue-events'
Vue.use(VueEvents)

Once registered vue-events, we can access the $events prototype object in our Vue instance. This object is a centralized event hub that we can use throughout the Vue instance and it provides event related functions.

Now, we must import and register vuetable2-column-visibility:

<script>
import vuetable from 'vuetable-2/src/components/Vuetable'
import columnVisibility from 'vuetable2-column-visibility'

export default {
  name: "data-table",
  components: { vuetable, columnVisibility },
  methods: {
      onColumnVisibilityChanged () {
          this.$refs.vuetable.normalizeFields()
      },  
  },
  mounted() {
    this.$events.$on('column-visibility:changed', e => this.onColumnVisibilityChanged(e))
  },
}
</script>

Notice that we told to the component to listen to the column-visibility:changed event, and then execute onColumnVisibilityChanged. This is necessary in order to the vuetable2 re-render the columns that were shown or hidden.

Now we can use the component in our HTML:

<column-visibility :fields.sync="fields"></column-visibility>
<vuetable ref="vuetable"
    api-url="http://localhost:8000/path"
    :fields="fields">
</vuetable>

Where the fields variable stores the grid fields, for example:

fields: [
      {
        name: 'first_name',
        title: 'First name'
      },
      {
        name: 'last_name',
        title: 'Last name'
      },
      {
        name: '__slot:id',
        title: 'Actions',
        showOnVisibilityMenu: false
      },
],

We can define a showOnVisibilityMenu property in the column object to control whether the column will appear in the visibility menu or not. By default, showOnVisibilityMenu is set to true. In this case, the first_name and last_name columns will appear on the menu, while __slot:id wont.

License

The MIT License