Table added as a block to section of a page

I am a musician and need to have a song list on a page.   This should have 2 columns (song and artist), and then to be ordered by song name or artist name.  

What's the best way to do this?  Ideally free (ie not a paid plugin or code), not super complicated and with the ability to easily add more songs to the list.

Thanks for your help

On 2/24/2024 at 2:41 AM, mhuk01 said:

I am a musician and need to have a song list on a page.   This should have 2 columns (song and artist), and then to be ordered by song name or artist name.  

What's the best way to do this?  Ideally free (ie not a paid plugin or code), not super complicated and with the ability to easily add more songs to the list.

Thanks for your help

Squarespace markdown block supports Table out of the box, you can use tool like https://www.tablesgenerator.com/markdown_tables to create the table markup and copy the generate code into a markdown block on your site.

I used it a lot on my blog like https://beyondspace-showcase.squarespace.com/blog/squarespace-websites-2023

Thanks for your help.  Is it possible to then order these columns?

On 3/9/2024 at 5:30 PM, mhuk01 said:

Thanks for your help.  Is it possible to then order these columns?

You can also follow these to create a table with sort feature

First, edit page where you want to add this > Add a Code Block

Paste code like this 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