Sortable tables script

jodie
jodie

(Yoinked from stack overflow mostly) - here's some stuff to make sortable tables:

In the template:

<div class="sortableTable">

| *Name* | *Dangerousness* | *Description* |

| Biscuit | 7 | a person who resembles a biscuit |

| Ryder | 2 | a small child on a tiny quadbike |

</div>

In the CSS:

 

div.sortableTable tr:first-child td {

   cursor: pointer;

}

In the javascript:

const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 

    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)

    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...

document.querySelectorAll('div.sortableTable tr:first-child td').forEach(th => th.addEventListener('click', (() => {

    const table = th.closest('table');

    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))

        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))

        .forEach(tr => table.appendChild(tr) );

})));

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions