ActiveTable bookmarklet

July 16, 2013 4:23 pm | 6 Comments

I write a lot of code that generates HTML tables. If the code gets a lot of use, I’ll go back later and integrate my default JavaScript library to do table sorting. (My code is based on Standardista Table Sorting by Neil Crosby.) In addition to sorting, sometimes it’s nice to be able to hide superfluous columns. For example, the HTTP Archive page for viewing a single website’s results (e.g., WholeFoods) has a table with 39 columns! I wrote some custom JavaScript to allow customizing which columns were displayed. But generally, I generate tables that aren’t sortable and have fixed columns.

It turns out, this is true for many websites. Each day I visit a few pages with a table that I wish was sortable. Sometimes there are so many columns I wish I could hide the less important ones. This is especially true if my 13″ screen is the only monitor available.

This problem finally became big enough that I wrote a bookmarklet to solve the problem: activetable.js

Here’s how to use it:

1. Add this ActiveTable bookmarklet link to your bookmarks. (Drag it to your Bookmarks toolbar, or right-click and add the link to your bookmarks.)

2. Go to a page with a big table. For example, Show Slow. Once that page is loaded, click on the ActiveTable bookmark. This loads activetable.js which makes the table sortable and customizable. The table’s header row is briefly highlighted in blue to indicate it’s active.

3. Hover over a column you want to sort or remove. The ActiveTable widget is displayed:

4. Click on the sort icon to toggle between ascending and descending. Click on the red “X” to hide the column. To UNhide all columns just alt+click on any TH element.

Another nice feature of ActiveTable is the columns you choose to hide are stored in localStorage. The next time you come to the same page and launch ActiveTable, you’re asked if you want to hide the same columns again.

CAVEATS: I’ve only tested the code on Chrome and Firefox. Tables with TD cells that span multiple rows or columns may not work as expected.

You can test it out on these real world pages:

  • Voting Record For Feinstein – This table is 20 pages long and doesn’t have any way to sort. 
  • World University Rankings – This table is already sortable, but sorting the table causes the entire page to reload. ActiveTable does sorting in place, without a reload.
  • Imdb All-Time USA Box office – Even though this table has 557 rows, it’s not sortable. ActiveTable allows sorting, but sorts the dollar values alphabetically.

I love having my Web my way. ActiveTable makes it more enjoyable for me to wade through the massive tables I encounter every day.

6 Responses to ActiveTable bookmarklet

  1. Sean Hogan | 16-Jul-13 at 5:44 pm | Permalink |

    Now imagine if sites were implemented API-first with HTML payloads. Then you could use a bookmarklet to personalize page-layout, styling and behaviors. Save your prefs in localStorage for future visits, and use pushState-assisted-navigation so you don’t need to run the bookmarklet on each page of a visit to the site.

  2. Balu Ertl | 17-Jul-13 at 4:33 am | Permalink |

    Thank you, Steve! Until that I used Firefox’s Ctrl+drag selection to highlight table cells for copying and ordering in OpenOffice Calc, but your solution is definitely a much more convenient way to customize the display of any tables.

  3. Eric | 17-Jul-13 at 4:22 pm | Permalink |

    Hey Steve, someone tried to solve a problem that is fairly similar to yours at http://www.excelmashup.com. It doesn’t have the column abilities, but it does a few other interesting things you might like.

  4. dalin | 20-Jul-13 at 5:18 pm | Permalink |

    “This table is already sortable, but sorting the table causes the entire page to reload. ActiveTable does sorting in place, without a reload.”

    That’s because you’re only viewing the first 200 results of a 400 result set. ActiveTable may actually confuse the situation here because you are only doing a sub-sort the 200 results.

  5. Steve Souders | 20-Jul-13 at 10:53 pm | Permalink |

    @Sean: I would love having such a programmable Web.

    @Eric: That’s a nice solution when the website owner is willing to change their page, but it’s not a bookmarklet.

    @dalin: I think you believe that the original table resorts the entire 400 results when you pick a column – but that’s not the case. For example, “Aalborg University” is in the 400, but if you are looking at 001-200 and sort by Institution it’s not listed first. The sorting is only being done on those first 200 rows, and so reloading the entire page isn’t as efficient as ActiveTable’s resort.

  6. Sean Hogan | 21-Jul-13 at 6:12 pm | Permalink |

    @Steve: It’s simple if you think about it.

    The server-generated markup is just the primary content for the URL (with the lightest possible augmentation), and then progressively enhance in the browser depending on device capabilities and user prefs. A bookmarklet just intercepts this process.

    On the server-side it probably sounds like stepping backwards to Web-0.9, which might be why it doesn’t get any traction.