jlord · stodja · Feb 24, 2024 · Feb 24, 2024 · Feb 24, 2024 · Feb 24, 2024
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 # sheetsee-tables
 
-Sheetsee,js uses this module to make tables. With this module you can create tables with your spreadsheet data that are sortable, searchable and paginate-able.
+Sheetsee.js uses this module to make tables. With this module you can create tables with your spreadsheet data that are sortable, searchable and paginate-able.
 
 You'll need a placeholder `<div>` in your html, a `<script>` with a [Mustache.js](https://mustache.github.io) template and a `<script>` that tells Sheetsee to build the table.
 
@@ -40,7 +40,7 @@ Functions for you to use! There are just two, woo!
 
 You pass in an object containing:
 
-- `data` _array_ your data from Tabletop.js **required**
+- `data` _array_ your data from Papa Parse **required**
 - `pagination` _number_ how many rows displayed at one time, defaults to all
 - `tableDiv` _string_ the `<div>` `id` placeholder in your HTML, includes the hash `#` **required**
 - `filterDiv` _string_ the `<div>` `id` containing your `<input>` filter if using search, includes the hash `#` **required if using filter**
@@ -134,5 +134,5 @@ _JavaScript_
 </script>
 ```
 
-_[View Demo](http://jlord.us/sheetsee.js/demos/demo-table.html)_
+_[See Demos](https://github.com/jlord/sheetsee-tables/tree/master/demos)_
 _[Visit Site](http://jlord.us/sheetsee.js)_
diff --git a/index.js b/index.js
diff --git a/test/index.html → test/demo-table-json.html b/test/index.html → test/demo-table-json.html
@@ -2,27 +2,28 @@
 <html>
   <head>
     <meta charset='utf-8'>
-    <title>Sheetsee Table Test</title>
+    <title>Sheetsee Table JSON Demo</title>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
-    <script type='text/javascript' src='./sheetsee.js'></script>
-    <script type='text/javascript' src='./data.js'></script>
+    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
+    <script type='text/javascript' src='sheetsee.js'></script>
+    <script type='text/javascript' src='data.js'></script>
+    <link rel='stylesheet' type='text/css' href='style.css'>
   </head>
   <style>
-    body {font-family: 'Source Sans Pro', 'Helvetica Nueue', sans-serif; padding: 40px 100px;}
-    .tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px; cursor: pointer; text-align: left;}
     #Pagination {border-top: 4px solid #CCF4FF; margin: 10px 0px; padding-top: 10px; display: inline-block;}
     #Pagination a {cursor: pointer;}
     .no-pag {color: #acacac; border: none;}
     .no-pag:hover {color: #acacac;}
-    input {border: none; border-bottom: 1px solid #333; margin: 10px 0px; width: 200px; padding-bottom: 6px;}
+    input {border: none; border-bottom: 1px solid #333;margin: 10px 0px; width: 200px; font-size: 16px; padding-bottom: 6px;}
+    .tHeader {padding: 8px; cursor: pointer; text-align: left;}
   </style>
 
   <body>
     <div class="container">
-      <h1>All Pennies</h1>
+      <h1>Animals</h1>
       <input id="fullTableFilter" type="text" placeholder="filter by.."></input>
       <a href="#" class="clear">Clear</a>
-      <div id="fullTable"></div>
+      <div id="fullTable">Loading...</div>
   </div>
 
   <script id="fullTable_template" type="text/html">
@@ -35,6 +36,7 @@ <h1>All Pennies</h1>
   </script>
 
   <script type="text/javascript">
+
     document.addEventListener('DOMContentLoaded', function() {
       showInfo()
     })

diff --git a/test/demo-table-spreadsheets.html b/test/demo-table-spreadsheets.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <title>Sheetsee Table Google Spreadsheet Demo</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
+    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
+    <script type='text/javascript' src='sheetsee.js'></script>
+    <link rel='stylesheet' type='text/css' href='style.css'>
+  </head>
+  <style>
+    #Pagination {border-top: 4px solid #CCF4FF; margin: 10px 0px; padding-top: 10px; display: inline-block;}
+    #Pagination a {cursor: pointer;}
+    .no-pag {color: #acacac; border: none;}
+    .no-pag:hover {color: #acacac;}
+    input {border: none; border-bottom: 1px solid #333;margin: 10px 0px; width: 200px; font-size: 16px; padding-bottom: 6px;}
+    .tHeader {padding: 8px; cursor: pointer; text-align: left;}
+  </style>
+
+  <body>
+    <div class="container">
+      <h1>Penny Locals</h1>
+      <p><em><a href="https://docs.google.com/spreadsheets/d/0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc" target="_blank">spreadsheet</a></em><p>
+      <input id="fullTableFilter" type="text" placeholder="filter by.."></input>
+      <a class="clear">Clear</a>
+      <div id="fullTable">Loading...</div>
+    </div>
+
+    <script id="fullTable_template" 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>
+
+    <script type="text/javascript">
+      var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc/pub?output=csv'
+
+      function init() {
+        Papa.parse(public_spreadsheet_url, {
+          download: true,
+          header: true,
+          complete: showInfo
+        })
+      }
+
+      window.addEventListener('DOMContentLoaded', init)
+
+      function showInfo(results) {
+        var data = results.data
+        globalThis.tableOptions = {
+          "data": data,
+          "pagination": 10,
+          "tableDiv": "#fullTable",
+          "filterDiv": "#fullTableFilter"
+        }
+        Sheetsee.makeTable(tableOptions)
+        Sheetsee.initiateTableFilter(tableOptions)
+      }
+    </script>
+  </body>
+</html>
diff --git a/test/qa.md b/test/qa.md
diff --git a/test/style.css b/test/style.css
@@ -0,0 +1,80 @@
+.container {max-width: 800px; margin: 0 auto; overflow: auto;}
+
+h3 {padding-top: 18px;}
+h1 {font-size: 36px;}
+
+table {border-spacing: 0;}
+tbody tr:nth-child(odd) {background-color: #f3f3f3;}
+thead {text-align: left; font-family: Source Sans Pro, Arial, sans-serif;}
+td {min-width: 140px; vertical-align: top; padding: 8px;}
+td a {line-height: 24px;}
+tr {height: 50px;}
+ul, ol {text-indent: 0; margin: 0; padding-left: 20px;}
+ul li {padding-bottom: 6px; line-height: 22px;}
+
+footer {padding-top: 20px; margin-top: 60px; border-top: 4px solid #CCF4FF;  -webkit-column-count: 6; column-count: 6; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-count: 6; -moz-column-gap: 20px; height: 125px;}
+footer ul {list-style: none; padding-left: 0px; font-family: Source Sans Pro, Baskerville, Georgia, serif;}
+footer li {line-height: inherit; font-size: 12px;}
+footer h4 {font-size: 14px; -webkit-column-break-before: always; break-before: always; -moz-column-break-before: always; }
+footer h4 {margin-top: 0px;}
+footer a {border: none;}
+
+.half {max-width: 50%; display: inline-block; vertical-align: top;}
+.half:nth-child(odd) {padding-left: 20px;}
+
+img[alt=sheetseeimg] {
+  width: 400px;
+}
+
+.index p:first-of-type {
+  text-align: center;
+}
+
+/* older css */
+
+body {font-family: 'Source Sans Pro'; background: #fff; color: #535353;  border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 100px 20px; overflow: auto; }
+h1, h2, h3, h4, h5, h6 {font-family: Source Sans Pro, Arial, sans-serif;}
+h2 {margin-top: 40px;}
+
+img {width: 100%;}
+hr {border: 2px solid #CCF4FF;}
+
+p {font-size: 18px;}
+p a, a {color: #535353; text-decoration: none; padding-bottom: 0px; border-bottom: 2px #CCF4FF solid;}
+a:hover {color: #47CCFC;}
+a:active {color: #47CCFC;}
+small {padding: 10px 0px;}
+p, ol {line-height: 1.4;}
+text {font-size: 12px;}
+
+body.index p:nth-of-type(2) {font-size: 30px;}
+body.index table {border: 4px solid #CCF4FF; padding: 18px;}
+.home-link {color: #47CCFC;}
+
+pre {word-wrap: break-word; padding: 10px; background: #F8F8F8;}
+pre code {padding: 0;}
+code {font-family: "Source Code Pro", monospace; line-height: 1; font-size: 14px; background: #F8F8F8; color: #636363; font-weight: 400; padding: 2px 6px; border-radius: 2px;}
+h3 code {font-weight: bold; background: #CCF4FF; font-size: 19px;}
+.hljs {background: #F8F8F8; color: #494949; line-height: 1.4em;}
+
+.new-news {
+  color: #47CCFC;
+  font-size: 30px;
+  font-weight: bold;
+  border: 8px solid #47CCFC;
+  /*border-radius: 3px;*/
+  display: inline-block;
+  padding: 6px 16px;
+  margin-top: 40px;
+}
+
+/* funsies */
+::selection {background: #44FFB4;}
+::-moz-selection {background: #44FFB4;}
+
+/* Table */
+.ssExample table {min-width: 600px;}
+.tHeader::after {content: " \2193 \2191 "; font-size: 10px; padding-left: 3px; cursor: pointer;}
+
+/* Map Popup Style */
+.leaflet-popup-content h2 {margin-bottom: 4px; margin-top: auto;}