Special Field

At the moment, vuetable only has one special field. It might have something more in the future, but special field will always begins with double underscore __.

__actions

If you name one of your field as __actions, vuetable will automatically use the information provided via item-actions property to generate array of buttons inside this table column.

And when the user click on any of these buttons, a vuetable:action event will be dispatched with the name of the action as the event argument along with the data row currently in process.

You can capture this event in the parent Vue.js instance, and inspect the argument value to take any appropriate action based on that value.

  new Vue({
    el: '#app',
        data: {
          itemActions: [
               { 
                  name: 'view-item', 
                  label: '', 
                  icon: 'glyphicon glyphicon-zoom-in', 
                  class: 'btn btn-info', 
                  extra: {'title': "View"} 
               },
               { 
                  name: 'edit-item', 
                  label: '', 
                  icon: 'glyphicon glyphicon-pencil', 
                  class: 'btn btn-warning', 
                  extra: {title: 'Edit'} 
               },
               { 
                  name: 'delete-item', 
                  label: '', 
                  icon: 'glyphicon glyphicon-remove', 
                  class: 'btn btn-danger', 
                  extra: {title: 'Delete', disabled: 'disabled'} 
               }
            ],
        },
    methods: {
      viewProfile: function(email) {
        console.log('do something with email: ', email)
      }
    },
        events: {
            'vuetable:action': function(action, data) {
                console.log('vuetable:action', action, data)
                if (action == 'view-item') {
                    this.viewProfile(data.email)
                }
            },
    }
  })

Action Item Options

• name String
  Name of this action. Will be the first argument of vuetable:action event
• label - String
  Label to be display on this button
• icon - String
  Icon class to be used for this button
• class - String
  Class(es) to be applied to this button
• extra - Object
  Extra attribute(s) for this button. See above example.

__sequence

This special field will display the record sequence number using information from pagination data structure.

__checkbox:<column_name>

This special field will display checkbox in the table header and for each data item.

You will need to specify the column name in the data structure that would uniquely identified each row (usualy id column). vuetable will use this unique id to track the selected items in the table.

If the <column_name> is not specified, a warning message will be dumped in the console.

If you use v-ref to reference your vuetable, you can then access the array of selected item ids from within main Vue instance like so,

      this.$refs.vuetable.selectedTo

Or, you can access it directly if you bind it via selected-to prop.

      <vuetable 
          <!-- ... -->
          :selected-to="selectedRow"
      ></vuetable>

  new Vue({
      el: '#app',
        data: {
          selectedRow: []   // must be defined as an array
        }
        columns: {
          '__checkbox:id'  // display checkbox in each row and associate with <id> field
          '__sequence',    // display record sequence number from pagination
        }
    })