A curated list of the best Data Table components for Vue.js.

1. vue-materialize-datatable

A fancy Materialize CSS datatable VueJS component

Check the demo here

Features

• Sorting, with numerical sorting
• Pagination
• Localization
• Fuzzy searching
• Server searching
• Excel export
• Printing
• Custom topbar buttons
• Flexible data-from-row extractor
• Follows the Material Design spec
• Really, really efficient.. handles thousands of rows flawlessly
• And much more..

Requirements

• materialize-css (and NOT any other MD library!)
• VueJS 2

Installation

npm i vue-materialize-datatable --save

You also need to include Material Design icons. You have two ways of doing this:

The first and the recommended way is loading via Google's CDN, by adding this tag to your HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Or this in your CSS/Sass files:

@import url(//fonts.googleapis.com/icon?family=Material+Icons);

Alternatively, you can use the NPM package and add the font to your bundle by:

npm i material-design-icons-iconfont -S

and then include it in your Sass/CSS files

@import "~material-design-icons-iconfont/dist/material-design-icons";

Usage

Include the component,

import DataTable from "vue-materialize-datatable";

Then, register the component, however you like:

{
    ...
    components: {
        ...
        "datatable": DataTable
    }
}

And then.. use the component:

<datatable></datatable>

Read more

---

2. vue2-datatable

vue2-datatable-component

A Datatable for Vue.js 2.x which never sucks .

To install it:

npm i -S vue2-datatable-component

Read more

---

3. vue-data-tablee

Yeap, another Vue table component. This one is based on vue-good-table, a simple and pretty table component.

Here is a screenshot of a table created with this component:

Step 1: Install

Install from npm.

npm install vue-data-tablee

Step 2: Use

With Vue.use function declare vue-data-tablee components.

import 'vue-data-tablee/dist/vue-data-tablee.css'
import Vue from 'vue'
import DataTablee from 'vue-data-tablee'

Vue.use(DataTablee)

You can also import just components you need, without installing globally.

<template>
  <data-table :rows="rows" :cols="cols" />
</template>

<script>
import { DataTable } from 'vue-data-tablee'

export default {
  components: { DataTable },
  ...
}
</script>

Read more

---

4. vue-datasource

A Vue.js component to create dynamic tables. Compatible with Vue 2.x and Laravel.

Here is the demo:

Step 1: Install

For use this package is necessary install babel-plugin-transform-vue-jsx dependency.

$ npm install vue-datasource

Step 2: Use

<div id="#app">
    <server-datasource
        :source="items"
        :total="total_of_items"
        :columns="columns"
        :actions="actions"></server-datasource>
</div>

import { ServerDatasource } from 'vue-datasource'

new Vue({
    el: '#app',
    components: {
        ServerDatasource
    },
    data() {
        return {
            items: [...],
            total: 100,
            columns: [...],
            actions: [...]
        }
    }
});

Read more

---

5. v2-table

A simple table component based Vue 2.x.

Step 1: Installation

Install the pkg with npm:

npm i --save v2-table beautify-scrollbar

or yarn

yarn add  v2-table beautify-scrollbar

Step 2: Use

import Vue from 'vue';

import 'beautify-scrollbar/dist/index.css';
import 'v2-table/dist/index.css';
import V2Table from 'v2-table';

Vue.use(V2Table)

<template>
  <v2-table :data="list">
    <v2-table-column label="Name" prop="name"></v2-table-column>
    <v2-table-column label="Date" prop="date"></v2-table-column>
    <v2-table-column label="Address" prop="address"></v2-table-column>
  </v2-table>
</template>

<script>
  export default {
    data () {
      return {
        list: [{
          date: '2017-12-02',
          name: 'test1',
          address: 'Shenzhen,China'
        }, {
          date: '2017-11-02',
          name: 'test2',
          address: 'Guangzhou,China'
        }, {
          date: '2018-01-02',
          name: 'test3',
          address: 'Shaoyang,Hunan'
        }, {
          date: '2017-10-02',
          name: 'test4',
          address: 'Changsha,Hunan'
        }]
      }
    }
  }
</script>

Read more

---

6. vue-easytable

Based on vue2.x flexible table components.

Here are its Features:

Base components

• Loading component
• Pagination component
• Contextmenu component
• Icon component
• Locale component

Table component

• Internationalization
• Theme Custom & Built in theme
• Virtual Scroll
• Column Fixed
• Column Hidden
• Header Fixed
• Header Grouping
• Filter
• Sort
• Cell Style
• Cell Custom
• Cell Span
• Cell Selection(keyboard operation)
• Cell Autofill
• Cell Edit
• Clipboard
• Contextmenu
• Cell Ellipsis
• Row Radio
• Row Checkbox
• Row Expand
• Row Style
• Footer Summary
• Event Custom

Step 1: Install

npm install vue-easytable

or

yarn add vue-easytable

Step 2: Usage

Write the following in main.js:

import Vue from "vue";
import "vue-easytable/libs/theme-default/index.css";
import VueEasytable from "vue-easytable";

Vue.use(VueEasytable);

new Vue({
    el: "#app",
    render: (h) => h(App),
});

Example:

<template>
  <ve-table :columns="columns" :table-data="tableData" />
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          { field: "name", key: "a", title: "Name", align: "center" },
          { field: "date", key: "b", title: "Date", align: "left" },
          { field: "hobby", key: "c", title: "Hobby", align: "right" },
          { field: "address", key: "d", title: "Address" },
        ],
        tableData: [
          {
            name: "John",
            date: "1900-05-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Shanghai",
          },
          {
            name: "Dickerson",
            date: "1910-06-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Beijing",
          },
          {
            name: "Larsen",
            date: "2000-07-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Chongqing",
          },
          {
            name: "Geneva",
            date: "2010-08-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Xiamen",
          },
          {
            name: "Jami",
            date: "2020-09-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Shenzhen",
          },
        ],
      };
    },
  };
