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

Tabulazer - Chrome Extension to Filter and Sort HTML Tables

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 Tabulazer - Chrome Extension to Filter and Sort HTML Tables icon) on the top-right part of Chrome, where all the extension buttons are.
  • A new "Tabulazer" element (also with the Tabulazer - Chrome Extension to Filter and Sort HTML Tables 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:

Tabulazer - Chrome Extension to Filter and Sort HTML Tables

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

5 Comments on “Tabulazer - Chrome Extension to Filter and Sort HTML Tables A free Google Chrome Extension that can be used to filter, sort and enlarge HTML tables from any web page

  1. 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! :-)

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

Leave a Reply

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


The reCAPTCHA verification period has expired. Please reload the page.

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