Easy Data Table Generator with jQuery and JSON - Tabulator

Easy Data Table Generator with jQuery and JSON - Tabulator
File Size: 351 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Tabulator is a feature-rich jQuery plugin used for generating simple or complex data tables from any JSON data, with the following additional features:

  • JSON, array or AJAX data loading
  • Column sorting
  • Custom data formatting
  • Resizable columns
  • Auto scaling to fit data/element
  • Many theming options
  • Custom click and context Events
  • Callbacks at every stage of data processing and rendering
  • Data filtering.

How to use it:

1. Load the necessary jQuery and jQuery UI libraries in the html page.

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Just load the jQuery Tabulator plugin after jQuery library and we're ready to go.

<script src="tabulator.js"></script>

3. Generate a simple data table inside the container 'demo' from the JSON data you specify during initialization.

  {title:"Name", field:"name", width:200},
  {title:"Age", field:"age"},
  {title:"Gender", field:"gender"},
  {title:"Height", field:"height", width:80},
  {title:"Favourite Color", field:"col"},
  {title:"Date Of Birth", field:"dob"},
  {title:"Likes Cheese", field:"cheese"},

4. Default plugin options.

height: false, //height of tabulator

layout: "fitData", ///layout type "fitColumns" | "fitData"

layoutColumnsOnNewData: false, //update column widths on setData

fitColumns: false, //DEPRICATED - fit colums to width of screen;

columnMinWidth: 40, //minimum global width for a column

columnVertAlign: "top", //vertical alignment of column headers

resizableColumns: true, //resizable columns

resizableRows: true, //resizable rows

autoResize: true, //auto resize table

columns: [], //store for colum header info

data: [], //default starting data

tooltips: false, //Tool tip value

tooltipsHeader: false, //Tool tip for headers

initialSort: false, //initial sorting criteria

footerElement: false, //hold footer element

index: "id", //filed for row index

keybindings: [], //array for keybindings

downloadDataMutator: false, //function to manipulate table data before it is downloaded

addRowPos: "bottom", //position to insert blank rows, top|bottom

selectable: "highlight", //highlight rows on hover

selectableRollingSelection: true, //roll selection once maximum number of selectable rows is reached

selectablePersistence: true, // maintain selection when table view is updated

selectableCheck: function selectableCheck(data, row) {
  return true;
}, //check wheather row is selectable

headerFilterPlaceholder: false, //placeholder text to display in header filters

history: false, //enable edit history

locale: false, //current system language

langs: {},

virtualDom: true, //enable DOM virtualization

persistentLayout: false, //store column layout in memory

persistentSort: false, //store sorting in memory

persistentFilter: false, //store filters in memory

persistenceID: "", //key for persistent storage

persistenceMode: true, //mode for storing persistence information

persistentLayoutID: "", //DEPRICATED - key for persistent storage;

responsiveLayout: false, //responsive layout flags

pagination: false, //set pagination type

paginationSize: false, //set number of rows to a page

paginationElement: false, //element to hold pagination numbers

paginationDataSent: {}, //pagination data sent to the server

paginationDataReceived: {}, //pagination data received from the server

paginator: false, //pagination url string builder

ajaxURL: false, //url for ajax loading

ajaxParams: {}, //params for ajax loading

ajaxConfig: "get", //ajax request type

ajaxLoader: true, //show loader

ajaxLoaderLoading: false, //loader element

ajaxLoaderError: false, //loader element

ajaxFiltering: false,

ajaxSorting: false,

groupBy: false, //enable table grouping and set field to group by

groupStartOpen: true, //starting state of group

groupHeader: false, //header generation function

movableColumns: false, //enable movable columns

movableRows: false, //enable movable rows

rowFormatter: false,

placeholder: false,

5. Callback functions.

//table building callbacks

tableBuilding: function tableBuilding() {},

tableBuilt: function tableBuilt() {},

//render callbacks

renderStarted: function renderStarted() {},

renderComplete: function renderComplete() {},

//row callbacks

rowClick: false,

rowDblClick: false,

rowContext: false,

rowTap: false,

rowDblTap: false,

rowTapHold: false,

rowAdded: function rowAdded() {},

rowDeleted: function rowDeleted() {},

