diff --git a/docs/sheetsee-tables.md b/docs/sheetsee-tables.md index 26c3a3b3..d83de1e0 100644 --- a/docs/sheetsee-tables.md +++ b/docs/sheetsee-tables.md @@ -1,68 +1,28 @@ # Sheetsee-tables -see: [jlord.github.io/sheetsee.js](jlord.github.io/sheetsee.js) - With this module you can create tables of your data that are sortable, searchable and paginate-able. You'll need a placeholder `
` in your html, a ` -``` +You'll want to set your table options and pass them into `Sheetsee.makeTable()`. If you want to add a search/filter, pass your options into `Sheetsee.initiateTableFilter()` -#### Your ` -``` - -To create another table, simply repeat the steps except for `initiateTableFilter()` - -```HTML -
- - -``` - -Learn more about the things you can do with [ICanHaz.js](http://icanhazjs.com). +## Funtions ### Sheetsee.makeTable(tableOptions) @@ -81,7 +41,6 @@ var tableOptions = { "tableDiv": "#fullTable", "filterDiv": "#fullTableFilter", "templateID": "fullTable" - } Sheetsee.makeTable(tableOptions) ``` @@ -102,11 +61,9 @@ _HTML_ _CSS_ ```CSS - +#Pagination {background: #eee;} +.pagination-next, .pagination-pre {cursor: hand;} +.no-pag {color: #acacac;} ``` ## Table Filter/Search @@ -127,9 +84,77 @@ Sheetsee.initiateTableFilter(tableOptions) It will connect that input to your data as well as inject this HTML for a button, which you can style yourself in your CSS: + ```HTML Clear no matches ``` +## Example + +_HTML_ + +```HTML +
+ +``` + +_Template_ + +```JavaScript + +``` + +_JavaScript_ + +```javascript + +``` + +To create another table, simply repeat the steps above (abreviated here below). + +_HTML_ +```HTML +
+ +``` +_Template_ + +```JavaScript + +``` + +_JavaScript_ + +```JavaScript + +``` + +Learn more about the things you can do with [ICanHaz.js](http://icanhazjs.com). + _[View Demo](/demos/demo-table.html)_