ReActiveTable bookmarklet

October 23rd, 2013. Tagged: react

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...

ReActiveTable

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.

Tell your friends about this post: Facebook, Twitter, Google+

Sorry, comments disabled and hidden due to excessive spam. Working on restoring the existing comments...

Meanwhile, hit me up on twitter @stoyanstefanov