Best 10+ Vue.js Tables and Data Grid Examples [Latest 2017]

0

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.

Vue.js Table - BootstrapVue-table

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.

Vue Tables 2 - Vue.js Data Grid Example

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.

vue data-table

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)

Vue Table and Grid - Vue.JS Advanced Datatable Component

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.

vuetifyjs - Data tables

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.

Vue Datasource

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.

Vuetable-2 - Vue.js table

9. vue-data-tables

vue-data-tables is a simple, customizable and pageable table, based on vue2 and element-ui.

vue-data-tables

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

Vue Bootstrap Table

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

vue2-bootstrap-table

11.1 vue-bootstrap-table

The similar flavor is designed for Vue.js version 1.0

vue2-bootstrap-table

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

vue-smart-table

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

vue data-table

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.

Leave a Reply

avatar
  Subscribe  
Notify of