Previously... React and tables. I've been meaning to improve a little on the table example built with React and a post by Steve was the final push. He shared his "ActiveTable" bookmarklet.
So, introducing a bookmarklet to make it easier to work with random HTML tables you come across...
Drag this link to your bookmarks, then find a page that has data in tables, for example this one. Click the bookmarklet and get a "pop" button atop of each table.
This button copies the table into a new overlay that lets you fiddle with the data in the table, namely...
Sort.
Filter as-you-type.
Edit (double click a cell, type, Enter).
Download the data in CSV and JSON.
Codez
As usual, working with React was a pleasure. All you do is mess up with the data (just array methods: sort(), filter(), reduce()) and let React deal with the rendering stuff. All this functionality came at about 140 lines of code, available here.
The messier part is the bookmark part - working with the old school DOM (to extract data from random tables) and writing iframes and styles and scripts. It's right here.
Overlay
The idea about the overlay was inspired by Safari's Reader functionality (I recently looked at it).
Made me wonder if this thing - being able to play with tabular data found in pages - should be a standard feature built into browsers? Limited audience, maybe, but still convenient.
