Framework Support


As a self contained JavaScript library Tabulator should work in just about any web environment you choose to use it in.

Below are a series of brief guides that cover the main JavaScript frontend frameworks.

If you feel there are any examples missing here or you would like to contribute an example, please raise a Feature Request on the GitHub Repository.

Vue Setup

Below is a basic example of how to setup a Tabulator table in a basic Vue.js component.

var Tabulator = require("tabulator-tables"); //import Tabulator library

Vue.component('example-component', {
  data: function () {
    return {
      tabulator: null, //variable to hold your table
      tableData: [], //data for table to display
    //update table if data changes
      handler: function (newData) {
      deep: true,
    //instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.tableData, //link data to table
      columns: [], //define table columns
  template: '<div ref="table"></div>' //create table holder element

React Setup

React Component

There is a React Component for Tabulator, which allows you to setup things up in a react friendly way.

Simply install the component in your project with npm

npm install react-tabulator

Import the CSS and Component

import 'react-tabulator/lib/styles.css';
import { ReactTabulator } from 'react-tabulator'

Define Your Column Definitions and Data

const columns = [
  { title: "Name", field: "name", width: 150 },
  { title: "Age", field: "age", align: "left", formatter: "progress" },
  { title: "Favourite Color", field: "col" },
  { title: "Date Of Birth", field: "dob", align: "center" },
  { title: "Rating", field: "rating", align: "center", formatter: "star" },
  { title: "Passed?", field: "passed", align: "center", formatter: "tickCross" }
var data = [
  {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
  {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:"125", col:"orange", dob:"01/08/1980"},
  {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},

Then in in the return from your render function you can include the component, passing in the columns and data and adding in any other constructor properties.


Full details of the wrapper can be found on its GitHub Repo

Manually Including Tabulator

Below is a basic example of how to setup a Tabulator table in a React environment yourself.

import React from "react";
import ReactDOM from "react-dom";
import Tabulator from "tabulator-tables"; //import Tabulator library
import "tabulator-tables/dist/css/tabulator.min.css"; //import Tabulator stylesheet

class App extends React.Component {
  el = React.createRef();

  tabulator = null; //variable to hold your table
  tableData = []; //data for table to display

  componentDidMount() {
    //instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.el, {
      data: this.tableData, //link data to table
      columns: [], //define table columns

  //add table holder element to DOM
    return (<div ref={el => (this.el = el)} />);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Angular Setup

An Angular example will be coming soon. If you know how to set things up on Angular, why not Submit Your Solution on GitHub and help out other users.