Injecting component to have multiple button in one column for different action

titkalpesh commented 3 years ago

https://jamesdordoy.github.io/laravel-vue-datatable/examples/injecting-dynamic-components

As shown in this example there is one component. is it possible to inject multiple component in one column or can have multiple active like view, edit, delete button in last common in one component and all have different methods?

jamesdordoy commented 3 years ago

Hi @kalpeshtreesha,

So this isnt possible atm without some hacky code but i am open to PR's to add this functionality. Ive been trying to find a clean implementation for this for a while but its never really been good enough.

Honestly i usually just include a view button and then link to another page for update/ delete etc but i do see the use case.

titkalpesh commented 3 years ago

@jamesdordoy Thanks for quick update. Appreciated..!!

Pumayk26 commented 3 years ago

hi @kalpeshtreesha ... I had the same problem.. I found a solution but not the best one... here is the trick... in your columns array, define your action button column like this, { label: 'Action Buttons', name: JSON.stringify({ buttons: [ { name: 'Edit', iconClass: "" }, { name: 'Delete', iconClass: "" }, ], }), orderable: false, classes: { btn: true, "btn-primary": true, "btn-sm": true, "ml-2": true, }, event: "click", component: ActionButtonsComponent, handler: this.actionHandler, },

in your ActionButtonComponent html,

https://ibb.co/VQhhrBS

In your click handler,

actionHandler(data, action) { if (action === 'Edit') this.editData(data); else if (action === 'Delete') this.deleteData(data); }

Note : This will stop sortable behavior of the column, I think the table uses the name property to sort column data

jamesdordoy / laravel-vue-datatable

Injecting component to have multiple button in one column for different action #116