How add action button on Vue3 component

How add action button on Vue3 component

joseamontalvojoseamontalvo Posts: 2Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • joseamontalvojoseamontalvo Posts: 2Questions: 1Answers: 0

    Thank you so much!!! Allan.

  • hhehnhhehn Posts: 2Questions: 0Answers: 0

    @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

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    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

  • hhehnhhehn Posts: 2Questions: 0Answers: 0

    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.

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    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

  • quadranteszquadrantesz Posts: 1Questions: 0Answers: 0

    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"/>
    
  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

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

    Allan

  • rlsystemsrlsystems Posts: 1Questions: 0Answers: 0

    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.

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    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

  • WhylgherWhylgher Posts: 1Questions: 0Answers: 0

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

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    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

  • MrJibusMrJibus Posts: 4Questions: 1Answers: 0
    edited January 13

    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 !

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    That is the plan, yes!

  • rsalerirsaleri Posts: 6Questions: 1Answers: 0

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

    Thank you very much

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    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

  • paulhemen88paulhemen88 Posts: 12Questions: 1Answers: 0

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

  • bloblablbloblabl Posts: 6Questions: 1Answers: 0

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

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    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

  • paulhemen88paulhemen88 Posts: 12Questions: 1Answers: 0

    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

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    There is a 2.0.0 for datatables.net-bs5.

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

    Allan

  • rsalerirsaleri Posts: 6Questions: 1Answers: 0

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

  • paulhemen88paulhemen88 Posts: 12Questions: 1Answers: 0

    Ok Thanks!!!

  • bloblablbloblabl Posts: 6Questions: 1Answers: 0

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

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    Once it is done, yes there will be.

    Allan

  • bloblablbloblabl Posts: 6Questions: 1Answers: 0

    Ok, thanks :)

  • paulhemen88paulhemen88 Posts: 12Questions: 1Answers: 0

    Is it ready for release? Thanks!!!

  • allanallan Posts: 61,453Questions: 1Answers: 10,055 Site admin

    Yes, the new package is now available.

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

    Allan

  • paulhemen88paulhemen88 Posts: 12Questions: 1Answers: 0

    Thank you very much Allan

Sign In or Register to comment.