SortaTable js/css

Sort rows of a table by clicking its columns

Description

SortaTable is a lightweight CSS/JS utility designed for sorting table rows effortlessly. It enables users to sort rows in both ascending and descending order by simply clicking on the header of a specific column. This utility is particularly useful for enhancing the user experience in data-rich web applications, allowing for quick and intuitive navigation through large datasets.

With SortaTable, developers can easily integrate sortable tables into their web projects, requiring minimal configuration. The library supports flexible configurations, allowing for various types of data to be sorted, including strings, numbers, and dates. Additionally, developers can customize the appearance of the sort buttons and indicators through CSS, making it adaptable to any design.

Whether you're building a simple contact list or a comprehensive data dashboard, SortaTable provides a robust and user-friendly solution for dynamic data management.

JavaScript

The SortaTable class provides functionality to make HTML table columns sortable. It attaches event listeners to the table's header buttons, allowing users to sort rows based on the content of a specific column in either ascending or descending order. Additionally, users can directly sort a specified column programmatically without clicking the header.

Usage example:

<script>
    // Create a new SortaTable instance and attach event listeners after the page loads
    const sortatable = new SortaTable("a-table-name");
    sortatable.attachSortListeners();

    // Un-comment the next line to sort a column in ascending order when the page is loaded
    // sortatable.sort("a-column", true); // Ascending order
    // Un-comment the next line to sort a column in descending order
    // sortatable.sort("a-column", false); // Descending order
</script>

You can also extend the class to customize its behavior:

class AdvancedSortaTable extends SortaTable {
    constructor(tableId) {
        super(tableId);
    }

    // Override methods or add new features
}

HTML

The table must have an id attribute, which is passed as a parameter to the SortaTable class.

<table id="a-table-name"></table>

The script should be included at the end of the <body> section to ensure the DOM is fully loaded before attaching event listeners.

The table headers must contain a <button> element. Each button must have a data-sort attribute to specify a unique identifier for the column to be sorted. No other buttons on the table should use the same data-sort identifier.

<thead>
    <tr>
        <th>
            <button class="sortatable" data-sort="firstname">
                First Name
            </button>
        </th>
    </tr>
</thead>

CSS

The sortatable class is used to style the buttons in the table headers and adds up/down arrows to indicate a sorting direction. This class must be added to the buttons in the header.

The sortatable class ensures that the buttons are fully responsive, occupying the available space in their respective header cells. The class also sets a uniform height and padding to create a consistent look across all sortable columns. Additionally, it includes a bold font weight to enhance visibility and accessibility. The arrows are created using CSS borders, which allows for lightweight and scalable icons without the need for additional image files.

The sort-asc and sort-desc classes refine the appearance of the arrows for ascending and descending sort order, respectively.

These classes provide flexibility in design, allowing developers to customize arrow colors and sizes through CSS variables such as var(--a-color). This ensures that the sorting indicators integrate seamlessly with the overall theme of the web application.

Demo

Example 1

Below is an example of a table that showcases the date of birth of very famous artists. The table includes first name, last name, and their respective dates. This serves as a demonstration of how to implement sortable tables using the SortaTable class. The second column is sorted in ascending order by last name, while each column remains 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

Example 2

Below is an example of a table that showcases significant dates and events from the Terminator franchise. The table includes key characters, the events they are associated with, and their respective dates. No initial sorting is performed; the table is presented as defined in the HTML. Notably, the last column, which contains descriptions, is not sortable, demonstrating that not all columns need to support sorting.

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

Example 3

This example demonstrates the use of checkboxes to dynamically control the visibility of columns in a table. Each checkbox corresponds to a column, and when checked, it makes the associated column visible. Unchecking a checkbox hides the respective column. Both sortable columns, marked with buttons in the table headers, and non-sortable columns, such as the "Description" column, can be toggled. The "Apply" button applies the selected visibility changes, ensuring a flexible and customizable table view based on user preference.

Columns visibility:
Description
Sarah Connor 1984-05-12 The primary target of the Terminator, a relentless cyborg sent from the future to eliminate her and prevent the birth of humanity's future resistance leader.
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