using Vue.js & DataTable(jquery plugin)

vue.js datatables vue-tables-2
Koby Biton picture Koby Biton · Jan 30, 2017 · Viewed 16.4k times · Source

i'm new in Vue.js and DataTable and i hope some of you have the experience with their integration.. can somebody say for sure that its a good way to integrate Vue.js & DataTable(jquery plugin)? it's works just fine but i want to be sure it's the right way... thanks :)

Answer

Cristi Jora picture Cristi Jora · Jan 30, 2017

I prefer alternatives for tables with vuejs. One of them is the component from ratiw https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/README.md

Pretty quick to start with and integrates easily with bootstrap or semantic ui framework. Also has very nicely customizable sort fields and search as well getting data from an api but that part needs specific data response format from your api and unless you don't have much control over that it's harder to implemented pagination for example.

Another option is https://github.com/matfish2/vue-tables-2. I found this one harder to start with because it needs some jsx setup but it's structured better than the first one above.

UPDATE: vue-tables-2 is now served precompiled and does not require any transforms or loaders

Honestly I would prefer one of the options from above or if you find another one in form of a component on awesome-vue (a list of vue components on github). By using such custom components you get rid of 2 libraries (jquery and datatables) and they play nicely with the reactive nature of vue.

Unless you don't need pdf exports, stylesheet exports or fancy print stuff, then I don't see why you should use datatables.

Related questions

How to include a CDN to VueJS CLI without NPM or Webpack?

I'm new on VueJS ans Webpack. I've created a project with VueJS CLI and trying to work with it. I need to insert an CDN to my code. When working with standard HTML, CSS & JS solutions, I'd include CDNs …

Read More
How to display the index of an array using the vuetify data table?

I have a response from server which has the array of data passing to my vue instance. I have completed the data table using that array.But all i need to know how can I display the index of my …

Read More
How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More