Version 6.3 Released!

Click to checkout the new features
Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.3

jQuery Support

Overview

Just because the core code of Tabulator no longer need jQuery, it dosnt mean that we are leaving jQuery users out in the cold.

Tabulator now comes with a jQuery wrapper so that you can continue to use it almost exactly as you have in the past.

Dependencies

The jQuery wrapper is depedent on both the jQuery and jQuery UI libraries, you must have both included in your project before you include Tabulator and the wrapper in your code.

Install

If you want to instantiate Tabulator as a jQuery widget 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.js"></script>

Code Changes

On the whole you can then continue to use Tabulator exactly as you have in the past. The only thing that is changes is that anywhere you used to pass in a jQuery element to Tabulator, for example in the return of a formatter:

var customFormatter = function(cell, formatterParams){
  //cell - the cell component
  //formatterParams - parameters set for the column

  var output = $("<span>" + cell.getValue() + </span>");

  return output;
}

You will now need to return a DOM Node, which is really simple, you just need to get the first item in the jquery element using the [0] selector.

var customFormatter = function(cell, formatterParams){
  //cell - the cell component
  //formatterParams - parameters set for the column

  var output = $("<span>" + cell.getValue() + </span>");

  return output[0];
}

Documentation Changes

The documentation has now been changed to use vanilla JS in the examples, but it should be fairly easy to understand how to convert it back

Table Definition

Anywhere it shows the new way of instantiating a table:

var table = new Tabulator("#example-table", {
  //table setup options
});

You can use the old method:

$("#example-table").tabulator({
  //table setup options
});

Function Calls

Anywhere you see a function being called

table.getRow(1);

You can use the old method

$("#example-table").tabulator("getRow", 1);
Donate