update tables docs

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 `<div>` in your html, a `<script>` mustache template and a `<script>` that initiates the table.
 
-## Your HTML Placeholder `<div>`
-
-This is as simple as an empty `<div>` with an id. This id should match the script template id in the next section.
+## Your HTML Placeholder
 
-```HTML
-<div id="siteTable"></div>
-```
+This is as simple as an empty `<div>` with an id.
 
-## Your `<script>` Template
+## Your Template
 
-Your template is the mockup of what you'd like your table to look like and what content it should show. The style is up to you!
+Your template is the mockup of what you'd like your table to look like and what content it should show. The style is up to you! It is an HTML template inside of `<script>` tags.
 
 ### Sorting
 
 If you want users to be able to click on headers and sort that column, your template must include table headers with the class `tHeader`.
 
-*Example*
+You can then style `.tHeader` in your CSS to make them look how you want.
 
-_The variables inside the {{}} must match the column headers in your spreadsheet. They should be lowercase and remember spaces are omitted, so "Place Name" will become "placename"._
+## Your Script
 
-```HTML
-<script id="siteTable" type="text/html">
-    <table>
-    <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
-      {{#rows}}
-        <tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
-      {{/rows}}
-  </table>
-</script>
-```
+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 `<script>` Execution
-
-```javascript
-<script type="text/javascript">
-    document.addEventListener('DOMContentLoaded', function() {
-      var tableOptions = {
-                          "data": gData,
-                          "pagination": 10,
-                          "tableDiv": "#fullTable",
-                          "filterDiv": "#fullTableFilter"
-                          }
-      Sheetsee.makeTable(tableOptions)
-      Sheetsee.initiateTableFilter(tableOptions)
-    })
-</script>
-```
-
-To create another table, simply repeat the steps except for `initiateTableFilter()`
-
-```HTML
-<div id="secondTable"></div>
-<script id="secondTable"> // your table template here </script>
-<script>Sheetsee.makeTable(otherData, "#secondTable", 10)</script>
-```
-
-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
-<style>
-  #Pagination {background: #eee;}
-  .pagination-next, .pagination-pre {cursor: hand;}
-  .no-pag {color: #acacac;}
-</style>
+#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
 <span class="clear button">Clear</span>
 <span class="noMatches">no matches</span>
 ```
 
+## Example
+
+_HTML_
+
+```HTML
+<div id="siteTable"></div>
+<input id="siteTableFilter" type="text"></input>
+```
+
+_Template_
+
+```JavaScript
+<script id="tableTemplate" type="text/html">
+    <table>
+    <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
+      {{#rows}}
+        <tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
+      {{/rows}}
+  </table>
+</script>
+```
+
+_JavaScript_
+
+```javascript
+<script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', function() {
+      var tableOptions = {
+                          "data": gData,
+                          "pagination": 10,
+                          "tableDiv": "#siteTable",
+                          "filterDiv": "#siteTableFilter",
+                          "templateID": "tableTemplate"
+                          }
+      Sheetsee.makeTable(tableOptions)
+      Sheetsee.initiateTableFilter(tableOptions)
+    })
+</script>
+```
+
+To create another table, simply repeat the steps above (abreviated here below).
+
+_HTML_
+```HTML
+<div id="secondTable"></div>
+<input id="secondFilter" type="text"></input>
+```
+_Template_
+
+```JavaScript
+<script text="text/javascript" id="secondTable">
+  // Template here
+</script>
+```
+
+_JavaScript_
+
+```JavaScript
+<script>
+  var secondTableOpts = {} // the options
+  Sheetsee.makeTable(secondTableOpts)
+  Sheetsee.initiateTableFilter(secondTableOpts)
+</script>
+```
+
+Learn more about the things you can do with [ICanHaz.js](http://icanhazjs.com).
+
 _[View Demo](/demos/demo-table.html)_