Welcome to the Comprehensive Guide to Tabletop API
If you are looking to integrate interactive tables into your web applications, the Tabletop API is a powerful tool you should consider. Leveraging this API can help you fetch and display Google Sheets data on your site or app with ease. In this article, we will walk you through the basics of Tabletop and provide several API usage examples.
Introduction to Tabletop API
The Tabletop API is an open-source library designed to help developers create dynamic tables using Google Spreadsheet data. By using this API, you can turn any Google Sheet into an interactive table in your web application, providing real-time updates and seamless data management.
How to Include Tabletop in Your Project
To start using Tabletop, you need to include the library in your project. You can do this by adding the following script tag to your HTML file:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.3/tabletop.min.js"></script>
Initializing Tabletop
After including the script, you can initialize Tabletop with your Google Spreadsheet URL. Here’s a basic example:
<script type="text/javascript">
function init() {
Tabletop.init({
key: 'https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/pubhtml',
callback: function(data, tabletop) {
console.log(data);
},
simpleSheet: true
});
}
window.addEventListener('DOMContentLoaded', init);
</script>
Fetching Data from Google Sheets
Once Tabletop is initialized, you can fetch data quickly. Here is how you can fetch and log the data:
<script type="text/javascript">
function fetchData() {
Tabletop.init({
key: 'https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/pubhtml',
callback: function(data, tabletop) {
console.log(data);
displayData(data);
},
simpleSheet: true
});
}
function displayData(data) {
var container = document.getElementById('data-container');
data.forEach(function(item) {
var div = document.createElement('div');
div.innerHTML = item.name + ' - ' + item.age;
container.appendChild(div);
});
}
window.addEventListener('DOMContentLoaded', fetchData);
</script>
<div id="data-container"></div>
Additional API Examples
Sorting Data
<script type="text/javascript">
function sortData() {
Tabletop.init({
key: 'https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/pubhtml',
callback: function(data, tabletop) {
data.sort(function(a, b) {
return a.age - b.age;
});
displayData(data);
},
simpleSheet: true
});
}
window.addEventListener('DOMContentLoaded', sortData);
</script>
Filtering Data
<script type="text/javascript">
function filterData() {
Tabletop.init({
key: 'https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/pubhtml',
callback: function(data, tabletop) {
var filteredData = data.filter(item => item.age > 20);
displayData(filteredData);
},
simpleSheet: true
});
}
window.addEventListener('DOMContentLoaded', filterData);
</script>
Building a Simple App using Tabletop
Let’s build a simple web app that displays data from a Google Sheet using Tabletop API. The below example demonstrates how to use the API to display a table of users.
<!DOCTYPE html>
<html>
<head>
<title>User Data</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.3/tabletop.min.js"></script>
<script type="text/javascript">
function init() {
Tabletop.init({
key: 'YOUR_GOOGLE_SHEETS_URL',
callback: showInfo,
simpleSheet: true
});
}
function showInfo(data) {
var table = '<table><tr><th>Name</th><th>Age</th></tr>';
data.forEach(function(item) {
table += '<tr><td>' + item.name + '</td><td>' + item.age + '</td></tr>';
});
table += '</table>';
document.getElementById('data-output').innerHTML = table;
}
window.addEventListener('DOMContentLoaded', init);
</script>
</head>
<body>
<div id="data-output"></div>
</body>
</html>
And there you have it! Your Google Sheets data is now displayed in a user-friendly table format on your web page.
Hash: dd7a47c0c9984e925d66522586ac7d7a36c444b192f9abf7bd580f44bfd4add2
