Framework Support

• Overview
• Vue Setup
• React Setup
• Angular Setup

Overview

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
    }
  },
  watch:{
    //update table if data changes
    tableData:{
      handler: function (newData) {
        this.tabulator.replaceData(newData);
      },
      deep: true,
    }
  },
  mounted(){
    //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

And then import the CSS and Component

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

You can then configure the table by passing in any of the standard constructor properties as arguments

<ReactTabulator
 data={data}
 tooltips={true}
 layout={"fitData"}
 />

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
  render(){
    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.