Sortable List Template

An interactive list where users can re-sort the content based on different criteria.

This component is perfect for directories, product listings, or any data list where providing sorting options enhances the user experience.

A screenshot of a list with 'Sort by Name' and 'Sort by Popularity' buttons above it.

Get Source Code Preview

About this Template

This template uses vanilla JavaScript to add sorting functionality to a list. Users can click buttons to instantly reorder the list items. The component is designed to sort by either the item's text content or a custom data attribute, making it highly flexible. This example uses a visible "Popularity Score" that is read from an HTML data-* attribute, providing clear user feedback for the sort action.

Features

Multi-Criteria Sorting: Provides buttons to sort by different properties (alphabetical or custom data).
Pure JavaScript: The sorting logic is lightweight and has no external library dependencies.
Custom Data Attributes: Uses HTML data-* attributes to store sortable values directly on the list items.
Self-Contained: The entire component's HTML, CSS, and JavaScript are scoped to a single parent class.

Code Breakdown

The JavaScript first selects the sorting buttons and the ul element containing the list items. It adds a click event listener to each button.

When a button is clicked, its handler first converts the NodeList of list items into a proper JavaScript Array, which is necessary to use the sort() method. It then calls the sort() method on this array. Inside the sort's comparison function, it checks which button was clicked. If the "Sort by Name" button was clicked, it compares the textContent of the items. If "Sort by Popularity" was clicked, it retrieves and compares the value of the data-popularity attribute.

After the array is sorted, the script loops through the sorted array and uses the appendChild() method to re-add each list item to the parent ul. Since an element can only exist in one place in the DOM, appendChild() automatically moves the item to the end of the list, effectively reordering the entire list based on the sorted array.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f1f5f9;
            color: #334155;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Sortable List Component Styles - Copy from here
           ========================================================================== */
        .sortable-list-template {
            --sort-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --sort-primary-text-color: #1e293b;
            --sort-secondary-text-color: #64748b;
            --sort-accent-color: #0d9488;
            --sort-bg-color: #ffffff;
            --sort-border-color: #cbd5e1;

font-family: var(--sort-font-family);
            color: var(--sort-primary-text-color);
            width: 100%;
            max-width: 600px;
            background-color: var(--sort-bg-color);
            border: 1px solid var(--sort-border-color);
            border-radius: .5rem;
            padding: 2rem;
        }

.sortable-list-template *,
        .sortable-list-template *::before,
        .sortable-list-template *::after {
            box-sizing: border-box;
        }

.sortable-list-template .list-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .sortable-list-template .list-header h2 {
            font-size: 1.75rem;
            margin: 0;
        }
        
        .sort-controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        
        .sort-btn {
            padding: .5rem 1rem;
            font-size: .875rem;
            font-weight: 500;
            background-color: #f1f5f9;
            color: #475569;
            border: 1px solid var(--sort-border-color);
            border-radius: .25rem;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s;
        }

.sort-btn:hover, .sort-btn:focus {
            background-color: var(--sort-accent-color);
            color: white;
            border-color: var(--sort-accent-color);
        }

.hero-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .hero-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            border-bottom: 1px solid var(--sort-border-color);
        }

.hero-list li:first-child {
            border-top: 1px solid var(--sort-border-color);
        }
        
        .hero-details .hero-name {
            font-weight: 600;
        }

.hero-details .hero-power {
            font-size: .9rem;
            color: var(--sort-secondary-text-color);
            line-height: 1.4;
        }

.hero-popularity {
            flex-shrink: 0;
            text-align: center;
            background-color: var(--sort-accent-color);
            color: white;
            font-weight: 700;
            font-size: .8rem;
            width: 48px;
            padding: .25rem;
            border-radius: .25rem;
        }

.hero-popularity span {
            display: block;
            font-size: 1.25rem;
            line-height: 1.2;
        }

</style>
</head>
<body>

<div class="sortable-list-template">
    <header class="list-header">
        <h2>Hero Roster</h2>
    </header>

<div class="sort-controls">
        <button type="button" class="sort-btn" id="sort-by-name">Sort by Name (A-Z)</button>
        <button type="button" class="sort-btn" id="sort-by-popularity">Sort by Popularity Score (Desc)</button>
    </div>

<ul class="hero-list" id="hero-list">
        <li data-popularity="86">
            <div class="hero-details">
                <div class="hero-name">Captain Compliment</div>
                <div class="hero-power">Defeats evil with disarmingly sincere praise.</div>
            </div>
            <div class="hero-popularity">Score<span>86</span></div>
        </li>
        <li data-popularity="99">
            <div class="hero-details">
                <div class="hero-name">The Amazing Abstainer</div>
                <div class="hero-power">Can resist a second piece of cake.</div>
            </div>
            <div class="hero-popularity">Score<span>99</span></div>
        </li>
         <li data-popularity="65">
            <div class="hero-details">
                <div class="hero-name">Professor Punctual</div>
                <div class="hero-power">Arrives exactly on time, every time.</div>
            </div>
            <div class="hero-popularity">Score<span>65</span></div>
        </li>
        <li data-popularity="92">
            <div class="hero-details">
                <div class="hero-name">The Formidable Forsaker</div>
                <div class="hero-power">Remembers to cancel free trials before they expire.</div>
            </div>
            <div class="hero-popularity">Score<span>92</span></div>
        </li>
    </ul>

</body>
</html>

View Output