Sort HTML tables in real-time using JavaScript v1.0

Demo

Characters from Genshin Impact. Source: Genshin Impact Wiki

Portrait	Name	Health	Weapon	Nation	Birthday	Voice	Score
	Amber	793	Bow	Mondstadt	August 10	蔡书瑾	☆☆☆☆★
	Xiangling	911	Polearm	Liyue	November 2	小N	★★★★★
	Sucrose	775	Catalyst	Mondstadt	November 26	小敢	★★★★★
	Sayu	993	Claymore	Inazuma	October 19	Sakula小舞	☆★★★★
	Dori	1039	Claymore	Sumeru	December 21	王晓彤	☆☆☆★★
	Barbara	820	Catalyst	Mondstadt	July 5	宋媛媛	☆☆☆★★
	Collei	820	Bow	Sumeru	May 8	秦文静	☆☆☆★★
	Yun Jin	893	Polearm	Liyue	May 21	贺文潇	☆☆★★★
	Diona	802	Bow	Mondstadt	January 18	诺亚	☆★★★★

The script will automatically try to recognize data types such as numbers and dates, but will otherwise just sort according to character order (e.g. alphabetical)

• Portrait cells in the have no text content so the sort will instead be based on the full HTML markup content of each cell. Depending on attribute order, this will usually result in rows getting sorted according to filename or alt text.
• Name cells are <th> elements, but they are treated as data cells whenever they share a row with <td> elements.
• Health cell values are automatically recognized as numbers instead of text. Note that Dori's HP is sorted as the highest value in spite of the first digit being the lowest. Expect the script to fail at identifying numbers that contain spaces, commas or units.
• Weapon cells contain a mix of image and text. Markup is ignored as long as a cell contains text, so here the images will not affect sort order.
• Nation is a simple text only column. Like all the other columns, sorting is always case-insensitive.
• Birthday cells are automatically recognized as a date and are sorted accordingly.

Code requirements:

1. Rows consisting of only <th> elements should function as sort trigger.
2. Rows containing 1 or more <td> elements should be sortable.
3. When multiple tables exist, they should all be indvividually sortable.
4. Script should not require page author to adapt tables to fit script (as long as tables have valid markup).
5. Script should be easy for page author to understand and modify, especially for the purpose of translating to other languages.
6. Script should enable page author to add attributes to specific tables and columns to prevent sort behaviour.
7. Script should enable page author to add attributes for overriding the value collected from specific cells by the script.
8. Sort trigger should support using touchscreen, mouse and keyboard.
9. Sorting of rows should make sense for screen reader users.
10. Changes made to the page should be limited to: adding click events and accessibility attributes on column headers; changing order of data row elements.
11. The script should store as little data as possible in memory while idle.
12. When performing a sort, each row should only be moved once (for the sake of performance).
13. When script fails, all table data should still be displayed, and no indicators of sorting functionality should be shown (see https://en.wikipedia.org/wiki/Unobtrusive_JavaScript ).

Custom data-attributes:

• data-sortvalue="x" (replace x with whichever value you want) can be added to <td> elements to override the cell's content for sorting. For example: if the script thinks "100kg" is lighter than "20g", you can use <td data-sortvalue="100000">100kg</td> and <td data-sortvalue="20">20g</td> instead, and the script will sort by the attribute values.
• data-sortable="false" can be added to <table> and <th> elements to prevent tables and columns from being sortable.

Known issues

1. Script will fail if loaded before table content in markup order without "defer" attribute on the <script> element (is it possible to make set defer from withing the script itself?).
2. Cell attributes colspan and rowspan will likely cause incorrect sorting of adjacent columns
3. Column header scope attribute value of "row" is ignored
4. The script might fail to recognize dates or numeric data if formatted in unexpected ways (such as using different locales or including units)
5. Table footer rows will get sorted to top if they share parent with sorted rows
6. Sorting the index array could potentially be demanding on very large tables
7. Script doesnt remember user sort choices (could be saved in localstorage)
8. Incorrect sorting might occur if order of tables in the DOM changes after the script was loaded

Potential features:

• Identify a wider range of number formatting
• Add a class or attribute to all cells of sorted column
• Add a search filter
• Remember user's sort choice (using localstorage)
• Option to sort columns by row
• scan for multi-digit numbers to make sorting of mixed data types more accurate