Version 6.3 Released!

Click to checkout the new features

Custom Build

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 Rollup Module Builder, 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.

Minimum Node Version
Due to the Rollup v4 library requiring Node JS v18 in order to run, you must be running on node version 18 or higher inorder to build custom versions of Tabulator

File Structure

Source Files

Tabulator's codebase is composed of a number of files located in the /src folder.

  • /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
      • /builds - Build files that structure each of the different types of dist file
        • esm.js - Builder for the tabulator_esm.js file
        • umd.js - Builder for the tabulator.js file
        • polyfill.js - Compatibility polyfills for IE11
        • jquery_wrapper.js - JQuery wrapper
      • /core - Source files for the core Tabulator framework
        • /renderers - Built-in vertical and horizontal renderers
        • /tools - Core tools used throughout the system
      • /modules - Sources files for each of the modules
    • /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 rollup

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 the Rollup Module Builder

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

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 dev command, rollup 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 dev

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 (ESM and CSS files only)

The default watcher can take a while to rebuild the all code, especially when it is rebuilding both the UMD and ESM versions of the JavaScript distributions. To help with this there are variations of the watcher command that will only generate a subset of the dist output to improve development/testing time.

Build CSS Only

If you are only making changes to the styling of the table then this command will only regenerate the CSS output, speeding up the watcher considerably.

npm run dev:css

Build ESM Only

If you are only making changes to the JavaScript and testing against the tabulator_esm.js file then this command will only regenerate the ESM file, speeding up the watcher considerably.

npm run dev:esm

Build UMD Only

If you are only making changes to the JavaScript and testing against the tabulator.js file then this command will only regenerate the UMD file, speeding up the watcher considerably. 
npm run dev:umd

Pull Requests

If you are planning to make a Pull Request with your update, it is very important that you DO NOT commit 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.

Donate