This tool is a small vanilla JavaScript library that allows making any HTML table sortable by adding the class sortable to the <table> element. Here are the main features:

• Sort by clicking the header: The user can click on a table header (<th>) to change the sorting order of the rows.

• Easy installation: There are several ways to integrate the library:

  • Linking the CSS and JavaScript files via jsDelivr CDN.

  • Copying the files from the dist directory to a local assets folder and linking them.

  • Installing via npm (npm install sortable-tablesort) and then linking the HTML files or importing them into a JavaScript file.

• Non-sortable field management: It is possible to disable sorting for specific columns by using:

  • The class no-sort in the <th> element.

  • CSS rules.

  • Using the <td> element instead of <th> (although this is discouraged for accessibility and styling reasons).

• Sorting indicators (arrows): Arrows indicating the sorting direction can be added via CSS. It is also possible to place them to the left of the text. The library provides example CSS stylesheets for this.

• Sticky headers management: By using the provided CSS file (sortable.min.css) and adding the class sticky to the table, the headers can remain visible during scrolling.

• Specific data sorting: The data-sort attribute in the cells (<td>) allows defining a different value from the displayed one for sorting. This is useful in case of file sizes (KB, MB, GB) or non-standard date formats.

• Alternative sorting: By clicking on a header while holding the shift or alt key, the data-sort-alt attribute is used for sorting instead of data-sort.

• Sorting on a different column (for colspans): The data-sort-col attribute in the <th> element allows specifying a different column to perform the sort on, which is useful in the presence of merged cells (colspan).

• Default sorting order management: Adding the class asc to the <table> element allows defining the default sorting order as ascending.

• Secondary sorting (tiebreaker): The data-sort-tbr attribute in the <th> element allows defining a secondary sorting column to be used when the values of the primary column are identical.

• Null/empty values management: Adding the class n-last to the table (<table class="sortable n-last">) ensures that rows with null or empty values are always sorted last. Note that a string of blank spaces is not considered null/empty.

• Accessibility (A11y): Including the sortable.a11y.min.js file adds basic accessibility features, such as aria-label to the headers and the ability to navigate through the headers with the tab key (tabindex="0"). A global function enhanceSortableAccessibility is provided to activate these features.

• Sort events: The library dispatches two custom events that bubble up the DOM tree: sort-start (when sorting begins) and sort-end (when sorting is complete). It is possible to listen for these events on any parent of the table, including the document.

• Sort on page load: It is possible to trigger a sort on page load by using JavaScript to simulate a click on the desired header.

The library is presented as being small (1.52KB minified, 795 bytes gzipped) and fast, although very large tables may be slow, especially on mobile. It requires the table to have <thead> and <tbody> elements. The management of rowspan is not supported. It is advertised as being compatible with most modern browsers (ie9+ although ie9 compatibility is no longer guaranteed) and works with tables generated by JavaScript thanks to an eventListener. It is also mentioned as working with Svelte, but has not been tested with React, Angular, or Vue.