<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript' src='sheetsee.js'></script>

<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>


<div class="container">
     <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">Student Number</th><th class="tHeader">Block</th><th class="tHeader">Percentage</th><th class="tHeader">Date</th></tr>
          {{#rows}}
            <tr><td>{{City}}</td><td>{{PlaceName}}</td><td>{{Year}}</td><td>{{Image}}</td></tr>
          {{/rows}}
      </table>
    </script>

    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function() {
        var URL = "[key]"
        Tabletop.init({key: URL, callback: showInfo, simpleSheet: true})
      })

      function showInfo (data) {
        var tableOptions = {
          "data": data,
          "tableDiv": "#fullTable",
          "filterDiv": "#fullTableFilter"
        }
        Sheetsee.makeTable(tableOptions)
        Sheetsee.initiateTableFilter(tableOptions)
      }
    </script>