How to create a simple 2 columns Table with Sort/Search

You can edit page where you want to add this > Add a Code Block

Paste this code into Code Block

<div class="tp-container">
    <input type="text" id="searchInput" onkeyup="searchTable()" class="search-input" placeholder="Search for songs or artists...">

    <table id="songTable">
        <thead>
            <tr>
                <th onclick="sortTable(0)">Song Name</th>
                <th onclick="sortTable(1)">Artist Name</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>Shape of You</td><td>Ed Sheeran</td></tr>
            <tr><td>Blinding Lights</td><td>The Weeknd</td></tr>
            <tr><td>Someone Like You</td><td>Adele</td></tr>
            <tr><td>Bohemian Rhapsody</td><td>Queen</td></tr>
            <tr><td>Stay</td><td>Justin Bieber</td></tr>
            <tr><td>Levitating</td><td>Dua Lipa</td></tr>
            <tr><td>Believer</td><td>Imagine Dragons</td></tr>
            <tr><td>Senorita</td><td>Shawn Mendes</td></tr>
            <tr><td>Thinking Out Loud</td><td>Ed Sheeran</td></tr>
            <tr><td>Bad Guy</td><td>Billie Eilish</td></tr>
            <tr><td>Rockstar</td><td>Post Malone</td></tr>
            <tr><td>Perfect</td><td>Ed Sheeran</td></tr>
            <tr><td>Havana</td><td>Camila Cabello</td></tr>
            <tr><td>Memories</td><td>Maroon 5</td></tr>
            <tr><td>Rolling in the Deep</td><td>Adele</td></tr>
        </tbody>
    </table>
</div>

<script>
    // Search function
    function searchTable() {
        const input = document.getElementById("searchInput");
        const filter = input.value.toLowerCase();
        const table = document.getElementById("songTable");
        const tr = table.getElementsByTagName("tr");

        for (let i = 1; i < tr.length; i++) {
            let td = tr[i].getElementsByTagName("td");
            let match = false;
            for (let j = 0; j < td.length; j++) {
                if (td[j].innerText.toLowerCase().indexOf(filter) > -1) {
                    match = true;
                    break;
                }
            }
            tr[i].style.display = match ? "" : "none";
        }
    }

    // Sort function
    function sortTable(columnIndex) {
        const table = document.getElementById("songTable");
        let rows = Array.from(table.rows).slice(1);
        const isAscending = table.getAttribute("data-sort-asc") === "true";
        
        rows.sort((rowA, rowB) => {
            const cellA = rowA.cells[columnIndex].innerText.toLowerCase();
            const cellB = rowB.cells[columnIndex].innerText.toLowerCase();
            
            if (cellA < cellB) return isAscending ? -1 : 1;
            if (cellA > cellB) return isAscending ? 1 : -1;
            return 0;
        });

        table.setAttribute("data-sort-asc", !isAscending);

        // Clear previous sort icons
        const headers = table.querySelectorAll("th");
        headers.forEach((th, idx) => th.classList.remove("sort-asc", "sort-desc"));

        // Set current sort icon
        headers[columnIndex].classList.toggle("sort-asc", isAscending);
        headers[columnIndex].classList.toggle("sort-desc", !isAscending);

        rows.forEach(row => table.appendChild(row));
    }
</script>
 <style>
 .tp-container {
            max-width: 600px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .search-input {
            margin-bottom: 15px;
            padding: 8px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            cursor: pointer;
            position: relative;
        }

        th:hover {
            background-color: #f1f1f1;
        }

        th:after {
            content: '';
            position: absolute;
            right: 10px;
            transition: all 0.3s ease;
        }

        th.sort-asc:after {
            content: '▲';
        }

        th.sort-desc:after {
            content: '▼';
        }

        tr:hover {
            background-color: #f9f9f9;
        }
    </style>

Result