Version 6.3 Released!

Click to checkout the new features

Dependencies

Overview

The core of Tabulator, and the vast majority of its functionality has zero depencncies. This means you can set up the vast majority of tables without needing to include any other libraries in your project.

But there are a few occasions where a feature of the table may be reliant on an external dependency. In these cases Tabulator provides you with a couple of ways to import the dependency to your project.

Script Tags

You can import your dependency via script tags that will set it up as a global property on the window object. Tabulator knows where to find these and can load them in without any additional setup

<script type="text/javascript" src="https://my-dependency.com/dependency.js"></script>

Just make sure to include this script tag before you instantiate your Tabulator instance. Otherwise the functionality from the dependency will not be there when the table loads.

Setup Option

You can also choose to import the library into your project via an import or require statement.

import {MyDependency} from dependency

And then register the library with Tabulator with the dependencies object in the table setup options:

var table = new Tabulator("#example-table", {
    dependencies:{
        "ThatDependency":MyDependency,
    },  
});

The key used to reigster the dependency will depend on the library used. In most cases it should be the varaible name used by the library when it is set on the window object. This is covered in more detail on a case by case basis for each dependency below.

Sheet JS

The SheetJS Library is required to export and import Excel spreadsheets from the table. It can be registered with Tabulator in one of two ways

Script Tags

You can import the library via script tags that will set it up as a global property on the window object. Tabulator knows where to find these and can load them in without any additional setup

<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

Just make sure to include this script tag before you instantiate your Tabulator instance. Otherwise the functionality from the dependency will not be there when the table loads.

Setup Option

You can also choose to add the library to your project from npm and then import the library into your code via an import statement.

import * as XLSX from 'xlsx';

And then register the library with Tabulator with the dependencies object in the table setup options, this must be done against the XLSX key:

var table = new Tabulator("#example-table", {
    dependencies:{
        XLSX:XLSX,
    },  
});

JS PDF

The jsPDF Library is required to export PDF documents from the table. It can be registered with Tabulator in one of two ways. When using this library you wil also need to include the jsPDF-AutoTable Plugin as this adds the functionality needed to jsPDF to easily tender tables.

Script Tags

You can import the library via script tags that will set it up as a global property on the window object. Tabulator knows where to find these and can load them in without any additional setup

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js"></script>

Just make sure to include these script tags before you instantiate your Tabulator instance. Otherwise the functionality from the dependency will not be there when the table loads.

Setup Option

You can also choose to add the library to your project from npm and then import the library into your code via an import statment. You will then need to apply the plugin to jsPDF before you register it with the table

import jsPDF from 'jspdf'
import { applyPlugin } from 'jspdf-autotable'
applyPlugin(jsPDF)

You should then register the library with Tabulator with the dependencies object in the table setup options, this must be done against the jspdf key:

var table = new Tabulator("#example-table", {
    dependencies:{
        jspdf:jsPDF,
    },  
});

Luxon

The luxon.js is required to manipulate dates and times, the library is used in several formatters, sorters and editors. It can be registered with Tabulator in one of two ways

Script Tags

You can import the library via script tags that will set it up as a global property on the window object. Tabulator knows where to find these and can load them in without any additional setup

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>

Just make sure to include this script tag before you instantiate your Tabulator instance. Otherwise the functionality from the dependency will not be there when the table loads.

Setup Option

You can also choose to add the library to your project from npm and then import the library into your code via an import statement.

import { DateTime } from "luxon";

And then register the library with Tabulator with the dependencies object in the table setup options, this must be done against the DateTime key:

var table = new Tabulator("#example-table", {
    dependencies:{
        DateTime:DateTime,
    },  
});
Donate