From Google Sheets to HTML table - importing and displaying data

[@Mdbootstrap]

I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video! I don't run ads on tutorials - the only value I get is your engagement in the MDB community. So if you would like to show your support: - Encourage more people to Keep Coding ---> Send this video to one person - Stay tuned for new content ---> Subscribe & ring the bell In the description, you will find links to some useful, free resources: 📥 Download Material Design for Bootstrap - FREE open-source UI KIT 🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course) 🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall) ⭐Support the creation of open-source packages with a STAR on GitHub 👪 If you have any questions - don't hesitate to ask on our Facebook group Thank you for your support!

[@Suchit_Plays_Song]

I want add changes without going in Google sheet directly add changes from web how can I do that

[@taoanhfree]

thank you. But can it be more customized? I'm going to make the image link, it's in

[@gercocoetzee4239]

Thank you for this very insightful video! One question: I inserted an image in the spreadsheet. It is not showing on the webpage. Can an image be shown in the spreadsheet on the webpage as well?

[@howe-simracing]

Did you get any answer on your question or did you find out a solution of this? I have the same problem, too. It would be great to hear from you.

[@arron7993]

@@howe-simracing did any of u guys got a solution for this?

[@mochnacki78]

Hi, is it possible to add id for each cell?

[@chrisgrippo371]

Is it possible to do this but keep any hyperlinks that are in the cells in the spreadsheet?

[@Mdbootstrap]

Not in this solution, you would need a bit of custom code

[@petter-berg]

@@Mdbootstrap need this aswell

[@josephhicks6424]

No matter what I do, The easyData page does not populate. I confirmed the API and Sheet ID. Any other ideas why this wouldn't work? What are the other big areas of possible user error to review?

[@michaelrjrobinson]

I to am having the same issue. Followed the video exactly the same and having no luck with it.

[@bozicneable]

Hallo, great tutorial. I'm trying to show two sheets from one google sheet document in two tables on one html page and everything work great on Windows and Android but not on IOS. IOS just showing last table. Any idea?

[@dustinkratochwill5531]

Is there a way to skip a column in the table? For example, if I set the range as Sheet2!A:C and I want to skip column D and then do Sheet2!E:G, is there any way I can do that?

[@manalfaiz9515]

Hi, Thank you for the video. Do you know the JS code so that the html table value (user input)can update the data in the google sheets. So sorry, I'm new to coding and i cannot find any example related to this. Thank you.

[@dr-mnizam]

kzbin.info/www/bejne/e4XLkqiZeaeMbMk

[@sonaliabewardana5771]

How to add image from google sheet to html page

[@Mdbootstrap]

Publish the Google Sheet: Open your Google Sheet. Go to "File" > "Publish to the web..." In the dialog that appears, select the sheet containing the image or data you want to display in your HTML page. Choose the format as "Web page" and set any other options you prefer. Click the "Publish" button. Copy the generated link (URL) provided in the dialog. Create your HTML page: Create an HTML file using a text editor or an integrated development environment (IDE). Add HTML code: Inside your HTML file, you can use an tag to display the image from your Google Sheet. Insert the following code where you want the image to appear in your HTML: CODE: Replace "URL_OF_PUBLISHED_GOOGLE_SHEET_IMAGE" with the actual URL you copied in step 1. Example: Make sure to provide an appropriate alt attribute with a brief description of the image for accessibility purposes. Save and view your HTML file: Save your HTML file. Open it in a web browser to see the image from your Google Sheet displayed on the page. Keep in mind that the URL from Google Sheets might change or expire, so it's essential to ensure that the published sheet or image remains accessible for your HTML page to display it correctly. If you plan to frequently update the image, you may need to refresh the published link in your HTML code when necessary. Keep Coding :)

[@sadiyanoorain9251]

Hi there!!! Your video is really helpful. Is there any simple method to add pagination to the HTML file.

[@extensio.inversiones]

since I use your example it fuckup mi visual studio, now node . doesnt work!!!!!!!

[@rheybustos689]

HI sir nice tutorial..May I ask if is it possible to edit datatable and sync changes in Gsheet? Thanks

[@Mdbootstrap]

Hello. probably it's possible, but not with the configuration I prepared in this tutorial, so I cannot provide you any solution for that in this moment

[@rheybustos689]

@@Mdbootstrap hopefully you will do a video tutorial on that. It will big help on us.. thanks sir have a blast day

[@c0f7e3]

By default, it only reads data from the first sheet. How to read data from different sheets? sheet2, sheet3, ...

[@Mdbootstrap]

