Special Field

At the moment, vuetable only has a few 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
        ]
    })

__component:<name> (v1.4.0)

If the available special fields still do not fit to your need, you can make your own component and use it as the target table cell.

<name> is the name of the component to be used. Please see example below:

  var tableColumns = [
    // you can define it as string
    '__component:custom-action',

    // or, you can define it as an object for more options
    {
      name: '__component:custom-action'
      title: 'Actions'
    },

    // .. and you can define as many as you want!
  ]

  Vue.component('custom-action', {
    template: [
      '<div>',
        '<button class="ui red button" @click="itemAction(\'view-item\', rowData)"><i class="zoom icon"></i></button>',
        '<button class="ui blue button" @click="itemAction(\'edit-item\', rowData)"><i class="edit icon"></i></button>',
        '<button class="ui green button" @click="itemAction(\'delete-item\', rowData)"><i class="delete icon"></i></button>',
      '</div>'
    ].join(''),
    //
    // vuetable will inject the row data via `row-data` prop
    props: {
      rowData: {
        type: Object,
        required: true
      }
    },
    methods: {
      itemAction: function(action, data) {
        console.log('custom-action: ' + action, data.name)
      }
    }
  })

As you can see from the example above, there is no limit on what you can do here. You can see sample code in examples directory.

(v1.5.0) You can now specify sortField for __component special field. Thanks to @pauk-slon. See #80 for more info.

Example use cases:

• Selectively display text based on the value of a specific column
• Selectively enable/disable button(s) based on value of column