¿Cómo mostrar hojas de cálculo de Google Sheets con jQuery?

Ver ejemplo Descargar fuente

Durante años he usado Google Sheets como una especie de backend ligero para proyectos web: listados, estadísticas, tablas de precios o datos que necesitaban actualizarse sin tocar código. En su momento, combinar Google Sheets con jQuery era casi trivial… hasta que Google cambió las reglas del juego.

Muchos tutoriales antiguos siguen circulando, pero hoy ya no funcionan o lo hacen a medias. En este artículo te explico cómo hacerlo correctamente ahora, qué ha cambiado y qué opciones siguen siendo válidas si quieres seguir usando jQuery.

Las hojas de cálculo son cada vez más utilizadas; con el surgimiento del almacenamiento en la nube resulta de los más sencillo poder trabajar con las hojas de cálculo sin importar donde estemos y desde cualquier dispositivo; un ejemplo de esta versatilidad la ofrece Google Sheets, con el plugin jQuery Sheetrock podemos mostrar los datos de las hojas de cálculo fácilmente en cualquier sitio web.

La verdad no es que incruste una hoja de cálculo en un sitio web, simplemente copia el contenido de las filas y columnas dentro de una tabla HTML; en esta entrada veremos cómo incorporar este plugin en nuestra web y varias de sus configuraciones.

Por qué Google Sheets sigue siendo una buena fuente de datos para la web

Google Sheets como backend ligero

Google Sheets sigue siendo una solución muy práctica cuando:

No necesitas una base de datos compleja
Los datos deben ser editables por personas no técnicas
Quieres actualizaciones inmediatas sin despliegues

En más de un proyecto lo he usado simplemente como fuente de datos, no como algo que se incrusta: la hoja vive en Google y la web consume y transforma esos datos.

Ventajas frente a bases de datos tradicionales

Acceso desde cualquier lugar
Control de versiones y permisos
Exportación directa a JSON
Coste cero para proyectos pequeños

Casos de uso reales

Rankings
Estadísticas
Directorios
Tablas informativas
Visualización de datos

Qué cambió en Google Sheets y por qué muchos ejemplos ya no funcionan

Fin de los feeds antiguos de Google Spreadsheets

Si usaste URLs como:

https://spreadsheets.google.com/feeds/list/...

Eso pertenecía a la API v3, hoy obsoleta.

Muchos ejemplos antiguos con $.getJSON() fallan simplemente porque Google cerró esos endpoints.

Problemas comunes al usar tutoriales antiguos

Errores 404 o 403
Respuestas vacías
Problemas de CORS
Código aparentemente correcto que nunca devuelve datos

Me he encontrado más de una vez depurando código que “siempre había funcionado”, hasta recordar que Google ya no ofrece esos feeds públicos.

Requisitos actuales para usar Google Sheets con jQuery

Hacer pública una hoja de cálculo (cuándo sí y cuándo no)

Para ejemplos simples:

Compartir → “Cualquiera con el enlace” → Ver

⚠️ Importante: no usar hojas públicas con datos sensibles.

Google Sheets API v4: conceptos básicos

Ahora el acceso pasa por la API oficial, que devuelve datos estructurados y estables.

Necesitas:

ID del spreadsheet
Rango de celdas
(Normalmente) una API Key
API Key y límites de uso

La clave:

Se crea en Google Cloud Console
Tiene límites, pero suficientes para proyectos pequeños
Puede restringirse por dominio

Cómo obtener datos de Google Sheets en JSON usando jQuery

Estructura de la URL con la API v4

Ejemplo de endpoint:

https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID/values/HOJA!A:C?key=API_KEY

Esto devuelve un JSON limpio y fácil de recorrer.

Petición AJAX con jQuery

Aquí jQuery sigue siendo perfectamente válido:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$.getJSON(url, function(response) {
 console.log(response.values);
});
</script>

Aunque hoy usaría fetch, muchos proyectos legacy siguen dependiendo de jQuery, y no hay problema en mantenerlo.

Manejo de CORS y errores comunes

La API oficial no tiene problemas de CORS
Si obtienes 403, revisa permisos o la API Key
Si no hay datos, revisa el rango solicitado

