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":
And we copy the URL:
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'",
});| Nombre | Apellido | Sueldo |
|---|---|---|
| Andrés | Cruz | 2000$ |
| Andrés | Ramirez | 2200$ |
Sort, indicating by which column we want to sort the records:
$('#statistics').sheetrock({
url: mySpreadsheet,
sql: "select A,C,E order by E desc",
});| Nombre | Sueldo | Orden |
|---|---|---|
| Andrés | 2200$ | 4 |
| Juan | 2500$ | 3 |
| Erick | 1500$ | 2 |
| Andrés | 2000$ | 1 |
Entre otras series de parámetros que podrás encontrar en la documentación oficial.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter