Installation
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.3.0/dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.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.3.0/dist/js/tabulator_esm.min.mjs';
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); });