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
Eye candy when paging! Works with modern browsers only (CSS3 animations).
Add/remove columns on the fly with the columnPicker button.
Trigger a server updateFormat 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 rowsAdd 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.
With dataBinding you instantly see the changes you do on row properties/rows array.
Requires IE9+.
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 | Sets as initial filter. Use 1/0 for checked/unchecked bool's. false disables filtering. |
filterTooltip | string/bool | No | Text or html to be used when hovering filter instead of default tooltip. false disable tooltip.
This overrides 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:
|
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:
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-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:
|
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:
|
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:
|
urlPost | bool | false | No | Uses POST httpmethod instead of GET when calling webservice. |
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. |
Returns the row(and array index) related to the unique id.
Parameter | Type | Default | Description |
---|---|---|---|
uniqueId | int/string | The uniqie id of the row. |
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. |
Sets columns and rows.
Parameter | Type | Default | Description |
---|---|---|---|
data | json | See Basic Structure | |
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. |
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.index - the row index in rows array data.column - the underlying json column data.checked - true if checked (Modifiable) this - the clicked element |
Fires when clicking a row (requires a column with the unique property)
Use this event to get the underlying object for the row. Some tips: Use the index to splice out the row from the rows data array. Set data.checked=false to prevent a row from being checked (or vice versa) |
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.3
GitHub: https://github.com/wootapa/watable
1.10.3 | Fixed a performance problem with autogenerated string formatting with data-bind option.
Fixed a problem with incorrect index from .getRow method after deleting object with data-bind option. Fixed a problem with date/bool startup filters. Fixed missing call to rowClicked event when checking row. |
1.10.2 | Fixed bool data-binding issue (thanks strokyl).
Fixed invalid rendering of empty strings for date/numbers. Fixed a problem with checkbox checking/filtering. Fixed a problem with sorting and sortEmptyLast option. |
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 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 run this when done:
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. |
//inject service that holds the actual data.
.directive('myDirective', ['myService', function(myService){
return {
restrict: 'C',
link: function (scope, element, attrs) {
//Make sure to run Polymers dirty-checking when scope changes
scope.$watch(Platform.performMicrotaskCheckpoint);
//Create data object
var data = {
cols: {
userId: { index: 1, type: "number", friendly: "UserId", unique: true, sortOrder: "asc" },
name: { index: 2, type: "string", friendly: "Name" },
age: { index: 3, type: "number", friendly: "Age" }
},
//Get reference to service rows array.
rows: myService.getRows()
/*
Remember... this is a reference. So in myService, you can never again assign a new array (i.e. myService.rows=[]).
If you need to clear the array, just do myService.rows.length=0; (or splice/shift/pop or whatever you like)
*/
};
//Initiate WATable
var waTable = $(element).WATable({ dataBind: true }).data('WATable'); //Init with dataBind option
//Assign data
waTable.setData(data);
}
}
}]);