Sheetrock.js 1.0 Example 4

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.1/handlebars.min.js"></script>
<script src="https://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<h4>Team RBI</h4>
<ol id="team-rbi">
  <script id="team-rbi-template" type="text/x-handlebars-template">
    <li><strong>{{cells.TeamName}}</strong>, {{cells.TeamRBI}}</li>
  </script>
</ol>

JavaScript

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

// Let’s group some data. For a more straightforward template, we’ll 
// specify the labels we want Sheetrock to use when it returns the 
// data using the labels option.

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1qT1LyvoAcb0HTsi2rHBltBVpUBumAUzT__rhMvrz5Rk/edit#gid=0';

// Compile Handlebars template for team RBI leaders.
var RBITemplate = Handlebars.compile($('#team-rbi-template').html());

// Load top five team RBI leaders.
$('#team-rbi').sheetrock({
  url: mySpreadsheet,
  sql: "select A,sum(J) group by A order by sum(J) desc",
  chunkSize: 5,
  labels: ['TeamName', 'TeamRBI'],
  rowHandler: RBITemplate
});