jQuery Plugins › jQuery Table Plugins › jQuery Tabulator

Easy Data Table Generator with jQuery and JSON - Tabulator

File Size:	348 KB
Views Total:
Last Update:	04/18/2018 00:17:00 UTC
Publish Date:	12/20/2015 01:48:31 UTC
Official Website:	Go to website
License:	MIT

Demo Download

How to start using jQuery?

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.

$("#demo").tabulator({
  columns:[
  {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
data:[],

//array to hold data that is active in the DOM
activeData:[],

//array to hold currently selected rows
selectedRows:[], 

//is selection currently happening
selecting:false, 

//hold jQuery element for previously selected row to handle changing direction when selecting
selectPrev:[], 

//layout table widths correctly on first render
firstRender:true, 

//mouse drag tracker;
mouseDrag:false, 

//starting width of colum on mouse drag
mouseDragWidth:false, 

//column being dragged
mouseDragElement:false, 

//catch to prevent mouseup on col drag triggering click on sort
mouseDragOut:false, 

//column name of currently sorted column
sortCurCol:null,

//column name of currently sorted column
sortCurDir:null,

//field to be filtered on data render
filterField:null, 

//value to match on filter
filterValue:null, 

//filter type
filterType:null, 

//pagination page
paginationCurrentPage:1, 

//pagination maxpage
paginationMaxPage:1, 

//timer for progressiver rendering
progressiveRenderTimer:null, 

//initial fill of a progressive rendering table
progressiveRenderFill:false, 

//an array of all acutal columns ignoring column groupings
columnList:[], 

//list of frozen columns left
columnFrozenLeft:[], 

//list of frozen columns right
columnFrozenRight:[], 

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

// hold current locale text
lang:{}, 

//hold default locale text
defaultLang:{ 
  "columns":{
  },
  "pagination":{
    "first":"First",
    "first_title":"First Page",
    "last":"Last",
    "last_title":"Last Page",
    "prev":"Prev",
    "prev_title":"Prev Page",
    "next":"Next",
    "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.0 (2018-04-18)

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

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

2017-06-19

v3.1: fix setvalue behaviour

2017-06-10

added precision to money formatter

2017-06-05

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

2017-05-23

New text formatter to prevent HTML injections

2017-04-16

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

2017-04-13

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

2017-04-10

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

2017-04-08

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

2017-03-15

only override ajaxParams if they are passed to the setData function

2017-03-14

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

2017-02-28

fixed braket styling issue

2017-02-25

escape column title when generating CSV's

2017-02-20

fixed issue with row selection function

2017-02-13

added rownum formatter

2017-02-12

fixed typo in persistence config option name

2017-01-31

allow string or number values for index on updateRow and deleteRow

2017-01-29

fix issue with column resizing referenceing incorrect data attribute

2017-01-22

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

2017-01-21

added groupStartOpen option to change open states of row groups

2017-01-17

fix regression in row selection function

2017-01-15

added onDblClick event binding to column definitions

2016-12-26

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

2016-12-25

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

2016-12-20

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

2016-12-19

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

2016-12-18

added tableBuilding and tableBuild callbacks

2016-12-15

fixed issue with function declaration breaking on ie

2016-12-12

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

2016-12-11

added ajaxType setup option

2016-12-03

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

2016-11-29

fixed wrapping issue in column headers on resize
download function added

2016-11-28

fixed rendering glitch in updateLocaleText function

2016-11-17

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

2016-11-13

changed default column header vertical alignment to "top"

2016-11-07

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

2016-10-16

mutate data in updateRow function

2016-10-15

added accessor exentsion options

2016-10-10

refactored cell edit mutators and get data argument calls

2016-10-09

time formatter added

2016-10-07

Update tabulator.js

2016-10-04

improved money formatter to handle non numeric values

2016-09-14

fix bug with case sensitive header filters

2016-09-10

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

2016-08-20

js update

2016-08-14

editable column headers added

2016-08-12

fixed invertion of array push in addRow function

2016-08-11

polyfill added for Array.find method on IE

2016-07-27

fixed rendering bug on moved columns

2016-07-26

object scope now passed to sorters, formatters and editors

2016-07-04

Version updated to 2.3.0

2016-06-03

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

2016-05-12

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

2016-05-11

trigger appropriate UI response when setOption is called

2016-05-08

fixed dialog loading popup

2016-05-07

Updated Version to 2.1

2016-05-02

Updated Version to 2.0.1

2016-03-10

fixed missing function definition for _generateTooltip

2016-02-26

setData can now take optional parameter object

2016-02-10

deleteRow now updates groups on row deletion

2016-02-07

v1.9.0:allow column tooltips to override global tooltips

2016-02-04

dataEdited Event Added

2016-02-03

allow rowFormatter callback to replace row contents

2016-01-31

Custom filter functions added

2016-01-30

css fix in row render

2016-01-27

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

2016-01-25

bugfix for colMove

2016-01-23

Fixed fitColumns width bug

2016-01-22

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

2016-01-21

Added cssClass option for columns
Fixed group header rendering issue

2016-01-20

v1.7.0: Column Visibility Toggle Functions

2016-01-16

Bug fix - custom index with empty data

2016-01-15

Column Visibility Option Added

2016-01-13

Fixed double rowEdit Trigger

2016-01-11

multisort array handling added

2016-01-10

keyboard navigation of editors
tick editor added

2016-01-09

Formatter Parameters Added

2015-12-27

filter trigger events added

2015-12-24

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

2015-12-23

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.

Easy Data Table Generator with jQuery and JSON - Tabulator

How to use it:

Change logs:

Related jQuery Plugins

You Might Also Like

Add Your Review