Installation

• Installation Sources
  • Bower
  • NPM
  • yarn
  • Git Clone
  • Download
  • CDN
• Setup Options
  • Full Package
  • Core With Extensions
  • jQuery Wrapper
  • Custom Build

Installation Sources

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

Bower Installation

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

bower install tabulator --save

NPM Installation

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

Then to add the library to your project, you will need to require it:

var Tabulator = require('tabulator-tables');

NPM Package Changed
The old jquery.tabulator package has been deprecated and will no longer be updated, all future updates will appear on the new tabulator-tables package.

Yarn Installation

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

yarn install tabulator-tables 

Then to add the library to your project, you will need to require it:

var Tabulator = require('tabulator-tables');

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@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>

Check out more of the great libraries available to use direclty from CDNJS at https://cdnjs.com/

Setup Options

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

Full Package

Tabulator comes with two full package files, these contain the core Tabulator library and all of the modules bundled into one easy to use package.

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>

Core JS With Extensions

The core js files provide the minimal JavaScript needed to create a basic table, these are perfect for environments where optimal file sizes are needed.

Minified

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

Unminified

<script type="text/javascript" src="dist/js/tabulator_core.js"></script>

If you need any of the modules in addition to the core files (for example you want to include formatters with your table), then you should include these files after the core js file. The module distributions can be found in the /dist/js/modules folder.

<script type="text/javascript" src="dist/js/tabulator_core.min.js"></script>
<script type="text/javascript" src="dist/js/modulesformat.min.js"></script>

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 gulp task automation tool.

Tabulator's codebase is composed of a number of files located in the /src folder, and is built using the Gulp Task Runner. The gulpfile.js file that controls the build can be found in the root directory.

As gulp is an Node.js tool, you will first need to make sure you have Node.js installed.

Once installed you will then need to install the gulp plugin by opening a console window in the tabulator folder and typing the following command:

npm install gulp-cli -g

You will then need to setup the project by opening a console window in the root of the Tabulator directory and typing the following command:

npm install

You are now ready to make a custom build. The /src/modules_enabled.js file lists all modules that will be installed in the build (they are supposed to be in comments). To remove an module from your build, simply delete its line in the file.

Once you are happy with the list of modules that are going to be installed you need to trigger the build process. To do this open a console in the root of the Tabulator directory and run the following command:

gulp

Wait for the command to finish processing, then the /dist folder will contain your own custom build of Tabulator!