Sometimes, we want to implement DataTables in Vue.js.

In this article, we’ll look at how to implement DataTables in Vue.js.

How to implement DataTables in Vue.js?

To implement DataTables in Vue.js, we create it with a ref and the DataTable method.

For instance, we write

const dT = $(this.$refs.table).DataTable();
dT.destroy();

We get the element we want the table to be in with this.$refs.table.

And then we call $ with it to return a jQuery object and call DataTable with the jQuery object.

Then we update it with the data with

await this.$nextTick();
$(this.$refs.table).DataTable({
  //...
});

in our code when the data is ready.

this.$nextTick makes the method wait for reactive properties to be updated before running the code after it.

Conclusion

To implement DataTables in Vue.js, we create it with a ref and the DataTable method.