Going through tutorial hell is tough, but this gem definitely classifies as tutorial heaven!! Its 100% useful, to the point and well explained many thanks.
This is utter brilliance coding to me! Thankyou, will subscribe and hopefully down the line pay you some homage. I am using flask to display multiple tables over different pages where they can be sorted and filtered. I tried doing it with just forms, but this is for me so fitting!
I got two specific questions which were not in the mdn blob ref (I read it once). How would you: 1. Promt user for where to save file like the downloads api ? 2. how would you encode to a specific format like "windows-1252" for latin chars in french ? I'd use the JS downloads API but its not unsupported in Edge so its a major downside (I wouldn't care if it was internet explorer but a few ppl use edge)
Hi, your video is really speed learning for me, not having done any coding like this! Can your code accommodate conversion of an html table split over many pages? I mean, what happens if the table is really big, with 'Next' at the bottom of each page (browser screen). Thanks.
Thanks for this! Just a question - if I DON'T want a separator (comma) in each line for each empty cell (that's shorter than the longest row), how do I change the code?
Well the above code works like a charm.But what if the table has multiple pages...then i would guess that it would show only current page which you are in neglecting all other pages
Hey! So I actually posted this question to StackOverflow and in the process of it all I figured out how to get those values! Check it out: stackoverflow.com/questions/61945465/how-would-you-go-about-grabbing-an-input-elements-value-when-that-input-ele
I have two good questions. 1. How can I export a column with 16 digit numbers? Excel has only a precision of 15 and the column will be turned to exponential. 2. How can I export more than 10k rows? When the info grows larger that that the page will not render
This is an awesome tutorial! Question: how would you go about selecting the text inside of an element that's inside a element? I have a large HTML form with multiple tables and each cell is an element where the user will type in text.
Hey Tonatiuh, To answer your first question about multiple tables, the simplest solution would be to make multiple instances of the TableCSVExporter and extract the text for each table. Then you can build up one massive string variable and append the result for each table to it, separated by a new line. You'd just need to make sure you take into account the different row lengths for each table. To answer your second question about selecting out of input fields, this would be quite straight forward assuming your element is within your element. To do so, within the "parseCell" method of TableCSVExporter you can change the parsedValue to instead say something like "tableCell.querySelector("input").value" - this way it's going to select the input within the table cell and grab it's value.
@@dcode-software Thank you so much for your reply! I'm still confused on how exactly to get multiple tables into the 'csvOutput' constant...could you provide some clarity on that?
I had a look at your Stack Overflow question which you posted in another comment - the "parseCell" function takes in a *single* cell, so you probably shouldn't be selecting ALL inputs/selects within it - but rather selecting a single one (the input/select which is a child of the given table cell). To answer your second question about multiple tables - you could create a new TableCSVExporter for each table and call the "convertToCSV" function. The function simply returns a string so you could have a variable that holds ALL the output and simply loop through all your tables, and append the return value of "convertToCSV" to your variable.
@@dcode-softwareAh, I understand about parseCell...I did kind of MacGyver my way to a solution by using the spread operator and an array to capture all of the and values. I'm still stuck on getting multiple tables onto a single row in the CSV file...I've got it to a point where all user-inputted text is captured and written to the CSV file, though it's a mess, with values offset by a column and such, though it is all there. Just for a bit of background, the app itself is a with 11 elements nested within. What I essentially need to figure out is how to get each to append to a new set of columns -- essentially looking something like ..., and then all the relevant row or rows of data. If I have it just take one table, it's writes to the CSV just fine. It's when I try adding the additional 10 tables that things get messy. Might the solution to this lie somewhere in the _findLongestRowLength() method? Either way, I'm beyond floored at your generosity in taking the time to get back to me about this. I'm a new developer that is working on landing their first position and thus am very comfortable being transparent about my current inexperience. I indeed hope I'm not coming off as trying to get you to do my work for me. The limiting factor in all this is, like I mentioned, the lack of experience, so I'm working hard to piece the logic together and understand the how and why behind the code you've written. I sincerely hope this exchange benefits anyone else that may reading this comment thread and helps them adapt your code to fit their needs as well. You've definitely helped me a ton with fighting the 'imposter-syndrome' dragon. Thank you, Dominic!
No worries man, with the multiple tables situation - before saving the CSV you'll need to append the "resulting CSV string" for each table onto one another. For example, "combinedCsv = table1Csv + table2Csv + table3Csv" - then you would export only the combined CSV.
thanks for the great video, I think you are expecting a different question about it, but can you please tell me what font type are you using? looks awesome. Thanks in advance.
Oh tanks, I was checking the font but it doesn't looks like roboto mono... I forget to mention but the font I was asking before was the one that you use in the html page.
Great video! I am in need of that right now, as I can't use header as others suggest. Also you mentioned that this would have problems with IE. Now I don't use IE , however there are some people that have no choice?! Can you elaborate on the IE issues please.
Yeah so basically to support IE avoid using classes and also (I believe) the Array.from method. You could just put everything into a function instead or a regular object.
@@dcode-software Hi, would you mind put up a version that works with IE? I have been searching and there isn't really many examples. This one is by far more clean and works pretty well with Chrome, but not IE. Would really appreciate it. Thanks.
Brother - thank you a lot for this! This is really, really helpful. I used this tutorial to solve a problem my company was having with getting data out of a legacy front-end system. How can I pay you back?
Probably best to do that on the server side with something like a command line application that will convert to PDF from HTML. There's a good selection of free and open source ones
Great. I created something a bit different. A tiny and simple Library Management System in 18 KB. CSV Import and export. No server. No installation. Free. Code available.
Going through tutorial hell is tough, but this gem definitely classifies as tutorial heaven!! Its 100% useful, to the point and well explained many thanks.
I tried the same steps in OJET, worked absolutely fine, thanks a lot for this video!!
u're my go to youtuber for js
Cheers!
So easy to follow and straight forward, and it worked like a charm. Thank you so much!
This is utter brilliance coding to me! Thankyou, will subscribe and hopefully down the line pay you some homage. I am using flask to display multiple tables over different pages where they can be sorted and filtered. I tried doing it with just forms, but this is for me so fitting!
Thank you! I'm glad I could help. Enjoy your project 👍
Thorough explanation with very little fat. Nice job !!
Cheers!
@@dcode-software Kiwi ?? - Just saw your home page... you've got a lot of really good stuff in there. Much Respect.
Aussie mate
@@dcode-software Ok.... no worries.. I'm Aussie and thought I heard a slight hint of kiwi.
Hahaaha fair enough 😁
I got two specific questions which were not in the mdn blob ref (I read it once).
How would you:
1. Promt user for where to save file like the downloads api ?
2. how would you encode to a specific format like "windows-1252" for latin chars in french ?
I'd use the JS downloads API but its not unsupported in Edge so its a major downside (I wouldn't care if it was internet explorer but a few ppl use edge)
Detailed Explanation. Thank you for the video.
You are a legend. Everything else i tried failed
No worries mate happy it helped ya!
is there is any tutorial available on how to import or copy and paste the excel data to a HTML table ?
Amazing. Thank you!
Excelent Tutorial!
Hi, your video is really speed learning for me, not having done any coding like this! Can your code accommodate conversion of an html table split over many pages? I mean, what happens if the table is really big, with 'Next' at the bottom of each page (browser screen). Thanks.
Thanks for this! Just a question - if I DON'T want a separator (comma) in each line for each empty cell (that's shorter than the longest row), how do I change the code?
Will check it out later.
Love it mate!
hello sir, please help me to download the whole data when there is pagination.
Thanks for this educative video,
Please tell me more if we have more than one page of the table. i.e. in pagination, how this could work?
Thanks a lots for this tutorial its very helpful! pls. how export more then one table
nice tuto is there a video in nodejs to display csv data in web page and create dyanamic table for unknown number of row or columns, Thanks
Hey, cheers. A few people have asked me about this, I'll consider it!
@@dcode-software Thanks, i actually figured i out after an hour of posting the question..
Well the above code works like a charm.But what if the table has multiple pages...then i would guess that it would show only current page which you are in neglecting all other pages
Me too facing the same issue, how did you solve the pagination problem? TIA
the problem is i have input inside the td tag, so i want him to select the value of the input not the td tag
Hey! So I actually posted this question to StackOverflow and in the process of it all I figured out how to get those values! Check it out: stackoverflow.com/questions/61945465/how-would-you-go-about-grabbing-an-input-elements-value-when-that-input-ele
does this work for html files with multiple tables inside?
I have two good questions.
1. How can I export a column with 16 digit numbers? Excel has only a precision of 15 and the column will be turned to exponential.
2. How can I export more than 10k rows? When the info grows larger that that the page will not render
super nice one!
Glad you enjoyed my friend.
How to deal with colspan and rowspan in tables?
Nice and informative, thanks.
No worries mate, thank you for the video idea from your comment a while back!
This is an awesome tutorial!
Question: how would you go about selecting the text inside of an element that's inside a element? I have a large HTML form with multiple tables and each cell is an element where the user will type in text.
Hey Tonatiuh,
To answer your first question about multiple tables, the simplest solution would be to make multiple instances of the TableCSVExporter and extract the text for each table. Then you can build up one massive string variable and append the result for each table to it, separated by a new line. You'd just need to make sure you take into account the different row lengths for each table.
To answer your second question about selecting out of input fields, this would be quite straight forward assuming your element is within your element. To do so, within the "parseCell" method of TableCSVExporter you can change the parsedValue to instead say something like "tableCell.querySelector("input").value" - this way it's going to select the input within the table cell and grab it's value.
@@dcode-software Thank you so much for your reply! I'm still confused on how exactly to get multiple tables into the 'csvOutput' constant...could you provide some clarity on that?
I had a look at your Stack Overflow question which you posted in another comment - the "parseCell" function takes in a *single* cell, so you probably shouldn't be selecting ALL inputs/selects within it - but rather selecting a single one (the input/select which is a child of the given table cell).
To answer your second question about multiple tables - you could create a new TableCSVExporter for each table and call the "convertToCSV" function. The function simply returns a string so you could have a variable that holds ALL the output and simply loop through all your tables, and append the return value of "convertToCSV" to your variable.
@@dcode-softwareAh, I understand about parseCell...I did kind of MacGyver my way to a solution by using the spread operator and an array to capture all of the and values.
I'm still stuck on getting multiple tables onto a single row in the CSV file...I've got it to a point where all user-inputted text is captured and written to the CSV file, though it's a mess, with values offset by a column and such, though it is all there. Just for a bit of background, the app itself is a with 11 elements nested within. What I essentially need to figure out is how to get each to append to a new set of columns -- essentially looking something like ..., and then all the relevant row or rows of data. If I have it just take one table, it's writes to the CSV just fine. It's when I try adding the additional 10 tables that things get messy. Might the solution to this lie somewhere in the _findLongestRowLength() method?
Either way, I'm beyond floored at your generosity in taking the time to get back to me about this. I'm a new developer that is working on landing their first position and thus am very comfortable being transparent about my current inexperience. I indeed hope I'm not coming off as trying to get you to do my work for me. The limiting factor in all this is, like I mentioned, the lack of experience, so I'm working hard to piece the logic together and understand the how and why behind the code you've written. I sincerely hope this exchange benefits anyone else that may reading this comment thread and helps them adapt your code to fit their needs as well. You've definitely helped me a ton with fighting the 'imposter-syndrome' dragon. Thank you, Dominic!
No worries man, with the multiple tables situation - before saving the CSV you'll need to append the "resulting CSV string" for each table onto one another. For example, "combinedCsv = table1Csv + table2Csv + table3Csv" - then you would export only the combined CSV.
Very Good
Thanks, good tutorial!
No probs!
Hi Dom your codepen link is blank can you please add the code to it?
Yeah mate sorry about that, it should be there now!
Project link is not working ...share it again...plzz
How would i remove other headers beyond the first row?
jk solved it ;']
thanks for the great video, I think you are expecting a different question about it, but can you please tell me what font type are you using? looks awesome. Thanks in advance.
Hey mate no worries, the font is Roboto Mono
Oh tanks, I was checking the font but it doesn't looks like roboto mono... I forget to mention but the font I was asking before was the one that you use in the html page.
Great video! I am in need of that right now, as I can't use header as others suggest. Also you mentioned that this would have problems with IE. Now I don't use IE , however there are some people that have no choice?! Can you elaborate on the IE issues please.
Yeah so basically to support IE avoid using classes and also (I believe) the Array.from method. You could just put everything into a function instead or a regular object.
@@dcode-software Thank you. I will check that out when testing.
@@dcode-software Hi, would you mind put up a version that works with IE? I have been searching and there isn't really many examples. This one is by far more clean and works pretty well with Chrome, but not IE. Would really appreciate it. Thanks.
Brother - thank you a lot for this! This is really, really helpful. I used this tutorial to solve a problem my company was having with getting data out of a legacy front-end system. How can I pay you back?
You're welcome! No need to pay me back
Thanks! :')
Hi, thanks, and from csv to html? could you help me?
A few people have asked for this, I may be doing a video on it in future.
Wow this is good. I wonder if we can convert into pdf instead of csv??
Probably best to do that on the server side with something like a command line application that will convert to PDF from HTML. There's a good selection of free and open source ones
the result looks terrible in WPS. Looks fine in MS Excell though
Why no use json?
You could, but this video is about exporting to CSV :)
@@dcode-software Are you a kiwi? you sound like one!
Nah Aussie mate
Great.
I created something a bit different. A tiny and simple Library Management System in 18 KB. CSV Import and export. No server. No installation. Free. Code available.
Hello dcode, very nive one.
It's doesn't work on Firefox, no problem on Chrome :)
Really? I made sure I tested this on Firefox before uploading the video ☹️
@@dcode-software Yes, your pen doesn't work on FF 🙄
:(