Custom Build

• Overview
• Setup
• File Structure
• Run Commands

Overview

This section will take you through how to build your own custom versions of Tabulator. Either to help add bespoke functionality to your table or to submit a Pull Request to contribute code to the main Tabulator Repository

Setup

Tabulators dist files are generated using the Gulp Task Runner, using a series of npm run commands.

Tabulators build tools are based around Node.js and the npm package manager, you will first need to make sure you have node and npm installed before you can begin work on Tabulator.

In order to build your own custom version of Tabulator you will need to copy the Tabulator repo from Git Hub and clone it onto your local machine

Once the files have been cloned you will need to pull in all of Tabulator dependencies by opening a console window in the tabulator folder and typing the following command:

npm install

You will then have all the tools installed you need to build your own custom version of Tabulator.

File Structure

Source Files

Tabulator's codebase is composed of a number of files located in the /src folder, and is built using the Gulp Task Runner.

• /src - The source files for Tabulator, make your changes in this directory
  • /js - This folder contains the JS source. The core files are in the root of this folder
    • /modules - Sources files for each of the tabulator modules
    • core.j - Tabulator class definition
    • core_modules.js - Universal Module Defnition wrapper that wraps the core class definition and pulls in the module definitions
    • jquery_wrapper.js - The jQuery wrapper
    • modules_enabled.js - A link through to all enabled modules, removing a mobule from this list will remove it from the build tabulator.js file
    • polyfill.js - Compatibility polyfills for IE11
  • /scss - The source scss files for the CSS style sheets, this folder contains one file per theme. for themes based on other frameworks like bootstrap there is a folder that contains the tabulator stylesheet and a variables file containing the SCSS from the other framework
• /dist - All files contained in this folder are automatically generated by gulp

Dist Files

The files located in the /dist folder are the generated files to be included in your projects. These files are automatically generated by gulp

Do Not Manually Change Dist Files
Do not make manual changes to files in the /dist folder, they will be overwritten when gulp is run

Pull Requests

If you are planning to make a Pull Request with your update, it is very important that you don't comit any changes to the files in the /dist folder as these will result in merge conflicts when pulling in your PR and will result in it being rejected.

Run Commands

When you are ready to build your code, there are a couple of npm commands available to you

Build Code

To run a one off build open a console window in the root folder of Tabulator and run the following command:

npm run build

This command will take all the files in the /src folder and build them into their distribution files in the /dist folder

Watch For Changes

While you are developing it can be helpful to have a live copy of the code, that you don't need to rebuild every time you make a change.

When using the watch command, gulp will watch your source code for changed (when you save a file) and will then automatically run the build command for you.

To run the watcher, open a console window in the root folder of Tabulator and run the following command:

npm run watch

This command will watch all the files in the /src folder and build them into their distribution files in the /dist folder when any of the files change