Sheetrock.js 1.0 Example 5

Using DataTables

by Emmanuel Garcia

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://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap.min.css">
<table id="raw-table" class="table table-condensed table-striped"></table>

JavaScript

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

//  Load the entire sheet and then use DataTables to create a sortable, paginated table.

// We can't call DataTables right away because the data is fetched asynchronously. Instead, we wait for Sheetrock to emit a `sheetrock:loaded` event before calling `.DataTables()`.

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

// Load all hitters and format with DataTables.
$('#raw-table').sheetrock({
  url: mySpreadsheet,
  query: "select A,B,C,D,E,L order by L desc",
}).on('sheetrock:loaded', function () {
  $(this).DataTable();
});