This page has an awesome collection of Vue.js tables and data grid examples.
Data rendering is always been important and crucial while picking up a user-friendly component for it.
Also, it’s a hectic task to select a component which is responsive and the same time it should be compatible with our app.
Therefore, I thought why not share an amazing list of Vue.js table and data grid examples, that will help you to choose a particular table for your web app.
So, let’s get started with the list of Vue.js tables and data grid examples, enjoy!
1. BootstrapVue Table
BootstrapVue is collection of native bootstrap components which are perfectly compatible with Vue.js.
b-table is a component which allows us to display the data on the client side.
Also, it supports pagination, filtering, sorting, custom rendering, events, and asynchronous data.
2. Vue Tables 2
Vue Tables 2 is compatible with Vue.js version 2.
It can be work for client and server data rendering. Also, it provides the features like filters, custom sorting, multiple sorting, etc.
3. Vue.js Datatable Component
Vue.js datatable component is allows us easy and quick setup for filters, sorting and pagination.
It currently supports Vue.js ^2.4.
4. Vue.JS Advanced Datatable Component (Vuejs editable grid)
This component is very powerful with lot of options available to use.
This has the following features:
- Sorting
- Multi-column grouping
- Filtering
- Real-time editing
- Custom filter/formatter support
- Custom aggregate functions (min, max, total etc.)
- Custom column header templates
- Custom cell templates (for both view and edit modes)
5. VueTables (Vue.js v1)
VueTables are useful for both client and server side data rendering.
It’s compatible with Vue.js version 1.0.
6. vuetifyjs – Data tables
It’s an example of one of the Vuetify.js Vue CLI packages.
7. Vue Datasource (Compatible with Vue 2.x and Laravel)
Vue DataSource is a Vue.js component to create dynamic tables.
Also, it’s compatible with Vue 2.x and Laravel.
8. Vuetable-2 – data table simplify!
Vuetable-2 is compatible with Vue.js version 2.x.
Also, it’s Vue.js component with the combination of data table.
9. vue-data-tables
vue-data-tables is a simple, customizable and pageable table, based on vue2 and element-ui.
10. Vue Bootstrap Table
This example is implemented using bootstrap-table to Vue.js component.
Following are the features
- Created for Bootstrap 3 (Bootstrap 2 supported)
- Responsive web design
- Scrollable Table with fixed headers
- Fully configurable
- Via data attributes
- Show/Hide columns
- Show/Hide headers
- Get data in JSON format using AJAX
- Simple column sorting with a click
- Format column
- Single or multiple row selection
- Powerful pagination
- Card view
- Localization
11. vue2-bootstrap-table
vue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js.
It’s specially designed for Vue.js version 2.0
11.1 vue-bootstrap-table
The similar flavor is designed for Vue.js version 1.0
12. vue-smart-table (Vue.js V1)
Vue Smart Table is a simple and powerful table framework. Every column is a component.
It’s compatible with Vue.js version 1.x
13. vue data-table
Vue data-table is smart table using vue.js – sorting columns, filter by string, child rows, customs columns, custom row data
14. vue-floatthead
vue-floatthead is a Vue 2 component designed with jQuery.
Moreover, I hope you loved this amazing collection of Vue.js tables and data grid examples.
Related
Final words, don’t forget to share with your friends on following social media.
