Build a Dynamic Table with Sorting | HTML, CSS & JavaScript Frontend Mini Projects | Dylan Israel

Build a Dynamic Table with Sorting | HTML, CSS & JavaScript Frontend Mini Projects | Dylan Israel

► MY COURSES
My Courses with huge discounts:
» 100 Algorithms Challenge: How to Ace Your Next JavaScript Interview

► MY MERCH
My Coding Merch - Shirts, Mugs etc.

► BOOK RECOMMENDATIONS
» The Complete Software Developer's Career Guide:
» The Total Money Makeover
» Clean Code
» The Clean Coder
» Clean Architecture
» Code Complete
» Cracking the Coding Interview

► AFFILIATE LINKS FOR PRODUCTS I LOVE:
» Check out items I love on Amazon
» Humble Bundle (Low price games, books, courses etc.)
» Robinhood - Trade Stocks App (Sign up and get 1 share of stock valued between 5 and 200 dollars)
» Acorns - Easy Investment Portfolio (Sign up with my link and get $5 when you deposit)
» AirBnB Hosting - Get $40 with your first rental

► DONATE & SUPPORT
» Paypal

► MENTORING
» Tutoring, Mentoring and Course Walkthroughs available:

► SOCIAL MEDIA
» Patreon
» Code, Tech and Caffeine Facebook Group
» Twitter
» Website
» Instagram

[CodingTutorials]

My latest course for just $9.99. Ace your front end interviews with the '100 Front End Interview Questions Challenge'!!!

[irustv]

Here is variant for text:


1. modify this part of "swith(dataType)":
switch(dataType) {
case 'number':
sortNumberColumn(sortDirection, columnName);
break
case 'string':
sortTextColumn(sortDirection, columnName);
break
}


2. after functiom sortNumberColumn add this:


function sortTextColumn(sort, columnName) {
personData = personData.sort((p1, p2) => {
return sort ? (p1[columnName] > p2[columnName]) - (p1[columnName] < p2[columnName]) : (p2[columnName] > p1[columnName]) - (p2[columnName] < p1[columnName])
});
}

[JulieJau]

Thank you, Dylan. You do these things so quickly, I'm still on drawing little diagrams to keep things straight in my head. But I know that if i keep practising and get the patterns down, it will become easier.

[quadturboR]

This tutorial is a great job! It helps me a lot. Thank you!

[bharatkalyan]

Could you please tell me
How to add load more for the above example

[Kyle_Sherrington]

9:48 This string interpolation doesn't work in VSCode (1.52.1) for me. The "${person.name}" isn't changing color in the code, and it's literally injecting those characters into the HTML.

[zelow]

So, how would you sort the name column?

[jaygan]

how do you connect the array to the backend ?

[sairajdas]

Isn't it a good practice to include script tags in the end?

[DRocksRecords]

This is one of the most valuable tutorial I had the chance to find regarding table manipulations in general all languages together (Autohotkey, Java, C#, Python, JavaScript).
Thanks so much, subscribed and might buy your udemy 360 course on js, cheers

[sweetteamcformerlymrterras]

Hey Dylan, I think an error is that you put it at the end of the head right after style, it is best to put it at the end of the body not head. It's what my teacher suggested to all of us.

[bentaylor]

Do you have this in a git repo anywhere?

[athertonsecretary]

To while away the hours of Covid lockdown, I've been trying to teach myself js. I've created a few 'retro' games which seem to work well but would like to add a high score table to them, one where you can input your name if you succeed in getting the highest score. At the moment I'm struggling to find a course on YouTube, not wanting to go down the Unity route - too complicated for this old man to master! Is it possible to run a high score course, say to update a minesweeper game? Regards, Lev

[rachelng]

Thank you Dylan! Awesome work. Will you be able to do another video for async data source?

[mikapilke]

Great job with the tutorial! I love it how you left some loose end hanging. While creating a table with columns that has both numbers and strings it felt a bit frustrating not to get the solution for sorting those strings, especially after trying 30 different approaches and breaking the whole table on the way. Many times. But after a small break and a bit studying all of the sudden things just fell into their place and it started to work like a charm. Not sure what happened or why it exactly even works but at least I'm a one tiny little step closer to my goals. :)

Ohh, the frustration you get while trying to get the simpliest s**t to work. Or even respond in some way. Or at least not to break everything. But still there's something weirdly fashinating in this whole thing.

[disrespectfulgames]

Is anyone else having trouble with string interpolation on visual code.

[CHLOROPHILOU]

columnName is not defined. so the function sortColumn doesn't work.

[AnujJoshi]

adding another columns gives XSS error. any solution?

[erickbecker]

uf the names under my thead name and age is not listet why ? i belive i type the same code in my editor :/

[aviralpruthi]

Anyone please tell the suitable project description in few words
I have to add it to my resume as a mini project