How add action button on Vue3 component

joseamontalvo

Hello everyone.

Can you help me with an example of how to add a button for each row and link it to a VUE event ?.

Thank you very much.

allan

You can't trigger a Vue event using the standard @myCallback syntax of Vue since the DOM of the table is under DataTables' control, rather than Vue's.

What you need to do is bind DOM events (jQuery can be used for this as it makes life easy) - e.g. you could:

let dt;
const table = ref(); // This variable is used in the `ref` attribute for the component
 
onMounted(function () {
  let dt = table.value.dt();

  $(dt.table().body()).on('click', 'a.myButton', function () {
    // Callback
  });
});

Use a renderer to create the button if it isn't already in the data you are using to display in the DataTable.

Allan

joseamontalvo

Thank you so much!!! Allan.

hhehn

@allan

As I'm using Vue 3 only I'd like to avoid any vanilla JS or jQuery.
I do import:

import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net-bs5';

Every single row rendered by DataTables should usually include a button with click event calling a method to route to a controller action:

const columns = [
...
{ data: null, orderable: false, render: function (data) { return '<button @click="deletePid(' + data.id + ')">Delete</button>'; }, },
...
];

Is there really no way to trigger this click event or any other to pass 'data.id' to my method for deleting within the Vue 3 Composition API?

Thanks in Advance
Heiko

allan

render: function (data) { return '<button @click="

This isn't parsed by Vue's compiler, so no - that click event native to Vue wouldn't operate like that.

The ability to have Vie components inside the DataTable cells would be needed for that, and I've not yet implemented that I'm afraid.

Allan

hhehn

Thank you for this information, dear Allan.
I think of an equivalent to the former jQuery ".live()" method which worked after DOM manipulation by JS.

allan

That would just be reimplementing what jQuery does. I'm not clear on the advantage of doing that over just using jQuery? You could use Cash or a similar library that provides that ability if you specifically didn't want to use jQuery.

Allan

quadrantesz

Hi Allan, i was having a little trouble following this topic so i debuged it and came back here to post an update.
No jquery library was imported in my package.json.
In this case im using the 'select' event but the focus is on how to reach the 'on' function of the DataTable-Vue3 Component in a vue 3 typescript component.

    const table = ref()

    onMounted(function () {
      table.value.dt.on('select', function (e, dt, type, indexes) {
        // callback 
      })
    })
    [...]
    <DataTable ref="table"/>

allan

Is that throwing an error saying that on is undefined or not a property of undefined, or something like that?

Allan

rlsystems

Allan, its a nice plugin. But being able to add Vue component in the render is a essential and if we're not able to do that, its a deal breaker. Who's going to use a table where you can't even add an 'edit' button on the rows?

The accepted answer here is difficult to follow. Since this is such an important point, do you think you could provide a little more context? Sorry if I'm a Vue noob but how does this line even refer to an element?

const table = ref()

Where does all this code even go? In setup() ?
I suppose this means your example is with the composition API? How does this look with options api? Could you include some template markup?

Please explain to us like we are noobs.

allan

An upgrade is coming . It is actually written, but is dependent upon DataTables 2 which is currently in development. With the updated component you will be able to have Vue components inside the DataTable. I'll update the documentation with an example showing that before I make the rralse.

I'd hoped it would be this year, but it is looking like it will slip into January now.

If you can hang on until then, then there will be no need for fragile hacks.

Allan

Whylgher

I'm waiting for this update lol, following this post

allan

I can't wait to get it out! But it needs a number of other things to fall into place as well - specifically all the extensions for DataTables need to be updated (some were still using legacy APIs...). Almost certainly January now - sorry.

Allan

MrJibus

No pressure but I wanted to know if the release including the ability to insert a vue component is still for this month ?
Thank you !

allan

That is the plan, yes!

rsaleri

Hi there, I really like the idea of using my vue components inside the datatable, can we hope for february?

Thank you very much

allan

Yes! As you'll have seen it has slipped again, but it will be this month. I've got the tabs I need open to start updating the DataTables Vue component's documentation for this .

Allan

paulhemen88

Any update on this Allan? I've been waiting to see it in action

bloblabl

@allan Hi, I would like to know about an update where you can use Vue component's in DataTables?

allan

Not available yet. I'm still working on it - specifically the orthogonal data for each cell. If I can't figure that out soon, I'll release it as is, but it is getting closer to a release (should be this week).

Allan

paulhemen88

I tried the latest Master branch of Vue3 component. But it seems like it required Datatables 2. And I'm using "datatables.net-bs5": "^1.13.8", which isn't supported by Datatables V2. I hope you launch it with datatables.net-bs5 or any other workaround to support bs5

allan

There is a 2.0.0 for datatables.net-bs5.

What hasn't yet been updated is the Vue component for DataTables.

Allan

rsaleri

@paulhemen88
Latest datatables.net-bs5 is 2.0.0 (https://www.npmjs.com/package/datatables.net-bs5), you need to update it

paulhemen88

Ok Thanks!!!

bloblabl

Hi @allan, is there going to be a post somewhere about updating Vue component's?

allan

Once it is done, yes there will be.

Allan

bloblabl

Ok, thanks

paulhemen88

Is it ready for release? Thanks!!!

allan

Yes, the new package is now available.

The documentation for how to use a Vue component is available here.

Allan

paulhemen88

Thank you very much Allan

paulhemen88

Allan, it seems like template buttons are not reactive in Responsive Mode. Can you verify that or I'm doing something wrong.