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: 23.02.2020
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.
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.
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 (but you need some experience with Laravel/Vue to do so).
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.
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.
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 has other UI components as well (a Scheduler and Gantt chart), but you can buy a license for all of them individually.
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.
Maybe you know the Kendo UI library from back in your jQuery days (we did!).
They now have Vue wrappers for most of their components, so you should definitely check it out if you need an enterprise-level UI library. But they are also experimenting with native components, and newly built their grid component from the ground up with Vue.js.
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!
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.
联系客服
