A few days ago we released Tabulazer, 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).
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
This is a great extension to add to the Chrome Arsenal!
Are you open to suggestions for further development?
After invoking the extension, it would be great if we could filter by more than a single value in a column. For example, given a column with values Apple, Orange, and Banana, being able to do something like “!= Banana” to show all the Apples and Oranges would be awesome. Alternatively, perhaps if there were a drop-down field at the top of the column displaying all the discreet values, where the user could make multiple selections of the values to keep?
Another suggestion would be to show a count of rows displayed after a filter is applied.
Overall, this is a great extension, and I’m very appreciative of it – THANK YOU! :-)
Thanks for the suggestion, I hope you’ll review our extensions on the Chrome Marketplace as well :)
Regarding your suggestions, we’ll be glad to evaluate them in the next weeks! Thank you,
Hi.Multi Sort Values In For One Column Will Be Very Usefull ….I Persoanlly Need that…..
Agreed!
Happy to have a table sorting extension though.
Please bring this to Firefox !