rowMoved: function rowMoved() {},

rowUpdated: function rowUpdated() {},

rowSelectionChanged: function rowSelectionChanged() {},

rowSelected: function rowSelected() {},

rowDeselected: function rowDeselected() {},

rowResized: function rowResized() {},

//cell callbacks

cellEditing: function cellEditing() {},

cellEdited: function cellEdited() {},

cellEditCancelled: function cellEditCancelled() {},

//column callbacks

columnMoved: false,

columnResized: function columnResized() {},

columnTitleChanged: function columnTitleChanged() {},

columnVisibilityChanged: function columnVisibilityChanged() {},

//HTML iport callbacks

htmlImporting: function htmlImporting() {},

htmlImported: function htmlImported() {},

//data callbacks

dataLoading: function dataLoading() {},

dataLoaded: function dataLoaded() {},

dataEdited: function dataEdited() {},

//ajax callbacks

ajaxRequesting: function ajaxRequesting() {},

ajaxResponse: false,

ajaxError: function ajaxError() {},

//filtering callbacks

dataFiltering: false,

dataFiltered: false,

//sorting callbacks

dataSorting: function dataSorting() {},

dataSorted: function dataSorted() {},

//grouping callbacks

groupToggleElement: "arrow",

groupClosedShowCalcs: false,

dataGrouping: function dataGrouping() {},

dataGrouped: false,

groupVisibilityChanged: function groupVisibilityChanged() {},

groupClick: false,

groupDblClick: false,

groupContext: false,

groupTap: false,

groupDblTap: false,

groupTapHold: false,

//pagination callbacks

pageLoaded: function pageLoaded() {},

//localization callbacks

localized: function localized() {},

//validation has failed

validationFailed: function validationFailed() {},

//history callbacks

historyUndo: function historyUndo() {},

historyRedo: function historyRedo() {}

6. Global settings for jQuery UI widget.

//array to hold data for table

//array to hold data that is active in the DOM

//array to hold currently selected rows

//is selection currently happening

//hold jQuery element for previously selected row to handle changing direction when selecting

//layout table widths correctly on first render

//mouse drag tracker;

//starting width of colum on mouse drag

//column being dragged

//catch to prevent mouseup on col drag triggering click on sort

//column name of currently sorted column

//column name of currently sorted column

//field to be filtered on data render

//value to match on filter

//filter type

//pagination page

//pagination maxpage

//timer for progressiver rendering

//initial fill of a progressive rendering table

//an array of all acutal columns ignoring column groupings

//list of frozen columns left

//list of frozen columns right

//loader blockout div
loaderDiv: $("<div class='tablulator-loader'><div class='tabulator-loader-msg'></div></div>"), 

// hold current locale text

//hold default locale text
    "first_title":"First Page",
    "last_title":"Last Page",
    "prev_title":"Prev Page",
    "next_title":"Next Page",

7. Events.

  • dataLoading: Data is being loaded (from string, array or AJAX source)
  • dataLoadError: There is has been an error loading data from an AJAX source
  • renderStarted: Table is has started to render
  • renderComplete: Table is has finished being rendered
  • sortStarted: Table has started sorting
  • sortComplete: Table has finished sorting
  • filterStarted: Table Filter has started
  • filterComplete: Filter has been applied to table

Change logs:

v3.5.3 (2018-06-25)

  • fix nested row group collapse in classic render mode
  • remove unneeded console.log

v3.5.2 (2018-05-20)

  • match pagination element style to bootstrap element style for bootstrap 

v3.5.1 (2018-05-19)

  • fix scope issue on navigation functions
  • remove header filter input type to search conversion on microsoft browsers as they do not corretly implement the clear X button

v3.5.0 (2018-04-22)

  • prevent selection of the same row more than once
  • Fixed missing index scope issue on row deletion with history mode enabled
  • Fix issues with bootstrap 4 row styling not working correctly with row selection enabled
  • Unrestrict which attribulat values can be set on html table headers and parsed into Tabulator
  • Prevent cell height being shorter than row height

v3.4.6 (2018-03-28)

  • set correct max and min attributes on progress formatter to allow editor to correctly set boundries
  • prevent infinite loop in cell focus when programatically triggering cell edit
  • resolve merge conflicts

