using Vue.js & DataTable(jquery plugin) using Vue.js & DataTable(jquery plugin) vue.js vue.js

using Vue.js & DataTable(jquery plugin)


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.


I have worked to rebuild the DataTable jQuery plugin using only VueJS. So far, my project, VueDataTable, has the following features:

  • multiple column sorting
  • search filter
  • pagination
  • entry length options
  • customization text
  • language support for English, Portuguese, and Spanish

You can install it with npm. For more information, please check that out on Github and on demo projects (demo1, and demo2)

I hope this will help you or someone else. Actually, I came here to this question a couple of weeks ago, and then, after not finding a good solution, I decided to create VueDataTable.