Best Vue.js Datatables 2022

Datatables are a complex beast. If you ever built data-heavy business applications, you probably know you'll eventually need a lot of features to build interactive, custom views. Deciding for a grid component is quite a commitment: It needs to be flexible enough to adapt to your dataset and use cases.

I have collected some of our 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, share it with us on Twitter @MadeWithVueJS!

Bryntum Grid

  • ✅ Support for Vue 2 + 3

The grid component by Bryntum is definitely an enterprise-grade solution. They have all the basic features you'd expect – sorting, filtering, inline editing, paging,.. – and also some handy extras like drag and drop row reordering, locked columns or context menus to show and hide columns.

They're really dedicated to performance, and optimize for quick initial rendering and frames per second when scrolling. If that's high on your priority list, you should definitely check them out. You can read more about how their performance compares to other libraries in this article !

It's a pure JS grid, but comes with a Vue wrapper and a lot of useful demos to help you integrate it in your Vue apps.

Bryntum offers other UI components as well (like a Scheduler or Gantt chart), but you can buy a license for all of them individually.

Bryntum Grid High-performance Vue Data Grid
icon-eye-dark Created with Sketch. 16.009

KendoVue Grid

  • ✅ Support for Vue 2 + 3

Maybe you know the Kendo UI library from back in your jQuery days – we did! They offer a (growing) range of native Vue components as well as Vue wrappers for their whole jQuery library.

Their grid is one of the components they re-built from the ground up with Vue (along with charts, forms and more). Compared to their grid wrapper, it offers a better performance in terms of reactivity and options to customize the rendering of the grid cells.

Besides basic CRUD functions, grouping, filtering, paging and the usual suspects, they have some nifty little features like reordering columns with drag and drop, scroll modes (including virtual scrolling), internationalization and Excel/PDF export.

We found it easy to use and well-documented!

KendoVue Grid Vue Grid Component
icon-eye-dark Created with Sketch. 5.297

Vue Handsontable

  • Support for Vue 2 + 3

The Handsontable JavaScript component offers wrappers for Vue 2 and 3. This grid component feels closest to the UX of an Excel or Google sheet. It will probably feel very familiar to your users as well when editing data.

It integrates with any data source and comes with lots of features for custom views, like freezing and resizing rows, as well as powerul context menus.

It's a commercial project, but can be used for free for personal projects and to test it.

Vue Handsontable Vue Data Grid
icon-eye-dark Created with Sketch. 11.135

Syncfusion Vue Data Grid

  • ✅ Support for Vue 2 + 3

The Syncfusion data grid is part of their extensive UI library. It’s a workhorse that can handle high volumes of data without any performance loss.

The tables support inline CRUD operations, filtering, data export, stacked headers, row grouping and more. We especially love Syncfusion’s focus on being mobile- and touch-friendly as well as supporting WAI-ARIA for accessibility. Data binding is very flexible, as it can handle various local and remote sources. Together with JSON it’s a great choice for SPAs.

This grid is perfect for enterprise-level and data-heavy applications. You don’t have to be an enterprise to be able to afford it, though. Syncfusion’s whole Vue UI library is available under a free community license for individuals and smaller companies, which is more than awesome in our opinion. 

Syncfusion Vue Data Grid Data Grid / Data Table
icon-eye-dark Created with Sketch. 14.413

ag-Grid

  • ✅ Support for Vue 2 + 3

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 Data Grid
icon-eye-dark Created with Sketch. 6.117

jQWidgets Data Grid

  • ⚡️ Vue 2 only

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 Framework
icon-eye-dark Created with Sketch. 3.834

Vue Good Table

  • ⚡️ Vue 2 only

vue-good-table 1951 is an open-source data table component with a range of features for searching, grouping, sorting, pagination and more. You can use them with pretty minimal setup effort, but it's also easily customizable.

It's currently only supporting Vue 2, but you can check out the Vue 3 compatible fork in progress borisflesch/vue-good-table-next.

Vue Good Table Data Table
icon-eye-dark Created with Sketch. 20.907

Vue Easytable

  • ⚡️ Vue 2 only

vue-easytable  2975 is a datatable component supporting virtual scrolling for handling big data sets. It also provides all the advanced features you need to build flexible grids: Fixed and grouped headers, automatic row expansion, row selection, filtering and more.

It comes with themes for light / dark mode out of the box as well.

Vue Easytable is open-source and currently based on Vue 2. 

Vue Easytable Data Grid Component
icon-eye-dark Created with Sketch. 2.159

Data Tables included in UI Frameworks

If you just want to display data and have no specific or complex requirements you could also take a look at the components included in popular UI libraries and frameworks. They're usually pretty solid and already offer (pretty advanced!) features like sorting, paging, filtering, selection, inline editing and more.

Vuetify.js Material Component Framework
icon-eye-dark Created with Sketch. 83.868
Buefy UI Component Library
icon-eye-dark Created with Sketch. 20.297
PrimeVue UI Component Library
icon-eye-dark Created with Sketch. 25.931
Quasar Framework Multi-Platform Framework
icon-eye-dark Created with Sketch. 26.132
Element Plus UI Component Library
icon-eye-dark Created with Sketch. 4.427

Similar Articles
Best Vue.js Notification Components 2022
02.02.2022  •  in #UI Components
I've collected some of my favourite, versatile (and mostly lightweight) Vue.js Notification, Alert & Toast Components in this article!
Top Vue.js Chart Components in 2022
06.05.2022  •  in #UI Components
Choosing a chart component is not always an easy task. They have to fit your data, be beautiful, customizable, responsive, easy to implement.. 🤯 We have collected our favourite Vue.js chart components in this article!