SortaTable

SortaTable makes any HTML table's columns sortable by click. It requires sortatable.css for button styling and sortatable.js for behavior. Requires JavaScript.

HTML structure

The table must have a unique id. Each sortable column's <th> must contain a <button class="sortatable" data-sort="columnId">. The data-sort value is the column identifier used by the JS API. Columns without a sort button are not sortable.

See the demos below for live examples.

<table id="my-table">
    <thead>
        <tr>
            <th><button class="sortatable" data-sort="firstname">First Name</button></th>
            <th><button class="sortatable" data-sort="lastname">Last Name</button></th>
            <th>Description</th> <!-- not sortable -->
        </tr>
    </thead>
    <tbody>
        <tr><td>John</td><td>Connor</td><td>Resistance leader</td></tr>
    </tbody>
</table>

API

Instantiate with the table id, then call attachSortListeners() to wire the header buttons. Call sort(columnId, ascending) to apply an initial sort programmatically.

See the demos below for live examples.

const sortatable = new SortaTable("my-table");
sortatable.attachSortListeners();

// Optional: sort a column on load
sortatable.sort("lastname", true);  // ascending
sortatable.sort("lastname", false); // descending

CSS classes

Class	Applied by	Role
`.sortatable`	Author (HTML)	Styles the sort button; adds a neutral indicator after the label
`.sort-asc`	JavaScript	Replaces indicator with an upward arrow (ascending order active)
`.sort-desc`	JavaScript	Replaces indicator with a downward arrow (descending order active)

Sorting demos

Sorted on load

Table sorted by last name (ascending) when the page loads. All three columns are sortable.


Elvis	Presley	1935-01-08
Aretha	Franklin	1942-03-25
Freddie	Mercury	1946-09-05
Michael	Jackson	1958-08-29
Bob	Dylan	1941-05-24
Jimi	Hendrix	1942-11-27

const sortatable = new SortaTable("music-legends-table");
sortatable.attachSortListeners();
sortatable.sort("lastname", true); // ascending on load

No initial sort — non-sortable column

Table with no initial sort. The last column (Description) has no <button class="sortatable"> — it is not sortable.

			Description
Sarah	Connor	1984-05-12	Terminator's target
John	Connor	2029-07-11	Leader of the human resistance
Kyle	Reese	1984-05-12	Sent back to protect Sarah Connor
Skynet	Activation	1997-08-29	Skynet becomes self-aware
Judgment Day	Event	1997-08-29	Skynet launches a nuclear attack
T-800	Arrival	1984-05-12	Sent to kill Sarah Connor

const sortatable = new SortaTable("terminator-dates-table");
sortatable.attachSortListeners(); // no initial sort

Column visibility — ToggleSelector

ToggleSelector manages a checkbox list that controls which table columns are visible. It requires toggleselect.css. Requires JavaScript.

Build a <details> element containing one <input type="checkbox" data-toggle="columnId"> per column to control. The data-toggle value must match the column's data-sort attribute in the table header (or the data-sort attribute on a non-sortable <th>).

The toggle <button data-toggle> (no value) inside <summary> calls toggleSelector.toggleSelection(event) to select/deselect all checkboxes and update its icon. The Apply button calls sortatable.toggleColumnVisibility(toggleSelector.getCheckboxes()) to apply the current checkbox state to the table.

See the demo below for a live example.

// iconsPath: folder containing the toggle button icons
// detailsId: id of the <details> element
const toggleSelector = new ToggleSelector("../wexa_statics/icons/", "my-details");

// Apply current checkbox state to the table
sortatable.toggleColumnVisibility(toggleSelector.getCheckboxes());

Demo

Columns visibility:

Show/Hide event
Show/Hide date
Show/Hide description

			Description
Sarah	Connor	1984-05-12	The primary target of the Terminator.
John	Connor	2029-07-11	Leader of the human resistance.
Kyle	Reese	1984-05-12	Sent back to protect Sarah Connor.
Skynet	Activation	1997-08-29	Skynet becomes self-aware.
Judgment Day	Event	1997-08-29	Skynet launches a nuclear attack.
T-800	Arrival	1984-05-12	Sent to kill Sarah Connor.

<details id="toggable-details">
    <summary class="summary-choice">
        <span>Columns visibility:</span>
        <button class="accordion-action" data-toggle
                onclick="toggleSelector.toggleSelection(event);"
                onkeydown="toggleSelector.toggleSelection(event);"
                aria-label="Toggle columns visibility">
            <img src="" alt="" />
        </button>
    </summary>
    <main>
        <ul>
            <li class="check-item">
                <input id="event_input" type="checkbox"
                       data-toggle="event" checked />
                <label for="event_input">Show/Hide event</label>
            </li>
        </ul>
    </main>
</details>
<button onclick="sortatable3.toggleColumnVisibility(toggleSelector.getCheckboxes());">
    Apply
</button>

<!-- Non-sortable column: data-sort on the th itself -->
<th data-sort="description">Description</th>

const sortatable3 = new SortaTable("toggable-table");
sortatable3.attachSortListeners();
const toggleSelector = new ToggleSelector("../wexa_statics/icons/", "toggable-details");
sortatable3.toggleColumnVisibility(toggleSelector.getCheckboxes());