Easy Data Table Generator with jQuery and JSON - Tabulator

Easy Data Table Generator with jQuery and JSON - Tabulator
File Size: 268 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.

$("#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.

//minimum global width for a column
colMinWidth:"40px", 

//resizable columns
colResizable:true, 

//height of tabulator
height:false, 

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

//enable movable columns
movableCols:false, 

//enable movable rows
movableRows:false, 

//handle for movable rows
movableRowHandle:"<div style='margin:0 10%; width:80%; height:3px; background:#666; margin-top:3px;'></div><div style='margin:0 10%; width:80%; height:3px; background:#666; margin-top:2px;'></div><div style='margin:0 10%; width:80%; height:3px; background:#666; margin-top:2px;'></div>", 

//durrent system language
locale:"en-gb", 
langs:{},

//store cookie with column _styles
persistentLayout:false, 

//id for stored cookie", 
persistentLayoutID:"", 

//enable pagination
pagination:false, 

//size of pages
paginationSize:false, 

//element to hold pagination numbers
paginationElement:false, 

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

//pagination data sent to the server
paginationDataSent:{ 
  "page":"page",
  "size":"size",
  "sort":"sort",
  "sort_dir":"sort_dir",
  "filter":"filter",
  "filter_value":"filter_value",
  "filter_type":"fitler_type",
},

//pagination url string builder
paginator:false, 

//enable progressive rendering
progressiveRender:false, 

//block size for progressive rendering
progressiveRenderSize:200, 

//disance in px before end of scroll before progressive render is triggered
progressiveRenderMargin:200, 

//placeholder text to display in header filters
headerFilterPlaceholder: "filter column...", 

//Tool tip value
tooltips: false, 

//Tool tip for headers
tooltipsHeader: false, 

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

//store for initial table data if set at construction
data:false, 

index:"id",

//global default for sorting
sortable:true, 

//date format to be used for sorting
dateFormat: "dd/mm/yyyy", 

//defualt column to sort by
sortBy:"id", 

//default sort direction
sortDir:"desc", 

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

//starting state of group
groupStartOpen:true, 

//header layout function
groupHeader:function(value, count, data){ 
  return value + "<span style='color:#d00; margin-left:10px;'>(" + count + " item)</span>";
},

//row formatter
rowFormatter:false, 

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

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

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

//url for ajax loading
ajaxURL:false, 

//url for ajax loading
ajaxParams:{}, 

//ajax request type
ajaxType:"get", 

//show loader while data loading
showLoader:true, 

//loader element
loader:"<div class='tabulator-loading'>Loading Data</div>",

//loader element
loaderError:"<div class='tabulator-error'>Loading Error</div>", 

5. Callback functions.

rowClick:function(){},
rowDblClick:function(){},
rowAdded:function(){},
rowDeleted:function(){},
rowContext:function(){},
rowMoved:function(){},
rowUpdated:function(){},
rowSelectionChanged:function(){},

cellEdited:function(){},

colMoved:function(){},
colTitleChanged:function(){},

dataLoading:function(){},
dataLoaded:function(){},
dataLoadError:function(){},
dataEdited:function(){},

ajaxResponse:false,

dataFiltering:function(){},
dataFiltered:function(){},

dataSorting:function(){},
dataSorted:function(){},

renderStarted:function(){},
renderComplete:function(){},

pageLoaded:function(){},

localized:function(){},

tableBuilding:function(){},
tableBuilt:function(){},

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.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.