Installation
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
You can then add the library to your project in one of two ways:
Common JS Require
Either by using a require statment (Common in node.js)
var Tabulator = require('tabulator-tables');
ESM Import
Or by using an import statment (introduced in ES2015)
import Tabulator from 'tabulator-tables';
Yarn Installation
To get Tabulator via the yarn package manager, open a terminal in your project directory and run the following command:
yarn add tabulator-tables
You can then add the library to your project in one of two ways:
Common JS Require
Either by using a require statment (Common in node.js)
var Tabulator = require('tabulator-tables');
ESM Import
Or by using an import statment (introduced in ES2015)
import Tabulator from '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.9.3/dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/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>
ESM Import
If your environment supports ESM module importing then you can also import the module directly from the CDN
import Tabulator from 'https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.es2015.min.js';
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.
Checkout the Build Documentation for full details.