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

Vue Component

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

Simply install the component in your project with npm

npm install vue-tabulator

Import the CSS and Component

@import  "~vue-tabulator/dist/scss/bootstrap/tabulator_bootstrap4";

Import the component and register it with Vue

import Vue from 'vue';
import VueTabulator from 'vue-tabulator';

Vue.use(VueTabulator, {
    name: 'AwesomeTable'
});

You can then use the component on your page, passing in an array of data and an options object

<VueTabulator v-model="data" :options="options" />

Full documentation on the component can be found at https://vue-tabulator.netlify.com/

Manually Including Tabulator

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
      reactiveData:true, //enable data reactivity
      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", hozAlign: "left", formatter: "progress" },
  { title: "Favourite Color", field: "col" },
  { title: "Date Of Birth", field: "dob", hozAlign: "center" },
  { title: "Rating", field: "rating", hozAlign: "center", formatter: "star" },
  { title: "Passed?", field: "passed", hozAlign: "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.

<ReactTabulator
 data={data}
 columns={columns}
 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
      reactiveData:true, //enable data reactivity
      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

To effectively use Tabulator on your Angular project it is best to create your own component.

After pulling in the Tabulator source to your project using one of the methods in the Install Guide create a component as follows, in this example we will be saving the Javascript for the component in the tabulator-tables.component.ts file and the HTML in the tabulator-tables.component.htmlfile

JavaScript

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import Tabulator from 'tabulator-tables';

/**
 * This is a wrapper class for the tabulator JS library.
 * For more info see https://tabulator.info
 */
@Component({
  selector: 'app-tabulator-table',
  templateUrl: './tabulator-table.component.html',
  styleUrls: ['./tabulator-table.component.scss']
})
export class TabulatorTableComponent implements OnChanges {
  @Input() tableData: any[] = [];
  @Input() columnNames: any[] = [];
  @Input() height: string = '311px';
  // list properties you want to set per implementation here...

  tab = document.createElement('div');

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.drawTable();
  }

  private drawTable(): void {
    new Tabulator(this.tab, {
      data: this.tableData,
      reactiveData:true, //enable data reactivity
      columns: this.columnNames,
      layout: 'fitData',
      height: this.height
    });
    document.getElementById('my-tabular-table').appendChild(this.tab);
  }
}

HTML

<div id="my-tabular-table"></div>

CSS

Include the /dist/css/tabulator.css file in with the rest of your projects CSS. If you want to make tabulator fit in better with the style of Angular Material, you can include the following CSS after you have included the Tabulator CSS.

//Tabulator styles override

.tabulator {
   font-size: 12px;
   border: none;
}

.tabulator .tabulator-header {
   font-weight: normal;
   border-bottom: 1px solid;
   border-bottom-color: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.54);
}

.tabulator .tabulator-header .tabulator-col {
   height: 48px;
   background-color: #ffffff;
   border: none;
   padding: 0 7px;
}

.tabulator-row {
   border-bottom: 1px solid;
   border-bottom-color: rgba(0, 0, 0, 0.12);
   min-height: 48px;
   vertical-align: middle;
}

.tabulator-row .tabulator-cell {
   padding: 16px 7px;
   border-right: none;
   vertical-align: middle;
}

.tabulator-row .tabulator-cell:first-of-type,
.tabulator .tabulator-header .tabulator-col:first-of-type {
   padding-left: 24px;
}

.tabulator-row.tabulator-row-even {
   background-color: #ffffff;
}

You can then include the component in your code as you would any other component