Using AlpineJS with table libraries that manipulate the DOM?

[bmarsh9]

I've been using DataTables (https://datatables.net/) to add sorting, paging, filtering, etc to my existing tables. I've now started to use AlpineJS to render the table inside a <template></template> tags. However I've now run into issues where Datatables will remove elements defined by AlpineJS when initializing and reloading. Here is the code Im working with. Im able to initialize the table however Datatables will immediately remove the <template> and now I've lost Alpines ability to update the table. I realize this is also a Datatables issue, but they recommended that Datatables should be the only one controlling the DOM. Any help would be appreciated.

<div x-data="project()">
    <table class="table">
      <thead>
        <tr>
          <th class="w-1">ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="items in items" :key="item.id">
          <tr class="text-sm font-medium">
            <td x-text="item.id"></td>
            <td x-text="item.name"></td>
          </tr>
        </template>
      </tbody>
    </table>
</div>

function project(){
    return {
        init() {
          this.items = [{"id":1, "name":"test"}, {"id":2, "name":"test2"}]
        },
        items: []
        getItems: function() {
          // make API call, update items list
          this.items = [{}, {}]

          // draw table
          this.$nextTick(() => {
            $(".table").DataTable().destroy()
            $(".table").DataTable();
          })
        }
    }
}

[ekwoka]

You shouldn't be using jquery anymore.

But yes, datatables in generally will want to manipulate the dom, and Alpine won't be aware of things.

Ideally the library is sensible and would allow you to pass data from Alpine to the datatables library, and it can pass data back. Having both not communicating data, but both manipulating the dom is a recipe for disaster...

[bmarsh9]

Well Datatables requires Jquery to function. I managed to figure it out but just loading the data through Datatables and removing the <template></template.

Ill close this - thanks

[ekwoka]

Okay then I'd say stop using Data tables

https://www.ag-grid.com/

Modern approaches exist that work better and faster.

jQuery is a library that does nothing but slow everything down by 40%.