v3.4.5 (2018-03-23)

  • prevent issues in using a single column definition object between multiple tables

v3.4.4 (2018-03-14)

  • fix regresion in localized text loading
  • ensure frozen rows are correclt initialize if they have not been rendered yet

v3.4.3 (2018-02-24)

  • Rendering Performance
  • Column Layout and Resizing
  • Grouped Row Updates
  • Persistent Configuration
  • Resizable Rows
  • Validator Updates
  • Column Calculation Improvements
  • Editing Updates
  • Sorter Updates
  • Filter Updates
  • Formatting Updates
  • History Extension Updates
  • Row Position Informaton
  • HTML Output
  • General System Tweaks
  • Ensure that componets are correctly generated for updateOrAddRow function
  • Fix issues with progress bar formatter, it row respects the column "align" property, and the percentage scalling is now accurate
  • Fix scrollTo bug when scrolling to end of table when rows available are less that the virtual dom buffer size

v3.4.2 (2018-02-19)

  • Trigger header tooltip update on mouse enter
  • Fix issue with unreachable return statments in null handling in number and array sorters
  • Set tanle height before choosing render mode

v3.4.1 (2018-02-16)

  • Fix regression with scrollTo Row functionality
  • Allow local pagination with remote data
  • Add tabulator-field attribute to the column header elements

v3.4.0 (2018-02-12)

  • Fix default styling on select editor

v3.3.3 (2018-01-17)

  • remove erronious initialization of keybindings array
  • fix order of magnitude error in left margin of 5th level group element

v3.3.2 (2017-12-26)

  • prevent "undefined" in blank table headers for getHTML function
  • fixed scoping issue on variable in html import extension

v3.3.1 (2017-10-13)

  • fix column header sort order in ajaxSorting mode
  • keep horizontal scroll in same position after header filter

v3.3.0 (2017-10-08)

  • New Column Layout System
  • Input Validation
  • Updated Group Functionality
  • Multi Column Header Sort
  • Column Calculations Updates
  • Ajax Updates
  • Ajax Sorting and Filtering
  • Filter Function Updates
  • Select All Filtered Rows
  • Insert New Data Anywhere In Table
  • Component Obeject Updates
  • Pagination Updates
  • Format Column Header Titles
  • Custom Download Column Titles
  • Export table data to HTML table
  • General System Tweaks
  • make row handles unselectable
  • Correctly add group header visibility classes to header when virtual DOM is disabled
  • prevent divide by zero error in fitColumns layout function

v3.2.2 (2017-09-18)

  • prevent memory leak on row reinitialization
  • fix self scope issue in column hide and show function
  • fix missing return in getPAge and getPageMax functions
  • fix issue with column header tooltip generation from function
  • added getField function to header editor cell wrapper object

v3.2.1 (2017-08-06)

  • ensure that sum calc only deals with numbers, added concat calc to join strings
  • prevent memory leak on row reinitialization

v3.2 (2017-07-28)

  • ensure zeros are trimmed from precision
  • ensure zeros ave trimed from avg calc result
  • ensure movable rows and groupd rows work correctly togeather
  • fix typo in filter_type

v3.1.5 (2017-07-16)

  • replace page up/down and home and end keybindings to allow for better table control accross browsers
  • Revert "added touch events to cells and rows"

v3.1.4 (2017-07-09)

  • removed timeout from initial dataload

v3.1.2 (2017-07-02)

  • remove unessisary console.log

