Sheetrock.js 1.0 Example 3

by chriszarate

HTML

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.2/handlebars.min.js"></script>
<script src="https://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<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>

JavaScript

// Sheetrock.js 1.0 Example 3
// https://chriszarate.github.io/sheetrock/

// Let’s generate an ordered list by passing in a Handlebars template. 
// This time we’ll rank the top five players by home runs.

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1qT1LyvoAcb0HTsi2rHBltBVpUBumAUzT__rhMvrz5Rk/edit#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,
  query: "select A,C,D,I order by I desc",
  fetchSize: 5,
  rowTemplate: HRTemplate
});