How to add column sorting to your dataviewjs tables

[pryley]

Javascript Snippet (use the CustomJS plugin to load it):

class SortableTable {
    init (index) {
        document.querySelectorAll('table.dataview').forEach(table => {
            table.classList.add('dataview-sortable');
            table.querySelectorAll('th').forEach((columnEl, columnIdx) => {
                if (index === columnIdx) {
                    columnEl.dataset.sort = 'asc';
                }
                columnEl.removeEventListener('click', this.onSort.bind(this, table, columnIdx))
                columnEl.addEventListener('click', this.onSort.bind(this, table, columnIdx))
            });
        });
    }

    compareCellValues (cellValue1, cellValue2) {
      return this.isEmptyOrNaN(cellValue1) || this.isEmptyOrNaN(cellValue2)
        ? cellValue1.toString().localeCompare(cellValue2)
        : cellValue1 - cellValue2;
    }

    compareFn (columnIdx, ascending) {
        return (firstEl, secondEl) => {
            const cellValue1 = this.getCellValueInColumn(firstEl, columnIdx);
            const cellValue2 = this.getCellValueInColumn(secondEl, columnIdx);
            return ascending
                ? this.compareCellValues(cellValue1, cellValue2)
                : this.compareCellValues(cellValue2, cellValue1);
        }
    }

    getCellValueInColumn (tr, columnIdx) {
        return tr.children[columnIdx].innerText;
    }

    isEmptyOrNaN (obj) {
        return obj === "" || isNaN(obj);
    }

    onSort (table, columnIdx, ev) {
        const th = ev.currentTarget;
        const sort = th.dataset.sort || 'desc';
        table.querySelectorAll('th').forEach(el => el.dataset.sort = '')
        th.dataset.sort = 'desc' === sort ? 'asc' : 'desc';
        const compareFn = this.compareFn(columnIdx, ('desc' === sort));
        const tbody = table.querySelector("tbody");
        Array.from(tbody.querySelectorAll("tr"))
          .sort(compareFn)
          .forEach(tr => tbody.appendChild(tr));
    }
}

CSS Snippet:

.dataview-sortable .table-view-th {
    cursor: pointer;
    padding-right: 20px;
    position: relative;
    user-select: none;
}
.dataview-sortable .table-view-th::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z' fill='%23000' /%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    color: #fff;
    content: '';
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
}
.table-view-th[data-sort="asc"]::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9H11L7.5 4.5L4 9Z' fill='%23000' /%3E%3C/svg%3E");
}
.table-view-th[data-sort="desc"]::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6H11L7.5 10.5L4 6Z' fill='%23000' /%3E%3C/svg%3E%0A");
}
.theme-dark .table-view-th::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z' fill='%23fff' /%3E%3C/svg%3E%0A");
}
.theme-dark .table-view-th[data-sort="asc"]::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9H11L7.5 4.5L4 9Z' fill='%23fff' /%3E%3C/svg%3E");
}
.theme-dark .table-view-th[data-sort="desc"]::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6H11L7.5 10.5L4 6Z' fill='%23fff' /%3E%3C/svg%3E%0A");
}

Implementation:

```dataviewjs
const { SortableTable } = customJS

await new Promise(resolve => resolve(
    dv.table(["File", "Genre", "Time Read", "Rating"], dv.pages("#book")
        .sort(b => b.rating)
        .map(b => [b.file.link, b.genre, b["time-read"], b.rating])
    )
));

// Since the "rating" column is sorted by default, we'll pass that column index (indexes start from 0)
SortableTable.init(3)
```

Demonstration (theme is Shimmering Focus):

CleanShot.2022-04-22.at.17.52.20.mp4

[AB1908]

Wait what? How are you able to view tables in source mode? Is that a literal markdown table??

[AB1908]

Haha yeah, I hadn't seen Live Preview before. This is pretty awesome. However, I thought DV tables worked with sortable? Or did they not and this is the only way?

[pryley]

If it did that would be awesome...I know that sorting and filtering has been talked about, but I don't think it's currently available which is why I'm using this method instead.

[AB1908]

I'll check that out too, if I can.

[pryley]

I'll check that out too, if I can.

Oh, you're right 🫢! Sortable does work with dataview tables. I don't know why I thought it didn't... So this is unnecessary.

[AB1908]

Haha all good!