Version 6.3 Released!

Click to checkout the new features

Framework Support

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.

Other Frameworks
As a plain JavaScript library, Tabulator should work in any frontend frameworks, the list below is only to demonstrate its use on the major frameworks

Vue Setup

Vue 3

Getting Tabulator setup in vue3 is super simple, you can import the library to your project, setup a DOM element for it to load into and then use the reactive data setting to automatically update the table when the data changes

Options API

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

<script>
  import {TabulatorFull as Tabulator} from 'tabulator-tables'; //import Tabulator library

  export default {
    data() {
      return {
        tabulator: null, //variable to hold your table
        tableData: [], //data for table to display
      }
    },
    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
      });
    }
  }
</script>

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

Composition API

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

<script setup>
  import {ref, reactive, onMounted} from 'vue';
  import {TabulatorFull as Tabulator} from 'tabulator-tables'; //import Tabulator library

  const table = ref(null); //reference to your table element
  const tabulator = ref(null); //variable to hold your table
  const tableData = reactive([]); //data for table to display

  onMounted(() => {
    //instantiate Tabulator when element is mounted
      tabulator.value = new Tabulator(table.value, {
        data: tableData.value, //link data to table
        reactiveData:true, //enable data reactivity
        columns: [], //define table columns
      });
  })

  return{tabulator, table};
</script>

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

Vue 2

Getting Tabulator setup in vue 2 is super simple, you can import the library to your project, setup a DOM element for it to load into and then use the reactive data setting to automatically update the table when the data changes

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

import {TabulatorFull as Tabulator} from '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
    }
  },
  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}
 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 {TabulatorFull as 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 {TabulatorFull as 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

Svelte Setup

To effectively use Tabulator in your svelte project it is best to create your own component.

<script>
  import {TabulatorFull as Tabulator} from 'tabulator-tables';
  import {onMount} from 'svelte';

  export let data, columns;

  let tableComponent;

  onMount(() => {
    new Tabulator(tableComponent, {
      data: data, //link data to table
      reactiveData:true, //enable data reactivity
      columns: columns, //define table columns
    });
  });
</script>

<div bind:this={tableComponent}></div>

<svelte:head>
  <link href="https://unpkg.com/tabulator-tables@4.9.1/dist/css/tabulator.min.css" rel="stylesheet">
</svelte:head>

This will allow you to instantiate it in your project, using props to pass in your data and columns in the format that Tabulator expects.

Donate