How to EASILY Sort HTML Tables with CSS & JavaScript – Web Development Tutorial

IMPORTANT:

If working with numerics, I recommend you parse your values to the correct type before comparisons for the most accurate results. For example, using "parseInt" or "parseFloat".

This is especially important for floats, as you'll get bad results when sorting if they're represented as strings.

thanks it works great

everything works for me but not the CSS i dont know why anyone having issue applying css arrows doesnot appear?

I followed the video and my sorting doesnt work 🙁

Awesome, thanks

Sort by numbers only
const sortedRows = rows.sort((a, b) => {

const aColText = a.querySelector(`td:nth-child(${ column + 1})`).textContent.trim();

const bColText = b.querySelector(`td:nth-child(${ column + 1})`).textContent.trim();

const aNum = parseInt(aColText);

const bNum = parseInt(bColText);

return (aNum – bNum) > 0 ? (1 * dirModifier) : (-1 * dirModifier);

});

So cool. Thank you. I got it to work with my php table as well and it works almost perfect. Sorting names, no problem, sorting numbers its a little fiddly though.

Thank you! This video helped me sort my table lol

Thank you for this video. Very well done!

Very helpful reference. Thank you!

do I have a possibility not to sort the Rank? let the rank fix?

Great video but Does this work on pagination?

How can I do pagination?

Bro, please share code

How to increase size of that sort arrow

So good, thank you. In my implentation, table are dynamically produced using AJAX calls. I linked the js at the top as if it were a CDN or something like that and it did not work. I solved it by adding the link to the js right after the script with the AJAX call, just in case someone else encounters a similar problem. Thanks again for this awesome tutorial.

thank >>>you can add toturial for multi filter table depend on html or javascript

🙏🏽🙏🏽🙏🏽

Thank you so very much. For this beautiful tutorial 🙂

great job, thx for showing!

you are awesome dude

thanks ! very helpful

Great code !!
I managed to solve the problem with better sorting of numbers, and add some code that can detect if the table is with numbers or letters.

Bro, you resolve my problem , thanks for that! new sub

Awesome video! I’m making a project and I want to do this but whit an input, so the client select the csv file and displays in the srcren

How to pagination with it?

Awesome work, is it possible to filter on the name column?
Would you consider doing a follow-up video on how to do this if possible please?

Easy. Yeah, right.

Very eloquent video, as usual. Just a quick question: instead of concatate .parentElement, would'nt be more effiicient to use .closes()? In that way, you don't have to previously be aware hay many levels there are from th to table. (and less code redundancy, maybe);
Thanks for this videos, btw!