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 sortDir which doesn't even exist. I must have renamed it to sortAsc and 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 sortAsc to 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.