Sortable Table Columns with Javascript

[@jeff-creations]

Thanks for the super straight forward video Dennis, I learned a bunch. I'm going to follow along for the next few videos in the series as well! I don't really know jQuery and am really trying to learn Vanilla Javascript first. I spent some time trying to convert the jQuery you used to Javascript. I had issues getting the icons to change so I went down a different road with the icons. That said I am going to post what I have so far for those viewers that want the Javascript approach.

[@junyuwang536]

Dennis you saved the last piece missing from my hw you're god to me now

[@isaacjpg]

Seeing the whole series ... thank you for the video

[@srikannandairy]

Your tutorials are great in terms of content, clarity and pace. I am a Django developer. I have doubt whether we can check the user group in js code.

[@naishadhchawra7508]

thanks man . Finally got this .

[@rexorgutierrez4063]

How about when the data is came from the database how it should connect? please answer me

[@ketz555]

11:20 The date sort doesn't work

[@EIGatito]

What the solution of it? Plzzzz

[@marygracetecson7148]

@@EIGatito date should be in yyyy/mm/dd format

[@tariqshaikh459]

I had fetched my data from an API and displayed it on the browser if I want to sort data on that values what changes do I need to make in place of "myArray". Thank You

[@saiganeshn8588]

Did you figure that out bro I am also having that doubt

[@daedalusrasmus3278]

There's problems with the case of the letters. Uppercase letters have precedence over lowercase ones...

[@santiagowhite5467]

Why do I have a problem with the click function? It does not trigger the console log

[@GavishSethi]

good but little more explanation would have been better

[@Modafinil]

How about sorting according to the date column? I think it does not work. I added a section which does the same than your code but converts a[column] and b[column] to Date objects. It seems to work after that but I'm so inexperienced with javascript that it's better not to declare the problem as solved.
Here is what I did:
if(column == 'birthdate')
{
if(order == 'desc'){
$(this).data('order', "asc")
myArray = myArray.sort((a,b) => new Date(a[column]) > new Date(b[column]) ? 1 : -1)
text += '▼'
}else{
$(this).data('order', "desc")
myArray = myArray.sort((a,b) => new Date(a[column]) < new Date(b[column]) ? 1 : -1)
text += '▲'
}
}
else
if(order == 'desc'){
$(this).data('order', "asc")
myArray = myArray.sort((a,b) => a[column] > b[column] ? 1 : -1)
text += '▼'
}else{
$(this).data('order', "desc")
myArray = myArray.sort((a,b) => a[column] < b[column] ? 1 : -1)
text += '▲'
}
However it would also be nice if one would be able to leave only the sorting triangle to the column header which is currently sorted and remove the triangles from those column headers. This could avoid users confusion but it still would be nice to indicate somehow that the column headers are providing sorting for table items. For example, Windows Explorer is providing that kind of behavior.

[@anabellegutkowski4212]

You can turn Date into a timestamp too. Then do the sorting.

[@cengiz-ilhan]

thanks

[@Modafinil]

What if the stuff of one column you want to sort is in Item to be sorted? Sorting should be done according to the text content. Not according to a DOM element.

[@Modafinil]

tableData = tableData.sort((a, b) => $("").html(a[column]).text() > $("").html(b[column]).text() ? 1 : -1);

[@UsmanJawad-hn6dx]

thanks