How to display Google Sheets spreadsheets with jQuery?

- Andrés Cruz

En español

Example Download

Spreadsheets are increasingly used; With the emergence of cloud storage, it is one of the easiest things to be able to work with spreadsheets no matter where we are and from any device; An example of this versatility is offered by Google Sheets, with the jQuery Sheetrock plugin we can easily display spreadsheet data on any website.

The truth is that you don't embed a spreadsheet into a website, you simply copy the content of the rows and columns into an HTML table; In this post we will see how to incorporate this plugin into our website and several of its configurations.

We download the plugin from the following link and install it on our website along with a version of jQuery:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.sheetrock.min.js"></script>

jQuery Sheetrock Examples

For all cases, regardless of the configuration used, we will need a table where we can see the data from the spreadsheet:

<table id="statistics"></table>

Minimal jQuery Sheetrock Configuration

jQuery Sheetr Minimum ConfigurationThis is the minimum configuration that must be used to display the data associated with a spreadsheet:ock

$('#statistics').sheetrock({
  url: mySpreadsheet
});

Where mySpreadsheet is the path to our spreadsheet; To use a spreadsheet we first have to share the spreadsheet on Google Drive; By having our sheet open:

We share it by pressing the button located in the upper corner called "Share":

botón compartir

And we copy the URL:

diálogo compartir

Using SQL to compose data with jQuery Sheetrock

We can perform several operations through SQL:

Filters, indicating which columns we want to display based on a condition with the where clause:

$('#statistics').sheetrock({
  url: mySpreadsheet,
   sql: "select A,B,C where A = 'Andrés'",
});
NombreApellidoSueldo
AndrésCruz2000$
AndrésRamirez2200$

Sort, indicating by which column we want to sort the records:

$('#statistics').sheetrock({
  url: mySpreadsheet,
   sql: "select A,C,E order by E desc",
});
NombreSueldoOrden
Andrés2200$4
Juan2500$3
Erick1500$2
Andrés2000$1

Entre otras series de parámetros que podrás encontrar en la documentación oficial.

Example Download

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy