In this post, I demonstrate how to display a Google Sheet Table in a Web App using Google Apps Script.
How to Video:
Video Notes:
- Legacy Apps Script Editor Used in Video
- Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets
- For Further Details on Deploying a Web App Click Here
- Templated HTML Documentation
- Sample Web App From Video
Code in Video:
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('DisplaySheet');
return htmlOutput.evaluate();
}
function getSheetData() {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName('Data');
var dataRange = dataSheet.getDataRange();
var dataValues = dataRange.getValues();
return dataValues;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Display Google Sheet Web App</h1>
<table border="1" cellpadding="5px" >
<?var tableData = getSheetData();?>
<?for(var i = 0; i < tableData.length; i++) { ?>
<?if(i == 0) { ?>
<tr>
<?for(var j = 0; j < tableData[i].length; j++) { ?>
<th><?= tableData[i][j] ?></th>
<? } ?>
</tr>
<? } else { ?>
<tr>
<?for(var j = 0; j < tableData[i].length; j++) { ?>
<td><?= tableData[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
<? } ?>
</table>
</body>
</html>
Related Posts



