As simple as it gets with only sorting and paging.

Hover over -icon in column for further explanation.

Filter on strings, numbers, booleans(checkboxes) and dates by typing into the fields (or optionally datepicker for dates).
If you hoover a filter field with your mouse, you'll see a tooltip with hints on how they work.
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.
You can add CSS classes on rows/columns/cells as well.

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.

See WATable auto update when pushing/popping rows directly on array, or modifying row values.
Requires IE9+.

Start simulation

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:

Always try to use the unique property on one column to get the full potential

{
  cols: {
    userId: {
      index: 1,
      type: "number",
      unique: true,
    },
    name: {
      index: 2,
      type: "string"
    }
  },
  rows: [
    {
      userId: 1,
      name: "Batman"
    },
    {
      userId: 2,
      name: "Superman"
    }
  ]
}
Name Type Required Description
cls string No List of of CSS classes to apply to all cells, ex "red,green,blue"
dateFormat string No If date, the format to be used.
This overrides option date type format. See formats here
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 rowFormat if you need a different format for every row)
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 header 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:
row.ageFormat = "<div class='comeClass'>{0} years</div>";
This overrides the column format.
<column>Cls string No List of CSS classes to apply to table cell, ex "red,green,blue".
Reach into this property by naming it as the column and appending "Cls".
Ex. row.age:
row.ageCls = "red,green,blue";
row-checkable bool No If false, row can't be checked.
row-checked bool No If true, row will be pre-checked.
row-cls string No List of CSS classes to apply to table row, ex "red,green,blue"
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 run Platform.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.

.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.
rendered bool false If true, rendered rows are returned.

.getRow

Returns the row(and array index) related to the unique id.

Parameter Type Default Description
uniqueId int/string The uniqie id of the row.

.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 (Modifiable)
this - the clicked element
Fires when clicking a row.
Use this event to get the underlying object for the row. (Tip! Prevent row from being checked by setting data.checked = false)

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.

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)

IE Support? Yes, IE9+. However, IE7/IE8 works if you remove last observe-js polyfill at bottom.
Keep in mind though, things don't move fast in <IE9. But if you must support it... keep the data small.

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

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

Download

Like it?
Help me not fall asleep by buying me a coffee or two!

Thanks!

1.10.1 Fixed some data-binding issues.
Added column option "cls" so you can set CSS classes on columns as well.
Changed row option naming from "row-class" to "row-cls" and "<column>Class" to "<column>Cls" (to be consistent with column "cls". Sorry for the mess).
Added "data" option (so you don't need to call setData method if you have it available).
1.10 Added "dataBind" option. See details below, and demo here.
Added "row-class" and "<column>Class" row options so you can set CSS classes on row/cell level.
Changed naming of row option "checkable" to "row-checkable" and "checked" to "row-checked".
Added "pageSizePadding" option. This pads with empty rows when pagesize is not met.
Added "dateFormat" column option.
Added "rendered" parameter to getData method so you can get only the rendered rows.
Added method "getRow" that returns the row related to a unique id. Ex, waTable.getRow(5);
You can now prevent rows to be checked/unchecked by setting "checked" true/false from rowClicked event.
Performance improvements
Updated to jQuery 1.11.2 and bootstrap 3.3.1

Data-Binding
I'll start by saying that IE7/IE8 will break with this version because of the dataBind polyfill. If this is important to you and you can't live without features in this version, then remove the observe-js polyfill at bottom of script.
Moving on...
From now on, WATable, with option dataBind:true will auto update whenever there's a change to the underlying rows array, ie pushing/popping rows or changing row values.
//This would update the name to Batman for row with unique id 5
waTable.getRow(5).row.name = "Batman";
//This would add and render the row
waTable.getData().rows.push({userId:5, name:"Batman"});
This is based on Object.observe, which is kind of high tech(ES7), so most browsers don't support it yet. At this time it's only Chrome 36+ and Opera 26+. However, until the future is here you'd want to support other browsers, and for that you this when done: run
Platform.performMicrotaskCheckpoint();
That piece of code is Polymers dirtychecking polyfill and will notify WATable about the changes.
If you're using AngularJS, here's a directive example.
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