Server-side button enable/disable on DataTable creation

[pututbawono]

Hi, So I've used your table and it's working perfectly. The only thing bugging me right now is action button enable or disable based on condition. I use Laravel 6 for the server side, and I use Yajra DataTables package for server data creation, including the usual show/edit/delete button.

Usually I use a condition based on user role (on server side) to determine the state of the button (disabled or not) and pass it to datatables. Now how can I achieve this using your wrapper ? I already tried the same approach as before, by declaring "actions" property in "fields" method, but I can't seem to initialize the "disabled" property of the button, because your datatables is created before the mounted() phase in Vue. I'm very new in using Vue, so I need a good lead on how to do this.

Thanks.

[noogen]

Just output some state to Vue so you can determine the user permission and template it in Vue like so - https://github.com/niiknow/vue-datatables-net/blob/master/example/app.vue#L56

Except, something like:

  <template
    slot="actions"
    slot-scope="ctx"
  >
    <button v-if="ctx.comp.hasPermission('moduleX.edit')" data-action="edit">edit</button>
    <button v-if="ctx.comp.hasPermission('moduleX.delete')" data-action="delete">delete</button>
  </template>

FYI, don't use the Yara Server-side render. Use ajax for making call to your server-side methods. See delete action example here - https://github.com/niiknow/laratt-api/blob/master/resources/js/views/Contacts.vue#L98

Example above demonstrate the old render method, which you can use if you want to write javascript to render it. The new Vue templating for column is better.

[pututbawono]

@noogen, thanks for the reply. Actually I've already solved this problem by still using Yajra render, the same way I did to render the buttons on Laravel blade, but I'm curious about your proposed solution.

1. What is "ctx"? Is it just an arbitrary parameter, or is it a prop specifically for Vue datatables?
2. About your <button></button> code, what does it actually do? In my app, when a user is not permitted to create/edit/delete data, the code will place a disabled string in the button property, so it's still visible but can't be clicked.

Sorry I'm very new in this frontend world, JS included, so I think I need more explanation.

[noogen]

1. ctx, short for context, identify some variable for Vue component to bind data to and for you to use in the template. It allow you to have access to these variables - https://github.com/niiknow/vue-datatables-net#native-templating-sort-of-explained

I named it as slot-scope="ctx" here but you can name it as slot-scope="anything"

2. You would bind client-side ajax script to the button click event instead of using server-side event.

Unfortunately, that's the extend of my answer to this issue. I'm closing it as I don't think this is the best place to teach JS.

[pututbawono]

@noogen, Sorry to open this thread again, but finally I understand what you mean with templating. But I need to ask, to do this templating, do I need to define the "dummy" row action field in the fields property, or not? I've tried with defining it first in the fields property with empty defaultContent, but it gives me an error : property "compile" of undefined.

Please help, thanks.