This content originally appeared on Raymond Camden and was authored by Raymond Camden
Just a quick note. Last year, I blogged a demo of a web component that lets you wrap an existing HTML table and progressively add table sorting. I'm rather proud of that demo and was actually planning on doing a quick video about it, but while testing I encountered two small bugs that somehow missed my earlier rigorous testing. (And by rigorous testing I mean a few minutes of clicking around.)
Specifically, the issue is in the "when clicking to sort, notice if we sorted this column before and if so, reverse the sort" area:
sortCol(e,i) { let sortToggle = 1; if(this.lastSort === i) { this.sortAsc = !this.sortAsc; if(!this.sortDir) sortToggle = -1; } this.lastSort = i; this.data.sort((a,b) => { if(a[i] < b[i]) return -1 * sortToggle; if(a[i] > b[i]) return 1 * sortToggle; return 0; }); this.renderTable();}In the function above, i simply refers to the index of the column that is being sorted. My thinking at the time was - the default is ascending, but if you are clicking the same column as last time, reverse it.
There are two bugs here:
- One, I'm using
sortDirwhich doesn't even exist. I must have renamed it tosortAscand missed it. That was an easy fix. - The second issue was harder to find. I clicked to sort a column a few times, then clicked another column a few times, then came back, and noticed the second click wouldn't properly change the direction. Why? Because I never revered
sortAscto true on a new column.
So the fix looks like this:
sortCol(e,i) { let sortToggle = 1; if(this.lastSort === i) { this.sortAsc = !this.sortAsc; if(!this.sortAsc) sortToggle = -1; } else this.sortAsc = true; this.lastSort = i; this.data.sort((a,b) => { if(a[i] < b[i]) return -1 * sortToggle; if(a[i] > b[i]) return 1 * sortToggle; return 0; }); this.renderTable();}I'm going to edit the older blog post now and correct the samples, but if you just want to see the finished version, here it is:
See the Pen PE Table for Sorting (2) - Edited by Raymond Camden (@cfjedimaster) on CodePen.
This content originally appeared on Raymond Camden and was authored by Raymond Camden
Raymond Camden | Sciencx (2024-05-29T18:00:00+00:00) Update to My Table Sorting Web Component. Retrieved from https://www.scien.cx/2024/05/29/update-to-my-table-sorting-web-component/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.