</script>

Read more

---

7. vuetable-2

Data table simplified

Step 1: Install

npm install vuetable-2 --save-dev

Javascript via CDN

// vuetable-2 dependencies
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
// vuetable-2
<script src="https://unpkg.com/vuetable-2@1.6.0"></script>
Vue.use(Vuetable)

This is demonstrated in this jsfiddle.

The .use from above will register all the components globally.

function install(Vue){
  Vue.component("vuetable", Vuetable);
  Vue.component("vuetable-pagination", VueTablePagination);
  Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
  Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
}

Also you have the ability to access certain components if you need them:

VueTable: VueTable.default/VueTable.VueTable,
VueTablePagination: VueTable.VueTablePagination,
VueTablePaginationInfo: VueTable.VueTablePaginationInfo,
VueTablePaginationDropdown: VueTable.VueTablePaginationDropdown

Read more

---

8. vue-scrolling-table

A Vue component to create tables with vertical and horizontal scrolling. Flexbox-based.

There is a live demo here.

The demo will allow you to play with various options.

Step 1: Build Setup

# install dependencies
npm install

# build for production with minification
npm run build

Step 2: Example Usage

<vue-scrolling-table>
  <template slot="thead">
    <tr>
      <th v-for="col in columns"
        :class="col.cssClasses"
        :key="col.id">{{ col.title }}</th>
    </tr>
  </template>
  <template slot="tbody">
    <tr v-for="item in items" :key="item.id">
    <td v-for="col in columns"
      :class="col.cssClasses"
      :key="col.id">{{ item[col.id] }}</td>
    </tr>
  </template>
</vue-scrolling-table>

Read more

---

9. vue-good-table

An easy to use, clean and powerful data table for VueJS with essential features like sorting, column filtering, pagination and much more.

Here are its features:

• Table Search
• Sorting
• Column Filtering
• Pagination
• Highly Customizable
• Checkbox Table
• Grouped Rows Table
• Server Powered Table
• Customizable Style and Themes

Installing

Install with npm:

npm install --save vue-good-table

Import globally in app:

import VueGoodTablePlugin from 'vue-good-table';

// import the styles
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);

Import into your component

import { VueGoodTable } from 'vue-good-table';

// add to component
components: {
  VueGoodTable,
}

Import into your component using Typescript

// add to component
components: {
  'vue-good-table': require('vue-good-table').VueGoodTable,
}

Here is an Example table with grouped rows and column filters

Read more

---