Search and Sort HTML Tables

Try clicking on the headers to sort the table and use the search box to filter the table.

# Name Status
1 Michael Red
2 Joshua Yellow
3 Tim Green
4 John Red
5 Bob Yellow
6 Anne Green
7 Michelle Red
8 Jane Yellow
9 Claire Green
10 Geraldine Red

Sorting

Clicking a header once will sort the table in ascending order based on the appropriate column, clicking the header again will reverse the order of the table.

If multiple sorts are performed the ordering of previous sorts are preserved. In other words if you sort the table by name and then sort it by status the table will be sorted first based on status then alphabetically by name.

Notice that sorting by status does not sort alphabetically. This is due to hidden values that tell the sort function the appropriate ordering.