How to Build Responsive Tables With Sortable Columns

How to Build Responsive Tables With Sortable Columns

Building responsive tables with sortable columns can significantly enhance user experience on your website, particularly when displaying a large amount of data. In this guide, we will explore the best practices and techniques to create tables that not only adapt to various screen sizes but also allow users to sort data seamlessly.

Understanding Responsive Tables

A responsive table automatically adjusts its layout and design to fit different device screens—be it a desktop, tablet, or mobile. This flexibility ensures that users can easily scroll through and read the data without having to zoom in or out.

Basic Structure of an HTML Table

To begin with, let’s look at the basic structure of an HTML table:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1.1</td>
            <td>Data 1.2</td>
            <td>Data 1.3</td>
        </tr>
        <tr>
            <td>Data 2.1</td>
            <td>Data 2.2</td>
            <td>Data 2.3</td>
        </tr>
    </tbody>
</table>

CSS for Responsive Design

Next, we will write some CSS rules to ensure our table is responsive. Here’s a simple way to achieve that:

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
@media (max-width: 600px) {
    thead {
        display: none; /* Hide headers on small screens */
    }
    tr {
        display: block; /* Make rows block elements */
        margin-bottom: 10px;
    }
    td {
        display: block;
        text-align: right;
        position: relative;
        padding-left: 50%; /* Add space for labels */
    }
    td:before {
        content: attr(data-label); /* Display header name */
        position: absolute;
        left: 10px;
        width: 50%;
        padding-left: 10px;
        text-align: left;
        font-weight: bold;
    }
}

Making Columns Sortable with JavaScript

To add sorting functionality, we'll incorporate a simple JavaScript function. This function will sort the table by the clicked column header.

function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;
    dir = "asc"; 
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];
            if (dir == "asc") {
                if (x.innerHTML > y.innerHTML) {
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == "desc") {
                if (x.innerHTML < y.innerHTML) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount++;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}

Implementing the Sorting Functionality

Now, you can enhance the table headers to call the sorting function when clicked:

<