As simple as it gets with only sorting and paging.

Hover over -icon in column for further explanation.

Filter on strings, numbers, bools and dates by typing into the fields (or by datepicker for dates).
If you hoover a filter field with your mouse, you'll see a tooltip with hints on how they work. (Yes...tooltips can be changed or turned off).
Prefix your filter with ! to get everything except your filter. Ex all but 10 to 20: !10..20
Prefix your filter with ? for regex filtering. Ex John and Jane Doe: ?John Doe|Jane Doe

Get the filtered rows

Eye candy when paging! Works with modern browsers only (CSS3 animations).



Add/remove columns on the fly with the columnPicker button.

Trigger a server update

Format columns and fields in any way you like. Filtering/sorting will not be affected.

Target specific rows by making them checkable/uncheckable.

Get the checked rows

Add custom elements to the actions button and/or toggle filter and columnPicker visibility.

Use tableCreated event to customize the look. Here's an image carousel with some stuff hidden.

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

.getData

Returns all data that was collected from server or via .setData method.

Parameter Type Default Description
checked bool false If true, checked rows are returned.
filtered bool false If true, filtered rows are returned.

.option

Get/Set options. If value is left out, it will act as a getter.

Parameter Type Default Description
option string The option you want to get or set.
value anything The new value you want to use.

.setData

Sets columns and rows.

Parameter Type Default Description
data json See "Data Structure" tab
skipCols bool false If true, columns wont be overwritten. This is convenient when you simply want to refresh the data but keep the same columns as before. This means that filters wont be touched as well as any columns you might have added/removed with the column picker.
resetChecked bool true If false, any previously checked rows wont be reset.

.update

Collects new data from server. This has no effect if data was set via .setData method.

Parameter Type Default Description
callback function Triggered after data has been collected..
skipCols bool false If true, columns wont be overwritten. This is convenient when you simply want to refresh the data but keep the same columns as before. This means that filters wont be touched as well as any columns you might have added/removed with the column picker.
resetChecked bool true If false, any previously checked rows wont be reset.
Event Arguments Description
tableCreated(data) data.table - the html table
this - the html table
Fires immediately each time the table has been created.
Use this event if you need to modify the table html.
rowClicked(data) data.event - the jQuery event
data.row - the underlying json row
data.column - the underlying json column
data.checked - true if checked
this - the clicked element
Fires when clicking a row.
Use this event to get the underlying object for the row.

Note.This requires a column with the 'unique' property.
columnClicked(data) data.event - the jQuery event
data.column - the underlying json column
data.descending - true if sorted descending
this - the clicked element
Fires when clicking a column.
pageChanged(data) data.event - the jQuery event
data.page - the new page index
this - the clicked element
Fires when manually changing page.
pageSizeChanged(data) data.event - the jQuery event
data.pageSize - the new pagesize
this - the clicked element
Fires when manually changing pagesize.

To feed the table it needs columns and rows. This is provided from either the server url, or manually via .setData method. A small setup with 2 columns and 2 rows could look like this:

(Besides rows and cols, you can provide any data that might be useful later on)

  {
    cols: {
      userId: {
        index: 1,
        type: "number"
      },
      name: {
        index: 2,
        type: "string"
      }
    },
    rows: [
      {
        userId: 1,
        name: "Batman"
      },
      {
        userId: 2,
        name: "Superman"
      }
    ]
  }
