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

This is a simple script written as a plug-in, enabling page authors to make their HTML tables sortable without needing to know any JavaScript syntax.

By default any eligible table will be made sortable, without the page author having to add or change any special attributes on the table elements. Special attributes can be added in case the page author wants specific tables or columns to be unsortable.

A table is eligible if it has one or more "header rows": rows consisting purely of column headers (<th> elements).
The script will add button behaviour to these, for initiating sorting. The script will automatically update aria-sort attribute values of column headers, and this can be used as a CSS selector for styling sort indicators.


Characters from Genshin Impact. Source: Genshin Impact Wiki
Portrait Name Health Weapon Nation Birthday Voice Score
Amber portrait Amber 793 Pyro symbol Bow Mondstadt August 10 蔡书瑾 ☆☆☆☆★
Xiangling portrait Xiangling 911 Pyro symbol Polearm Liyue November 2 小N ★★★★★
Sucrose portrait Sucrose 775 Anemo symbol Catalyst Mondstadt November 26 小敢 ★★★★★
Sayu portrait Sayu 993 Anemo symbol Claymore Inazuma October 19 Sakula小舞 ☆★★★★
Dori portrait Dori 1039 Electro symbol Claymore Sumeru December 21 王晓彤 ☆☆☆★★
Barbara portrait Barbara 820 Hydro symbol Catalyst Mondstadt July 5 宋媛媛 ☆☆☆★★
Collei portrait Collei 820 Dendro symbol Bow Sumeru May 8 秦文静 ☆☆☆★★
Yun Jin portrait Yun Jin 893 Geo symbol Polearm Liyue May 21 贺文潇 ☆☆★★★
Diona portrait Diona 802 Cryo symbol 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)

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 ).

Custom data-attributes:

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: