tablesort

Tablesort is a small, dependency-free JavaScript library that turns any HTML table into a sortable one. Clicking a column header toggles ascending or descending order, with a sensible case-insensitive default and optional sort plugins for numbers, dates, month names, file sizes, dotted version strings, and locale-aware collation via Intl.

Because it operates directly on the DOM rather than a virtual table model, it works with server-rendered markup, CMS output, or any table already on the page — no build step or framework required. Its plugin API lets teams add a project-specific sort type (currency formats, custom date formats) in a few lines, and the library ships pre-built as a single minified script for direct <script> tag use, alongside a CommonJS entry point for bundler-based projects.

What You Get

• Click-to-sort column headers with ascending/descending toggle and aria-sort accessibility attributes
• Built-in sort plugins for numbers, dates, month names, file sizes, dot-separated versions, and Intl-based locale collation
• A tiny (~2KB minified) core with zero runtime dependencies, distributed as both a plain <script> build and a CommonJS module
• An extension API (Tablesort.extend) for registering custom sort types with your own pattern-matching and comparator functions
• beforeSort/afterSort custom DOM events for hooking into the sort lifecycle
• Support for data-sort override attributes, data-sort-method="none" to exclude a column, and data-sort-column-key for reordering by a stable key rather than column index

Common Use Cases

• Adding sortable columns to a server-rendered admin dashboard or reporting table without adopting a JS framework
• Enhancing tables generated by a static site, CMS, or documentation tool (e.g. Jekyll, Hugo) where no client-side data layer exists
• Sorting tables of mixed data types (currency, dates, file sizes) using the bundled sort plugins instead of writing custom comparators
• Embedding a lightweight sort widget inside a legacy jQuery or vanilla-JS codebase where pulling in a full data-grid library would be overkill

Under The Hood

Architecture Tablesort is a single IIFE-wrapped constructor (src/tablesort.js) with a prototype holding init and sortTable. Sort types are registered into a module-level sortOptions array via the static Tablesort.extend(name, pattern, sort) method, and each file in src/sorts/ (number, date, monthname, filesize, dotsep, intl) is itself a small IIFE that calls extend on load to register its pattern matcher and comparator. init() locates the header row (supporting both <thead> and a bare first <tr>), attaches click/keydown listeners per header cell, and sortTable() samples up to three body rows to infer the active column’s type by testing each registered pattern, wraps the matched comparator in a stabilize() closure to guarantee stable ordering, then re-appends the existing <tr> nodes in sorted order rather than recreating them — preserving any listeners or state attached to individual rows.

Tech Stack The library is plain ES5 JavaScript with no runtime dependencies and no TypeScript. Grunt (via GruntFile.js and grunt-contrib-uglify) is the sole build tool, minifying every file under src/ into dist/ with a version/license banner; there is no bundler, transpiler, or module system beyond a module.exports / window.Tablesort dual-export at the bottom of the core file. package.json pins Node >= 22 and npm >= 10 for the dev toolchain, and the npm package’s main field points straight at the unminified src/tablesort.js for CommonJS/bundler consumers.

Code Quality Tests live under test/spec/, one file per sort plugin plus a core tablesort.js spec, executed via test/test.dom.js against a jsdom-simulated DOM and piped through tap-spec for readable output; a .travis.yml and a .github workflow run npm test and the Grunt build on each push. An .eslintrc enforces a consistent, if fairly permissive, style (loose equality and quote rules are explicitly disabled). There are no type annotations or a type-checking step, and naming/formatting is consistent across the small file set.

What Makes It Unique Tablesort’s distinguishing choice is operating purely on the existing DOM — it never owns or re-renders table data, so it composes with server-rendered HTML, CMS output, or any other script that already manages the table’s contents. Its sort-type detection (sampling a few cells and testing them against each registered pattern) plus the small Tablesort.extend API give it an extensibility model comparable to larger data-grid libraries, but the surface area and bundle size stay minimal; this is a deliberately narrow, well-executed take on an old problem rather than a novel one.