Name Type Required Description
decimals int No Sets and forces the decimal precision for all numbers.
This overrides option number type decimals.
filter string/bool No If string, sets as initial filter. false disables filtering.
filterTooltip string/bool No If string, text will be shown when hovering filter. false disable tooltip.
This overrides default text as well as option type filterTooltips.
format string No If provided, all rows will be formatted with this.
Use {0} as placeholder for row value. Ex:
<a href="/somewhere/user/{0}" class="myClass">{0}</a>
friendly string No Text or html to be used in column instead of column name.
hidden bool No Hides the column. Useful if you need the column but need to hide it to the user.
Can be made visible with the column picker.
index int Yes Position of the column in the table
placeholder string/bool No If string, sets as filter placeholder. false removes placeholder.
This overrides default text as well as option type filterTooltips.
sortOrder string No Initial sorting. Possible are "asc", "desc".
sorting bool No False disables sorting.
tooltip string No Text to be shown when hovering -icon. Use it to explain your column.
type string Yes Describes the content so sorting and filtering works properly.
Possible are "string", "number", "bool" and "date"(in milliseconds).
unique bool No Necessary if you need the rowClicked event or checkable rows.
Note! Make sure the values are really unique.
Name Type Required Description
<column>Format string No This works just as column format, but on a row level.
Reach into this property by naming it as the column and appending "Format".
Ex. row.age would be row.ageFormat.
This overrides the column format.
checkable bool No If false, row can't be checked.
Note! Don't use a column with this name.
checked bool No If true, row will be pre-checked.
Note! Don't use a column with this name.

jQuery 1.7+
Twitter Bootstrap 3+
DatePicker for Bootstrap - Required only if you need the datepicker (Not included in download package)
Animate.css - Required only if you need transitions (Not included in download package)

Browser support? Everything but IE6.
Keep in mind, things don't move fast in <IE9. But if you must support it... keep the datasets small.

Developed by Andreas Petersson
Email: apesv03@gmail.com
LinkedIn: http://www.linkedin.com/in/wootapa

Licensed under MIT
Current version: 1.09
GitHub: https://github.com/wootapa/watable

Download

Like it?
Me too! Help me stay up at night by buying me a few cup of coffee's.
...and don't forget to say hello at the message board.

Thanks!

1.09 Updated to bootstrap 3.1.1. This means dropping support for version 2.
Also note that bootstrap 3 dropped support for IE7. Bring it back with this polyfill (if you must)
Updated to jQuery 1.11.0
1.08 Added transitions when paging (for you who like some eye candy). See demo tab.
Added "!" negate operator to number filters as well. Ex, all but 10..20: !10..20
Added "?" regex operator to string filters. Ex, find John and Jane Doe: ?John Doe|Jane Doe
Added "sorting" option and column option so sorting can be turned off.
Added "sortEmptyLast" option. Empty values are by default shown last.
Added "checkAllToggle" option so you can hide the check-all toggle
Various bugfixes
Updated to jQuery 1.10.2
1.07 Added "checkboxes" option (required if you want checkable rows)
Changed "filter" column option to accept strings (so you can filter from start)
Added "placeHolder" to column option and to string, number, date type options
Added "filterTooltip" to column option and to string, number, date type options
Added IE7 and 8 support
Added unminified source
Added github repo (https://github.com/wootapa/watable)
Fields now renders empty if left undefined
Updated to jQuery 1.10.0 and bootstrap 2.3.2
1.06 Added new filter range operator ".."
Added "checked" argument to "rowClicked" event
Added "checkable" and "checked" to row option
Added "resetChecked" flag to "update" and "setData" methods
Added "decimals" to column option and to number type option
Added "columnClicked" event
Added "pageChanged" event
Added "pageSizeChanged" event
Updated download sample to jQuery 1.9.1 and bootstrap 2.3.1
1.05 Added "datePicker" to date type option.
You need to include Stefan Petre's excellent datepicker plugin for this to work. See dependencies for link.
1.04 Added "option" method.
Added column argument to rowClicked event.
Various bugfixes.
1.03 Added "actions", "hidePagerOnEmpty", "preFill" and "urlPost" option.
Deprecated init() method. Creation is now the more familiar $('selector').WATable();
More arguments to rowClicked event.
Commented the download sample a bit.
Various bugfixes.
1.02 Added "utc" and "format" to date type option.
1.01 Added "columnPicker" option.
1.0 Initial release.
comments powered by Disqus