You need to add the sheet name to the range parameter, eg Sheet2! A1: B8 It will be most convenient to add e.g. Sheet3! A: Z and read everything from the sheet, but you can also precisely define e.g. Sheet3! A2: H8

[@c0f7e3]

@@Mdbootstrap extremely helpful!!!

[@Mdbootstrap]

@@c0f7e3 happy to hear that ;)

[@twifmarketing]

If you have six to seven columns, will the table become response on mobile phone?

[@Mdbootstrap]

In this case, you should wrap your table within .table-responsive wrapper. Have a look at example here mdbootstrap.com/docs/standard/data/tables/#section-responsive-tables

[@twifmarketing]

@@Mdbootstrap Thanks for quick response. Great tutorial. How would we filter for a column? For example we want to show data where column is Yes and items that are No would not show up on the web page

[@Mdbootstrap]

@@twifmarketing for such a thing you will probably need some more advanced solution. Have a look if you find it here mdbootstrap.com/docs/standard/data/datatables/

[@twifmarketing]

@@Mdbootstrap Enjoy your videos. Do you have an example where data table importing from google sheets. Looking to display a menu for food truck showing their menu, sides, drinks. These would be come from different sheets.

[@Kreations_fr]

Thank you ! Nice tutorial. One question : Is it possible to read only lines with B column filled. For example "If Column B is empty on line X, don't display the X line" ? Thank you :)

[@Mdbootstrap]

The easiest way is to check if the required field is filled in before displaying the data, e.g. if it comes to column B, then we can add a simple condition to the function displaying the data, as in the example below: function displayResult2 (response) { let tableHead = ""; let tableBody = ""; response.result.values.forEach ((row, index) => { if (index === 0) { tableHead + = ""; row.forEach ((val) => (tableHead + = "" + val + "")); tableHead + = ""; } else if (row [1]) { tableBody + = ""; row.forEach ((val) => (tableBody + = "" + val + "")); tableBody + = ""; } });

[@Kreations_fr]

@@Mdbootstrap Thank you so much ! Last question if i may ... :) How can i add 2 different tables on the same page, with 2 differents range query ? Thank you again !

[@Mdbootstrap]

@@Kreations_fr If it's a different sheet and other query, then you should add two new functions loadData and displayResult with the data of another sheet, and add one more table in HTML. If it is the same sheet but other data ranges, then you can change the range of displayed data in the previous query of the displayResult function. I hope it will help ;)

[@Kreations_fr]

@@Mdbootstrap Thank you 🙏

[@luisborges1667]

Congratulations for the tutorial, it is extremely useful. A doubt I had and could not execute. Is it possible to make it read all the sheets at once? Until then, if I have a spreadsheet with 10 tabs, I can only show one at a time and I believe that making a logic for each one is not ideal.

[@hiryuimajin]

You could use the naming convention as how it's named in Google Sheets e.g. Sheet1!A1, Sheet1!A:A

[@luisborges1667]

Hi, thanks for help. I try t, but a error occoured object

[@Mike-vz8de]

Can I do without using API key?

[@MichaSzymanskiBF]

No, you need an API key

[@howe-simracing]

Great Video. Thanks a lot for this. 👍🏻 I have only short questions: 1. I have implemented different images in my sheet table. How can i show this in my html? 2. Is it possible to make some colomns in different alignments (for example some left aligned, some centered)? And final - Is it possible to show two different table sheets (Sheet1! AND Sheet2!) on one html site? Do you maybe have another course, where this is shown? I hope for your help. Thank you very much. 😊

[@hiryuimajin]

My ideas: 1. It's best you host the images online so that it can be enclosed in the html with the tag and it will pull the link as the source. 2. You can achieve this with CSS. 3. Looking at the code you can probably replicate the js file and put the corresponding links. But another idea is you can combine the 2 sheets within google sheets. Hope this helps.

[@howe-simracing]

@@hiryuimajin many Thanks for your reply. 😊 1. Could you tell me where in the html i have to pull the Tag? There is no reference because of the import of the sheets table. 2. Also no reference to style the table columns. 3. This i have to try and hope to get this working. Thanks for your effort. 🙈👍🏻

[@Leover378]

Activa la TRADUCCION al ESPAÑOL en youtube studio, por favor.

[@michelparmentier3063]

it's more reading data than "importing" into html (maybe I miss something) For that, hard to beat Datatables.

[@c0f7e3]

which "datatable" you can "importing" into html?

[@dimasnytin]

Very nice

[@dimasnytin]

Thank you