FiltersLesson 156Free preview

Sort Table

This lesson is part of How To · All levels

Summary

This lesson discusses how to sort the rows of a table when a user clicks on a column title. The line data is read, sorted by type of text or number, then rearranged in tbody. This feature makes long data tables easier to analyze without reloading pages.

Key points

Add a listener click on th element and find out the column index
Take a line from tbody, not thead, and then turn it into an array so you can sort it.
Use localeCompare for text and parseFloat for the number column
Save the direction of the outer outer column and update indicators such as arrows or text

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.