Sort It Out

HTML tables really grind my gears. Considering the nightmare of nested elements and semantic markup, tables aren’t much of an improvement over cuneiform tablets. And to do anything useful with the data—even just reordering it—you have to copy and paste it into a spreadsheet.

Unfortunately, browsers don’t natively support table sorting or filtering. Instead, you have to go back to the data source and re-run queries with ORDER BY / WHERE clauses. AJAX can make it appear seamless, but you’re still making unnecessary server requests.

If you’ve already loaded the data client side, why not sort it on the client-side? Sortable, from Adam Schwartz & HubSpot, does just that – and it only requires 2.5 lines of markup! All you have to do is include the JavaScript library & theme CSS and add the appropriate theme class & data attribute to your table.

Here’s a live demo along with source:

```html

First Last Email ID
Kevin Lewis [email protected] 3
Sacha Blare [email protected] 2

```

Sortable comes with six pre-built css themes, can be initialized on-demand for dynamically generated tables, automatically recognizes alpha vs. numeric data, and works great on mobile. Now go and give your tables some ‘zazz!

Join the discussion

2017 Neal Shyam