Mostrar datos de Google Sheets en una tabla HTML

Recorrer el JSON devuelto por la API

La respuesta incluye un array de filas:

response.values.forEach(function(row, index) {
 if(index === 0) return; // saltar encabezados
});

Construcción dinámica de filas y columnas

Un patrón clásico que sigo usando:

var html = '';
row.forEach(function(cell) {
 html += '<td>' + cell + '</td>';
});
$('#statistics').append('<tr>' + html + '</tr>');

Buenas prácticas de rendimiento

No pedir rangos gigantes
Cachear resultados si es posible
No reconstruir el DOM en cada iteración

¿Sigue siendo útil jQuery Sheetrock hoy?

Qué hacía bien Sheetrock

Cuando lo usé, Sheetrock simplificaba mucho:
Consultas tipo SQL
Transformación directa a tablas
Menos código repetitivo

Limitaciones actuales

Dependía de feeds antiguos
No está alineado con la API v4
Mantenimiento limitado

Cuándo usarlo y cuándo no

✔ Proyectos antiguos que ya lo usan
❌ Proyectos nuevos o a largo plazo

Hoy prefiero control directo de la API para evitar sorpresas.

Alternativas modernas si no quieres depender solo de jQuery

JavaScript nativo (fetch)

Más ligero y estándar:

fetch(url)
 .then(res => res.json())
 .then(data => console.log(data));

Librerías de visualización compatibles

Google Charts
Chart.js
DataTables

Cuándo tiene sentido migrar

Si estás modernizando el frontend
Si ya no necesitas jQuery para nada más
Si el proyecto va a crecer

Errores frecuentes al trabajar con Google Sheets y jQuery

Exponer datos sensibles
- Una hoja pública es visible para cualquiera con el enlace.
Usar hojas demasiado grandes
- Google Sheets no es una base de datos masiva.
Confiar en ejemplos desactualizados
- El error más común. Si ves feeds/list, desconfía.

Uso Legacy de jQuery sheetrock

Si aun así quieres usar este paquete para probar, te dejo el tutorial original.

Descargamos el plugin y lo instalamos dentro de nuestra web en conjunto con una versión de jQuery:

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

Ejemplos de jQuery Sheetrock

Para todos los casos, sin importar la configuración empleada, necesitaremos una tabla en donde podamos ver los datos de la hoja de cálculo:

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

Configuración mínima de jQuery Sheetrock

Esta es la mínima configuración que hay que emplear para mostrar los datos asociados a una hoja de cálculo:

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

En dónde mySpreadsheet es la ruta de nuestra hoja de cálculo; para usar una hoja de cálculo primero tenemos que compartir la hoja de cálculo en Google Drive; al tener abierta nuestra hoja:

La compartimos presionando el botón ubicado en la esquina superior llamado "Compartir":

Y copiamos la URL:

Uso de SQL para componer los datos con jQuery Sheetrock

Podemos realizar varias operaciones a través de SQL:

Filtros, indicando que columnas deseamos mostrar en base a una condición con la cláusula where:

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

Nombre	Apellido	Sueldo
Andrés	Cruz	2000$
Andrés	Ramirez	2200$

Ordenar, indicando por cual columna deseamos ordenar los registros:

$('#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

Preguntas frecuentes sobre Google Sheets con jQuery

¿Necesito siempre una API Key?
- Para la API v4, sí, salvo casos muy concretos.
¿Puedo usar hojas privadas?
- Solo con autenticación OAuth (no recomendable para ejemplos simples).
¿Es buena idea para producción?
- Para proyectos pequeños y medianos, sí. Para grandes volúmenes, no.

Conclusión: cuándo y cómo usar Google Sheets con jQuery en 2026

Google Sheets con jQuery sigue siendo viable, pero ya no es “copiar y pegar”.
Si entiendes los cambios de Google, usas la API correcta y limitas el alcance, sigue siendo una solución rápida, flexible y muy práctica.

Yo mismo lo sigo usando cuando necesito velocidad, simplicidad y control, sabiendo exactamente dónde están los límites.