v3.1.1 (2017-06-28)

  • prevent hidden tables from breaking the virtual render and force the redar function to redraw all elements when the second parameter is true
  • fix issue in row sort refresh function
  • return cell component instead of cell from row.getCell() function
  • fix issue in mutator binding on cell change
  • fix custom header filter element binding


  • v3.1: fix setvalue behaviour


  • added precision to money formatter


  • changeheader filter text type inputs to search type inputs to allow for clearing of search data


  • New text formatter to prevent HTML injections


  • fix remote progressive rendering scrolling issue and async load problems
  • prevent clicks on header filters propagating to table headers


  • added tabulator-row-editing class to rows currently being edited


  • optimised header click event bindings
  • handle column group visibility on column deletion
  • adjust for vertical scrollbar when using fitColumns mode


  • fix row indexing change on row redraw
  • fix issue parsing in attribute names on IE


  • only override ajaxParams if they are passed to the setData function


  • addColumn, handle field and index lookups
  • prevent minWith from causing render issues in responsive mode


  • fixed braket styling issue


  • escape column title when generating CSV's


  • fixed issue with row selection function


  • added rownum formatter


  • fixed typo in persistence config option name


  • allow string or number values for index on updateRow and deleteRow


  • fix issue with column resizing referenceing incorrect data attribute


  • frozen column functionality added
  • convert arrays and objects to csv safe string when downloading


  • added groupStartOpen option to change open states of row groups


  • fix regression in row selection function


  • added onDblClick event binding to column definitions


  • added getSelectedData function
  • initialize all arrays on table construction to prevent inter-table data transfer


  • changed tolerance mode on column sorter to allow for smoother column reordering


  • added momentum scrolling on tableHolder element
  • set correct aria-sort value when sortBy option set


  • Fixed issue with checkbox header filter not reading values of false
  • Stylesheet fix for overflowing column headers on ie


  • added tableBuilding and tableBuild callbacks


  • fixed issue with function declaration breaking on ie


  • fixed issue with arrays passed by reference when not set in object constructor


  • added ajaxType setup option


  • added update parameter to _getAjaxData, _parseData and _parsePageData to allow addition to existing data set as well as overriting via ajax request;


  • fixed wrapping issue in column headers on resize
  • download function added


  • fixed rendering glitch in updateLocaleText function


  • mutators now only update a field if it has been defined in the row being mutated


  • changed default column header vertical alignment to "top"


  • v2.8.0: update html table parser to pull in full cell html not just texxt
  • fixed text wrapping issues in column header


  • mutate data in updateRow function


  • added accessor exentsion options


  • refactored cell edit mutators and get data argument calls


  • time formatter added


  • Update tabulator.js


  • improved money formatter to handle non numeric values


  • fix bug with case sensitive header filters


  • styling for moving rows moved to tabulator-row-moving css
  • standardised callback naming conventions


  • js update


  • editable column headers added


  •   fixed invertion of array push in addRow function


  • polyfill added for Array.find method on IE


  • fixed rendering bug on moved columns


  • object scope now passed to sorters, formatters and editors


  • Version updated to 2.3.0


  • Optimised Column render and cookie save on setColumns
  • input validation added to setColumns

v2.2.0 (2016-05-17)

  • added pointer to selectable rows
  • getPage function and pageLoaded callback added
  • fixed scrolling issues on non fixed height tables
  • reordered functions into logical sequence
  • fixed function scope issue
  • added tooltipsHeader option


  • moved movable row handle styling to CSS and fixed rendering glitch with handle
  • moved group header span styling to css


  • trigger appropriate UI response when setOption is called


  • fixed dialog loading popup


  • Updated Version to 2.1


  • Updated Version to 2.0.1


  • fixed missing function definition for _generateTooltip


  • setData can now take optional parameter object


  • deleteRow now updates groups on row deletion


  • v1.9.0:allow column tooltips to override global tooltips


  • dataEdited Event Added


  • allow rowFormatter callback to replace row contents


  • Custom filter functions added


  • css fix in row render


  • v1.8.1: rowAltBackgroundColor parameter added to control alternate row background colours


  • bugfix for colMove


  • Fixed fitColumns width bug


  • Removed unnecessary z-index and refactored table element styling
  • Fixed column width resizing on non integer table widths


  • Added cssClass option for columns
  • Fixed group header rendering issue


  • v1.7.0: Column Visibility Toggle Functions


  • Bug fix - custom index with empty data


  • Column Visibility Option Added


  • Fixed double rowEdit Trigger


  • multisort array handling added


  • keyboard navigation of editors
  • tick editor added


  • Formatter Parameters Added


  • filter trigger events added


  • Data Filter Functions Added
  • Cell formatting now re-applied after editing


  • alphanumeric sorter added


This awesome jQuery plugin is developed by olifolkerd. For more Advanced Usages, please check the demo page or visit the official website.