While passing a component in columns array, how can I pass property or custom event with that?

[Ashraf514]

I have a component for "Action Buttons" and I want to pass a custom event and a extra property for conditionally show action button such as "add", "edit", "view" and "delete". Please suggest me what to do here?

[uwla]

Hello, thanks for the answer.

There are two easy ways to accomplish what you want:

1. Use Vuex: use commit or dispatch to trigger mutations or actions in your vuex store that will, for example, show a modal dialog form or redirect to some other page.
2. Use EventBus architecture: use the Event Bus (also known by other names) software architecture. Basically, you have some sort of object (can be a static class too) called EventBus that stores a keymap event_name => handler[]. Then, when some event happens (button click, for example), you call a function emit which pass the event name and a payload to EventBus, which will then execute all handlers (a handler is basically a callback) stored in the handlers array.

Here is a quick draft, pseudocode, to illustrate EventBus (i suggested it because i love it):

const EventBus = {
  events: {}, // our map

  // subscribe to an event
  // passing a callback that will be executed when the event is triggered
  subscribe(eventName, callback) {
    if (this.events[eventName]) this.events[eventName].push(callback)
    else this.events[eventName] = [callback]
  },

  // trigger handlers
  emit(eventName, payload) {
    let handlers = this.events[eventName]
    if (handlers) handlers.forEach(f => f(payload))
  }
}

Then, in your custom component, you could do:

import EventBus from './EventBus.js'
///
export default {
  methods: {
    // when user click the edit button, this get triggered
    edit() {
       let model = this.data
       EventBus.emit('editModel', model)
    }
  },
  props: {
    data: Object
  }
}

then, in some other component:

mounted() {
  EventBus.subscribe('editModel', model => {
     // some example code
     this.model = model
     this.showForm = true
  })
}

A last notice, the actionButtons property, as shown in demo01 and demo2, is no longer supported. Instead, you should pass a component to the desirable column. If you want to use actionButtons, you would have to use an older version of this plugin, and also see the past versions of the README (Later, I'm going to create a website for this plugin and separate the documentation by version)

I hope this was helpful

[uwla]

I believe what you want is now provided in the latest release, which has added the option for the custom component to emit events that will be propagated upwards, and you can then access these events outside of vue-data-table. Please, take a look at the README in the "Custom component" section ;)