Sortable Table Template

Empower users to organize data their way with this interactive, sortable table.

By clicking on a column header, users can sort the table rows in ascending or descending order, making it much easier to find and analyze information.

Screenshot of a table with up/down arrows in the column headers, indicating sort functionality.

Get Source Code → Preview →

About this Sortable Table

Static tables are useful, but dynamic, sortable tables provide a significantly better user experience for data analysis. This template provides the complete HTML, CSS, and JavaScript structure to create this functionality from scratch.

The core of this template lies in the JavaScript. When a header is clicked:

It identifies the column index and the data type (text or numbers).
It reads all the rows from the tbody.
It performs a sort operation on the rows based on the content of the selected column.
Finally, it re-appends the sorted rows back into the table.

The CSS adds a visual cue to the clickable headers (a "sort" icon) and indicates the current sort direction.

Key Features:

Client-Side Sorting: Instantly sorts data in the browser without needing to reload the page.
Sorts Text and Numbers: The included JavaScript can handle both alphabetical and numerical sorting.
Visual Indicators: CSS adds icons to the headers to show which column is being sorted and in which direction.
Dependency-Free: The entire solution uses "vanilla" JavaScript, meaning no external libraries like jQuery are required.

Implementation Notes:

This is a lightweight, educational example. For very large datasets (thousands of rows), complex data types, or advanced features like multi-column sorting, it's recommended to use a robust, dedicated library like DataTables.net.

Code

Here's the full code, including the HTML, CSS, and JavaScript required for the sortable table:

<table class="sortable-table" id="mySortableTable">
    <thead>
        <tr>
            
            <th scope="col" class="sortable-header">Country</th>
            <th scope="col" class="sortable-header">Capital City</th>
            <th scope="col" class="sortable-header td-number">Population (millions)</th>
            <th scope="col" class="sortable-header td-number">Area (kmÂ²)</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Japan</td><td>Tokyo</td><td class="td-number">125.7</td><td class="td-number">377975</td></tr>
        <tr><td>Brazil</td><td>BrasÃlia</td><td class="td-number">212.6</td><td class="td-number">8515767</td></tr>
        <tr><td>Canada</td><td>Ottawa</td><td class="td-number">38.0</td><td class="td-number">9984670</td></tr>
        <tr><td>Germany</td><td>Berlin</td><td class="td-number">83.2</td><td class="td-number">357022</td></tr>
        <tr><td>Australia</td><td>Canberra</td><td class="td-number">25.7</td><td class="td-number">7692024</td></tr>
        <tr><td>India</td><td>New Delhi</td><td class="td-number">1380.0</td><td class="td-number">3287263</td></tr>
    </tbody>
</table>

headers.forEach((header, headerIndex) => {
        // Add a sort icon to each header
        const sortIcon = document.createElement('span');
        sortIcon.classList.add('sort-icon');
        sortIcon.innerHTML = ' &#x2195';
        header.appendChild(sortIcon);

header.addEventListener('click', () => {
            // Determine sort direction
            if (currentSort.column === headerIndex) {
                currentSort.isAscending = !currentSort.isAscending;
            } else {
                currentSort.column = headerIndex;
                currentSort.isAscending = true;
            }

const tableBody = table.querySelector('tbody');
            const rows = Array.from(tableBody.querySelectorAll('tr'));

// Sort the rows
            rows.sort((a, b) => {
                const aValue = a.children[headerIndex].innerText;
                const bValue = b.children[headerIndex].innerText;
                
                // Check if the values are numbers
                const isNumber = !isNaN(parseFloat(aValue)) && isFinite(aValue);
                
                if (isNumber) {
                    return currentSort.isAscending 
                        ? parseFloat(aValue) - parseFloat(bValue) 
                        : parseFloat(bValue) - parseFloat(aValue);
                } else {
                    return currentSort.isAscending 
                        ? aValue.localeCompare(bValue) 
                        : bValue.localeCompare(aValue);
                }
            });

// Re-append rows in sorted order
            rows.forEach(row => tableBody.appendChild(row));
            
            // Update sort icons
            updateSortIcons(headers, currentSort);
        });
    });
}

// Initialize the sortable table
const myTable = document.getElementById('mySortableTable');
if (myTable) {
    makeTableSortable(myTable);
}
</script>

View Output