JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script src="http://chriszarate.github.io/sheetrock/src/jquery.sheetrock.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<link rel="stylesheet" href="http://chriszarate.github.io/sheetrock/css/bootstrap-tables.css">
<h4>NL Home Run Leaders</h4>
<ol id="hr">
  <script id="hr-template" type="text/x-handlebars-template">
    <li>
      <strong>{{cells.First}} {{cells.Last}}</strong>,
      {{cells.Team}}, {{cells.HR}}
    </li>
  </script>
</ol>

CSS

body {
    padding: 1em;
}

JavaScript

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AlRp2ieP7izLdGFNOERTZW0xLVpROFc3X3FJQ2tSb2c#gid=0';

// Compile the Handlebars template for HR leaders.
var HRTemplate = Handlebars.compile($('#hr-template').html());

// Load top five HR leaders.
$('#hr').sheetrock({
  url: mySpreadsheet,
  sql: "select A,C,D,I order by I desc",
  chunkSize: 5,
  headersOff: true,
  rowHandler: HRTemplate
});