Module for creating tables with sheetsee.js
Switch branches/tags
Nothing to show
Clone or download
Latest commit 237915e Mar 29, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Cleanup Mar 16, 2017
.gitignore Ignore test bundle Mar 8, 2017 Update docs Mar 29, 2017
index.js Add TODO Mar 29, 2017
package.json Increase version Mar 29, 2017

Standard - JavaScript Style Guide


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 template and a <script> that tells Sheetsee to build the table.

Your HTML Placeholder

This is as simple as an empty <div> with an id.

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! It is a mustache template inside of <script> tags.

The id of the template should be the same as the HTML placeholder it corresponds to but with "_template" on the end.


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.

You can then style .tHeader in your CSS to make them look how you want.

You must also make the inner text of your table headers have the same capitalization as in your spreadsheet. It's ok to have spaces in your table header but don't use spaces in your spreadsheet headers.

  • Spreadsheet column name: 'PlaceName'
    • OK table header: 'Place Name'
    • Not OK table header: 'PLACENAME', 'placename'

Your 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().


Functions for you to use! There are just two, woo!


You pass in an object containing:

  • data array your data from Tabletop.js 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
  • templateID string the id of your <script> tag with the template, defaults to assume it's the same as tableDiv + _template.
var tableOptions = {
  "data": data,
  "pagination": 10,
  "tableDiv": "#fullTable",
  "filterDiv": "#fullTableFilter",
  "templateID": "fullTable_template"


If you do not put in a number for pagination, by default it will show all of the data at once. With pagination, HTML will be added at the bottom of your table for navigation, which you can style in your CSS:


<div id='Pagination' currentPage class='table-pagination'>
  Showing page {{currentPage}} of {{totalPages}}
  <a class='pagination-pre'>Previous</a><a class='pagination-next'>Next</a>


#Pagination {}
.pagination-next {}
.pagination-pre {}
.no-pag {}


If you want to have an input to allow users to search/filter the data in the table, you'll add an input to your HTML. Give it an id and if you want add placeholder text. You'll also need to add a 'clear' button using the .clear CSS class.

<input id="tableFilter" type="text" placeholder="filter by.."></input>
<a href="#" class=".clear">Clear</a>

Then you'll pass your tableOptions object into this method:




<input id="siteTableFilter" type="text"></input><a href="#" class=".clear">Clear</a>
<div id="siteTable"></div>


<script id="tableTemplate" type="text/html">
    <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>


<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var tableOptions = {
      "data": data,
      "pagination": 10,
      "tableDiv": "#siteTable",
      "filterDiv": "#siteTableFilter",
      "templateID": "siteTable_template"

View Demo Visit Site