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
icon) on the top-right part of Chrome, where all the extension buttons are. - A new "Tabulazer" element (also with the 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:
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).
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):
- Tabulator, by Olifolkerd (MIT license)
- Bootstrap, by the Bootstrap team (MIT license)
- JQuery, by the JQuery foundation (MIT license)
Useful Resources
