Pull Data From Google Sheet to HTML Table

नमस्‍कार दोस्‍तो,

इस ब्‍लॉग में हम आपको बहुत ही सरल भाषा में बतायेगें की किस प्रकार गुगल शीट के डेटा वेबसाईड में टेबल की फॉर्म में कैसे दिखा सकते है ा

अत आप निचे दिये गये दिशा निर्देशानुसार सिखकर अपनी गुगल शीट के डेटा को वेबसाईड में टेबल की फाॅर्म में शॉ कर सकते है ा

Pull Data From Google Sheet to HTML Table

In this blog we will tell you Pull Data From Google Sheet to HTML Table so read the complete blog carefully and learn Pull Data From Google Sheet to HTML Table according to given guidelines.

Step 1 :- Open Google Sheet

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 8 file Name Given Below

Code.gs

Index.html

JavaScript.html

Step 4 :- Click to Copy Below Code and Paste to Code.gs File

/* # CREATED BY: BPWEBS.COM # URL: https://www.bpwebs.com */ function doGet() { return HtmlService.createTemplateFromFile('Index').evaluate(); } //GET DATA FROM GOOGLE SHEET AND RETURN AS AN ARRAY function getData() { var spreadSheetId = "Paste your Google Sheet ID"; //CHANGE var dataRange = "Sheet1!A2:D"; //CHANGE var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange); var values = range.values; return values; } //INCLUDE JAVASCRIPT AND CSS FILES //REF: https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript function include(filename) { return HtmlService.createHtmlOutputFromFile(filename) .getContent(); } //Ref: https://datatables.net/forums/discussion/comment/145428/#Comment_145428 //Ref: https://datatables.net/examples/styling/bootstrap4

Step 5 :- Code.gs File Line No 12 Paste your Google Sheet ID

https://docs.google.com/spreadsheets/d/Google Sheet ID/edit#gid=0

Step 6 :- Click to Copy Below Code and Paste to Index.html File

<!DOCTYPE html> <html> <head> <base target="_top">  <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css"> <?!= include('JavaScript'); ?> </head> <body> <div class="container"> <br> <div class="row"> <table id="data-table" class="table table-striped table-sm table-hover table-bordered">  </table> </div> </div> </body> </html>

Step 7 :- Click to Copy Below Code and Paste to JavaScript.html File

Pull Data From Google Sheet to HTML Table

Pull Data From Google Sheet to HTML Table

In this blog we will tell you Pull Data From Google Sheet to HTML Table so read the complete blog carefully and learn Pull Data From Google Sheet to HTML Table according to given guidelines.

Step 1 :- Open Google Sheet

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 8 file Name Given Below

Step 4 :- Click to Copy Below Code and Paste to Code.gs File

Step 5 :- Code.gs File Line No 12 Paste your Google Sheet ID

Step 6 :- Click to Copy Below Code and Paste to Index.html File

Step 7 :- Click to Copy Below Code and Paste to JavaScript.html File

Step 8 :- Click to Deploy >> New Deployment >> Deploy >>

More Detail See Video :-

2 Comments

Donation and Support

Contact Form