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.

November 2022
Curse of the Crimson Throne

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