Update to My Table Sorting Web Component

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)... more →
Posted in: JavaScript

Building Table Sorting and Pagination in Alpine.js

A few months back, I realized that one of my most popular blog posts (Building Table Sorting and Pagination in Vue.js) would be an excellent opportunity to update for a more plain (or vanilla if you will) JavaScript version. That post (Building Table Sorting and Pagination in JavaScript) was pretty fun to write. As much as I enjoyed using Vue over the past few years, I find myself more and more trying to rely less on external frameworks and sticking to simpler methods of getting things done. That being said… I am also really intrigued by Alpine.js. Raymond Camden… more →
Posted in: JavaScript

Building Table Sorting and Pagination in JavaScript

As part of my job in managing this blog, I check my stats frequently, and I’ve noticed that some of my more basic Vue.js articles have had consistently good traffic for quite some time. As I find myself doing more and more with "regular" JavaScript (sometimes referred to as "Vanilla JavaScript", but I’m not a fan of the term) I thought it would be a good idea to update those old posts for folks who would rather skip using a framework. With that in mind, here is my update to my post from over four years ago, Building Table Sorting and Pagination in Vue.js Raymond Camden… more →
Posted in: JavaScript