Vue Table and Data Grid

The table below is a live Tabulator instance. Sort columns, drag them around, edit cells, filter by name and page through the data. This is the same library you can drop into your Vue project.

Why Tabulator for Vue?

Tabulator is a feature‑rich JavaScript table and data grid library with zero dependencies. Because it is plain JavaScript, it slots neatly into any Vue component. Pair it with Vue's reactivity and the grid updates automatically when your data changes, while Tabulator handles sorting, filtering, inline editing, grouping, pagination, virtual DOM rendering and much more.

• Works with Vue 3 and Vue 2: Composition API or Options API.
• No heavyweight dependencies: just install one package.
• Reactive data: the grid stays in sync with your reactive state.
• Virtual DOM: smoothly render very large datasets.
• Free & open source: MIT licensed, no per‑seat fees.

1. Install Tabulator

Add Tabulator to your Vue project with your package manager of choice:

npm install tabulator-tables

That installs the current release (tabulator-tables@6.5.0). See the full install guide for yarn, CDN and custom build options.

2. Create a Vue table component

Import the library and stylesheet, then instantiate Tabulator on a template ref when the component mounts. Below is a Vue 3 component using the <script setup> Composition API:

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { TabulatorFull as Tabulator } from "tabulator-tables"; //import Tabulator library
import "tabulator-tables/dist/css/tabulator.min.css";          //import Tabulator stylesheet

const tableRef = ref(null);  //reference to the table holder element
let tabulator = null;        //variable to hold the table instance

const tableData = reactive([
  { id: 1, name: "Oli Bob", age: 12, col: "red", dob: "19/02/1984" },
  { id: 2, name: "Mary May", age: 1, col: "blue", dob: "14/05/1982" },
  { id: 3, name: "Christine Lobowski", age: 42, col: "green", dob: "22/05/1982" },
  { id: 4, name: "Brendon Philips", age: 25, col: "orange", dob: "01/08/1980" },
]);

onMounted(() => {
  tabulator = new Tabulator(tableRef.value, {
    data: tableData,        //load data into the table
    reactiveData: true,     //update the table when tableData changes
    layout: "fitColumns",   //fit columns to the width of the table
    columns: [              //define the table columns
      { title: "Name", field: "name", editor: "input" },
      { title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
      { title: "Favourite Color", field: "col" },
      { title: "Date Of Birth", field: "dob", hozAlign: "center", sorter: "date" },
    ],
  });
});

onBeforeUnmount(() => tabulator?.destroy()); //tidy up on unmount
</script>

<template>
  <div ref="tableRef"></div>
</template>

Because reactiveData is enabled, mutating tableData automatically updates the grid, with no manual redraw required.

Using the Options API, Vue 2, or want more detail? See the Vue documentation for full examples.

Everything you need in a data grid

Tabulator ships with the features you would otherwise stitch together yourself. A few highlights are linked above the demo. Explore the full set in the documentation.