Installation

• Package Sources
  • NPM
  • yarn
  • Bower
  • Git Clone
  • Download
  • CDN
• Include In Your Project
  • Importing Javascript
  • Importing CSS
  • Dist Files
• Setup Options
  • Core With Optional Modules
  • Full Package
  • jQuery Wrapper
  • Custom Build
• Async Initialization

Package Sources

There are a number of ways you can include the Tabulator source in your project.

Package Managers

Tabulator is available to pull from a range of popular package managers:

Yarn

To get Tabulator via the yarn package manager, open a terminal in your project directory and run the following command:

yarn add tabulator-tables 

NPM

To get Tabulator via the NPM package manager, open a terminal in your project directory and run the following command:

npm install tabulator-tables --save

Bower

To get Tabulator via the Bower package manager, open a terminal in your project directory and run the following command:

bower install tabulator --save

Git Clone

If you use the Git CVS you can clone the repository directly to your computer with the following terminal command:

git clone https://github.com/olifolkerd/tabulator.git

Download

You can download the source as a zip file from here.

CDN - UNPKG

To access Tabulator directly from the UNPKG CDN servers, include the following two lines at the start of your project, instead of the locally hosted versions:

<link href="https://unpkg.com/tabulator-tables@6.1.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.1.0/dist/js/tabulator.min.js"></script>

Latest Version Tracking

If you want your code to track the latest version of Tabulator, then use the following lines of code, when a new version of Tabulator is released it will automatically be available on these links:

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

Include In Your Project

Once you have pulled the source into your project it is time to include the Tabulator library in your code

Importing JavaScript

If you are using Tabulator in an environment that supports JavaScript importing, then you can import the library using the import statement:

import {Tabulator} from 'tabulator-tables';

Importing CSS

If you are using Tabulator in an environment that supports CSS importing, then you can import the default stylesheet for the library using the @import statement, for an SCSS project this would be:

@import  "tabulator-tables"

Dist Files

If you are working in a browser environment where you want to load the files directly in browser then you will need to pull in both the tabulator.js and tabulator.css files. These come in both minified and unminified variants

Minified

<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

Unminified

<link href="dist/css/tabulator.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.js"></script>

CDN ESM Import

If your browser environment supports ESM module importing then you can also import the module directly from the CDN

import {Tabulator} from 'https://unpkg.com/tabulator-tables@6.1.0/dist/js/tabulator_esm.min.js';

Setup Options

Tabulator comes with a range of possible distributions to best suit the needs of your project.

Core With Optional Modules

Tabulator comes with a wide range of optional modules that add functionality to the table. To keep the code imported into your project to a minimum, Tabulator allows you to import the core table functionality and then add these modules as needed.

To start your project you should import the Tabulator class, which is only 120kb in size, along with any modules that you may need to add features to your table.

You then register those modules with the Tabulator class, using the registerModule function before you instantiate your first table. This function takes one argument of either a module class or an array of module classes. If needed you can call this function multiple times.

import {Tabulator, FormatModule, EditModule} from 'tabulator-tables';

Tabulator.registerModule([FormatModule, EditModule]);

var table = new Tabulator("#example-table", {
  //table setup options
});

Full Package

If you would prefer to include the whole Tabulator library in your project, complete with all the built in modules, you can instead import TabulatorFull, this will pre-register all modules.

import {TabulatorFull as Tabulator} from 'tabulator-tables';

The full version of Tabulator with all modules included comes in at approximatly 420kb file size

jQuery Wrapper

If you want to instantiate Tabulator as a jQuery widget (eg. if you are upgrading from v3.x and don't want to switch to using vanilla js) you will need to include the jquery wrapper file after your tabulator js file

<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>

Custom Build

You can also build your own custom distribution of Tabulator using the rollup task automation tool.

Checkout the Build Documentation for full details.

Async Initialization

Tabulator uses an asynchronous initialization process, allowing a consistent initialization experience between async and synchronous data sources, and allowing binding of the events system to the table before initialization is completed.

The result of this is that you cannot call most functions directly on the table before it has finished initializing, when the tableBuilt event has fired.

Calling functions on the table before it is initialized may result in inconsistent behavior and possibly errors

Incorrect Approach

This will result in inconsistent behavior

var table = new Tabulator("#example-table", {
  //table setup options
});

table.setPage(2);

Correct Approach

This will work as expected

var table = new Tabulator("#example-table", {
  //table setup options
});

table.on("tableBuilt", () => {
  table.setPage(2);
});