Skip to content

Instantly share code, notes, and snippets.

@DvdGiessen

DvdGiessen/sortablefilterable.js

Last active July 7, 2023 10:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DvdGiessen/6256ab5cbdb17e58593a1d74a9b009e9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DvdGiessen/6256ab5cbdb17e58593a1d74a9b009e9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. DvdGiessen revised this gist Jul 7, 2023. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions sortablefilterable.js
    View file
    Original file line number Diff line number Diff line change
    @@ -30,6 +30,9 @@ function sortableFilterable(tableElement) {
    a = b;
    b = c;
    }
    if (a.cells.length <= cellIndex || b.cells.length <= cellIndex) {
    return 0;
    }
    const aCell = a.cells.item(cellIndex);
    const bCell = b.cells.item(cellIndex);
    const aValue = typeof aCell.dataset.sortValue !== 'undefined' ? aCell.dataset.sortValue : aCell.innerText;
  2. DvdGiessen created this gist Aug 12, 2018.
    86 changes: 86 additions & 0 deletions sortablefilterable.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    function sortableFilterable(tableElement) {
    if (tableElement.tHead && tableElement.tHead.rows.length > 0) {
    const headers = tableElement.tHead.rows.item(0).cells;
    for (const header of headers) {
    if (typeof header.dataset.sortType !== 'undefined' && ['auto', 'string', 'integer'].indexOf(header.dataset.sortType) >= 0) {
    header.addEventListener('click', () => {
    // Classes
    const reverseSort = header.classList.contains('sorted') && !header.classList.contains('sorted-reverse');
    for (const h of headers) {
    h.classList.remove('sorted', 'sorted-reverse');
    }
    header.classList.add('sorted');
    if (reverseSort) {
    header.classList.add('sorted-reverse');
    }

    // Find offset
    let cellIndex = 0;
    for (const h of headers) {
    if (h === header) break;
    cellIndex += h.colspan || 1;
    }

    // Sort each tbody
    for (const tbody of tableElement.tBodies) {
    const rows = Array.prototype.slice.call(tbody.rows);
    rows.sort((a, b) => {
    if (reverseSort) {
    const c = a;
    a = b;
    b = c;
    }
    const aCell = a.cells.item(cellIndex);
    const bCell = b.cells.item(cellIndex);
    const aValue = typeof aCell.dataset.sortValue !== 'undefined' ? aCell.dataset.sortValue : aCell.innerText;
    const bValue = typeof bCell.dataset.sortValue !== 'undefined' ? bCell.dataset.sortValue : bCell.innerText;
    let type = typeof header.dataset.sortType !== 'undefined' ? header.dataset.sortType : 'auto';
    if (type === 'auto') {
    if(!isNaN(aValue) && !isNaN(bValue)) {
    type = 'integer';
    } else {
    type = 'string';
    }
    }
    switch (type) {
    case 'string':
    return aValue.localeCompare(bValue, undefined, {sensitivity: 'base', numeric: true});
    case 'integer':
    return ((+aValue) - (+bValue)) || 0;
    default:
    return 0;
    }
    });

    // Reorder the DOM elements
    for (const row of rows) {
    tbody.appendChild(row);
    }
    }
    });
    header.style.cursor = 'pointer';
    }
    }
    }

    const filterInput = document.createElement('input');
    filterInput.type = 'search';
    filterInput.addEventListener('input', () => {
    const terms = filterInput.value.toLowerCase().split(' ');
    for (const tbody of tableElement.tBodies) {
    for (const row of tbody.rows) {
    const rowContent = row.innerHTML.replace(/<[^>]+>/g, ' ').toLowerCase();
    let shouldHide = true;
    for (const term of terms) {
    if (rowContent.indexOf(term) >= 0) {
    shouldHide = false;
    break;
    }
    }
    row.style.display = shouldHide ? 'none' : null;
    }
    }
    });
    tableElement.parentElement.insertBefore(filterInput, tableElement);
    return filterInput;
    }