Best Vue.js Datatables

Datatables are a complex beast. If you ever built data-heavy business applications, you will probably know it's not easy to make them readable and clear. A datatable component needs to be flexible enough to adapt to your dataset and use cases.

I've collected some of my favourite datatable components for Vue.js in this article!

I'll keep the list updated if I find a shiny new one! If you think I should include one in particular, just email me (armin@nifty.at).

last updated: 04.02.2019

Enso Datatable

The Enso Datatable lets you create complex tables based on JSON templates.

It supports server-side data loading and Excel exporting. Out-of-the-box functions range from searching, sorting and pagination to front-end translations and customization of column visibility.

This datatable uses Bulma for its layout, and has a few other dependencies for some of its functions. You can use it as part of the whole Enso ecosystem, which provides you with an SPA boilerplate. If you don't need that, you can use the datatable independently, too.

Enso Datatable Bulma-themed Datatable
icon-eye-dark Created with Sketch. 1.204

Vuetable 2

Look into Vuetable if you don't want or need a UI framework around your datatables. Vuetable takes your JSON data to turn it into a simple HTML table you can style independently. You can use it with any CSS framework, too, as long as it supports HTML tables.

Choose between API and data mode and use Vuetable either with an endpoint providing data, or with readily available data. It supports sorting, pagination, search filters and detail rows.

You can go and check out the Tutorial for Vuetable 2  – it also shows how to use Bootstrap with it, so you can see how it works with a CSS framework.

Vuetable 2 A datatable component for Vue.js
icon-eye-dark Created with Sketch. 8.477

ag-Grid

ag-Grid is a really sophisticated datatable solution. "ag" stands for agnostic, meaning it's available for a lot of different JS frameworks.

Definitely look into it if you need to build complex tables. It is probably overkill for a small project, but it might be the perfect fit if you need advanced functions like drag-and-drop for rows, grouping or live updates. Also, it has been optimized for performance, if you have to handle big data sets.

There's a free version to try it out, but for enterprise applications you will probably need an extended license.

ag-Grid Vue.js Data Grid
icon-eye-dark Created with Sketch. 633

jQWidgets Data Grid

The data grid component included in the jQWidgets UI framework is basically as powerful as Google Sheets. It's a responsive grid with sorting, filtering, drag and drop, custom keyboard navigation, nested grids, exports and many more features. It's suitable for large datasets that users can manipulate.

The jQWidgets framework also offers more components – but it is not free. They have great pricing for smaller projects and single developers too though. It comes with 500 demos for the grid component alone, and is also available for Angular, React and jQuery.

jQWidgets Vue UI Components Framework
icon-eye-dark Created with Sketch. 1.044

Vuetify Datatables

If you already plan to use a component framework for developing your apps and need one that supports datatables, you should look into Vuetify! It's a Material Design Framework, providing you with a lot of ready-to-use components.

Vuetify's datatables are flexible and support sorting, searching, inline-editing, pagination and more. Also things like a progress bar for loading states are included, and CRUD actions can be combined with their dialog component.

Vuetify.js A semantic component framework that utilizes Material Design.
icon-eye-dark Created with Sketch. 59.184

Vue Data Tables

This table is based on the UI Toolkit Element UI, and was built to be easily customizable. It does not provide a lot of functions out-of-the-box besides (front- and serverside) pagination, but its core structure can be used to create tables with custom functions and actions.

Vue Data Tables Vue.js 2 DataTables with custom filter and sort
icon-eye-dark Created with Sketch. 25.606

Buefy Datatables

Buefy is a collection of lightweight Vue.js UI components based on Bulma. If you're looking for a UI Kit to go with your datatables, take a look at this library that's only 60KB big (gzipped/minified).

The datatable component offers basic features like sorting, detail views for rows and pagination. The frontend can be adapted well to optimise legibility, by choosing narrow or striped rows f.ex. The component also supports sorting and paginating from the backend.

Buefy Lightweight UI components for Vue.js based on Bulma
icon-eye-dark Created with Sketch. 10.472

Similar Articles
The best Vue.js Admin Dashboards
16.04.2018  •  in #UI Components
As admin dashboards usually rely heavily on JavaScript, it was just a matter of time until beautiful Dashboards & Templates built with Vue.js begin to emerge! In this post, you'll find a growing collection of  💰 premium and free Vue.js Admin Template...
Best Vue.js Datepickers
23.07.2018  •  in #UI Components
Why create a custom DatePicker yourself, if there are so many really great Vue.js components already? We've collected our favourite DatePickers based on whether they are well maintained, easy to use, look nice and provide a good UX. This list will g...
Comments