VueJS Examples

Best VueJS Data Table Components

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


  • 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..



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="" rel="stylesheet">

Or this in your CSS/Sass files:

@import url(//;

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";


Include the component,

import DataTable from "vue-materialize-datatable";

Then, register the component, however you like:

    components: {
        "datatable": DataTable

And then.. use the component:


Read more

2. vue2-datatable


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'


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

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

import { DataTable } from 'vue-data-tablee'

export default {
  components: { DataTable },

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">
import { ServerDatasource } from 'vue-datasource'

new Vue({
    el: '#app',
    components: {
    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';

  <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>

  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'

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


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";


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


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

  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",

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=""></script>
<script src=""></script>
// vuetable-2
<script src=""></script>

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

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

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


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'


Import into your component

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

// add to component
components: {

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