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.