Tabulazer A free Google Chrome Extension that can be used to filter, sort and enlarge HTML tables from any web page

Tabulazer

Tabulazer is a lightweight Google Chrome Extension that can be used to filter, sort and enlarge HTML tables from any web page. If you’re frequently working with websites featuring a lot of HTML tables without native filtering and/or sorting features, then there’s a high chance you’ll find this extension worth a shot.

Installation

To install it, go to the Chrome Web Store and search for “Tabulazer” (or just click here), then click to the Add to Chrome button. If everything goes well, you’ll end up with two new elements on your Google Chrome client:

  • A new button (with the Tabulazer icon) on the top-right part of Chrome, where all the extension buttons are.
  • A new “Tabulazer” element (also with the Tabulazer icon) in the context menu, i.e. the one you access with right-clicking on any element on a page.

By clicking on the top-right button you’ll access the configuration settings, where you’ll be able to set the following options:

  • Force table width to 100%. When enabled, the plugin will enlarge any HTML table to 100% width, thus taking all the available space on your browser. If the table is wrapped by other HTML container elements, those will also be enlarged/set to 100% in order to accomodate the table. If you don’t want all this to happen, just keep it disabled.
  • Enable sorting. Enable it to add sorting and reverse-sorting capabilities to all the HTML table columns: both can be activated by clicking (and double-clicking) to the column header itself.
  • Enable filtering. Enable it to add filtering capabilities to all the HTML table columns: the filter will look like a standard HTML textbox that, if non-empty, will automatically update the table content, filtering out all the rows not containing the given text within that column.
  • Enable paging. Enable it to add paging capabilities to the HTML table: notice that the filtering and sorting capabilities won’t be affected by that (they will always take all rows into account).

Once you’ve set these options, right-click to a HTML table within any HTML page and select the Tabulazer context menu item to “tabulaze” it.

Here’s how the HTML table looks like before and after the “Tabulaze” effect:

Tabulazer

Feature list

Here’s the breakdown of the extension’s main features:

  • Real-time column sorting (and reverse sorting)
  • Real-time column filtering (using full-text search)
  • Width enlarge to 100% (to increase readability)
  • Dynamic paging (useful for very long tables)
  • Resizable columns (using mouse handlers)
  • Copy & Paste support with CSV/Excel/Google Sheets support (using CTRL+C)

The last feature might be very useful for those who are looking for a quick & effective way to export huge amount of HTML table data to CSV, MS Excel and/or Google Sheets (registry lists, billing reports, and so on).

NOTE: The actual transformation is done using Tabulator, a great open-source table management JS library by Oli Folkerd released under MIT-license

External Packages

Here’s a list of all the open-source, third-party packages that have been used within the extension (all credit due to their respective authors):

Useful Resources

Fork me on GitHub

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.