Get new jQuery plugins just once a week



FavoriteLoadingAdd to favorites

January 23, 2015

watable | A jQuery table plugin with sorting, paging, filtering

Watable is a jQuery table plugin with sorting, paging, filtering, searching with customizable themes.

Options are:-

Name Type Default Required Description
actions json filter: false
columnPicker: false
No Adds a button you can add custom elements to, and/or toggle filter and columnPicker visibility.
Object structure:

actions: {
  filter: true, //Toggle visibility
  columnPicker: true, //Toggle visibility
  custom: [
    $('<a href="#">someLink</a>'),
    $('<a href="#">anotherLink</a>')
checkAllToggle boolean true No Enables the check-all toggle.
checkboxes boolean false No Enables rows to be checkable. This requires a column with the ‘unique’ property.
columnPicker boolean false No Enables the column picker.
data object No Initial data (so you don’t need to call setData if you have the data available)
dataBind boolean false No Updates table when data row changes are detected. If updated column is sorted/filtered on, the complete body is re-rendred, otherwise just the cell. Make sure to runPlatform.performMicrotaskCheckpoint();after modifying data to support browsers that does not yet support Object.observe.
Using WATable with AngularJS? See this directive example
debug boolean false No Prints some debugging info to the console.
filter boolean false No Enables filtering.
hidePagerOnEmpty bool false No Hides the pager when no rows.
pageSize int 10 No Initial pagesize
pageSizePadding boolean false No Pads with empty rows when pagesize is not met
pageSizes array 10,20,30,40,50,All No Pagesizes that should be possible to choose from.
Empty array removes button.
preFill bool false No Initially fills the table with empty rows (as many as the pagesize).
Useful while waiting for ajax request.
sortEmptyLast boolean true No Empty values will be shown last.
sorting boolean true No Enables sorting.
transition string ‘scroll’ No Transition when paging. Requires animation.css.
Possible are: bounce, fade, flip, rotate, scroll, slide
transitionDuration float 0.3 No Duration of transition in seconds.
types json placeHolder: see demo
filterTooltip: see demo
utc: false
format: ‘yyyy-MM-dd HH:mm:ss’
datePicker: true
decimals: 2 (0 for int’s)
No Sets various properties for each datatype.
Object structure:

types: {
  string: {
    placeHolder: "Jane Doe", //false for empty
    filterTooltip: "Type something..." //false to remove
  number: {
    //placeHolder: (as string),
    //filterTooltip: (as string),
    decimals: 2 //Decimal precision for floats
  date: {
    //placeHolder: (as string),
    //filterTooltip: (as string),
    utc: true, //Use without timezone
    format: 'yy/dd/MM', //See formats here
    datePicker: false
  bool: {
    //filterTooltip: (as string)
url string (empty) No Path to server to collect data.
If not set, data need to be set manually via method .setData.
urlData json (empty) No Any data thats needed on serverside, ex:

{ reportId: 15 }
urlPost bool false No Uses POST httpmethod instead of GET when calling webservice.

Created by Andreas Petersson



Watable jQuery plugin



Related posts:


To install using Bower
bower install watable

Watable jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever