Skip to content

Instantly share code, notes, and snippets.

@bpwebs

bpwebs/#Display Google Sheets data on a website using Google Apps Script and DataTables

Last active September 8, 2024 15:07
Show Gist options
  • Save bpwebs/eddd337abde5e11758d9aa46cd2e4dde to your computer and use it in GitHub Desktop.
Save bpwebs/eddd337abde5e11758d9aa46cd2e4dde to your computer and use it in GitHub Desktop.
Download ZIP
Raw
#Display Google Sheets data on a website using Google Apps Script and DataTables
#Display Google Sheets data on a website using Google Apps Script and JQuery DataTables
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Price List</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"/>
</head>
<body style="padding: 20px 40px;">
<h1>Pizza Price List</h1>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Pizza Name</th>
<th>Type</th>
<th>Size</th>
<th>Price</th>
<!-- Add more columns as needed based on your JSON structure-->
</tr>
</thead>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script>
new DataTable('#example', {
ajax: 'https://script.google.com/macros/s/AKfycbxJBAgeV78_4B1d-ektMWO2sZzA6JEUXgAcuchaDnXUABIb9264dVc9XI_qJLAsvjRyqw/exec',
columns: [
{ data: 'Pizza Name' },
{ data: 'Type' },
{ data: 'Size' },
{ data: 'Price' }
]
});
</script>
</body>
</html>
@bpwebs
Copy link
Author

bpwebs commented Sep 1, 2024

Visit the blog post at https://www.bpwebs.com/how-to-display-google-sheets-data-on-a-website/ for more details.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment