A Chrome Extension to filter, sort, page and style any existing HTML table using the Tabulator JS library (v6.3.0).
Do you work with websites featuring a lot of HTML tables? Would you like to filter, sort and/or page them? If so, then this lightweight extension might be useful.
You can use it to transform any standard table into a fully-featured interactive table with the following features:
- Real-time column sorting (and reverse sorting)
- Real-time column filtering (including a quick full-text search)
- Dynamic paging (useful for very long tables) with configurable page size
- Resizable columns (using mouse handlers)
- Optional width enlarge to 100% (to increase readability)
- Side Panel UI to quickly:
- pick a table from the page (overlay picker)
- list all detected tables and toggle them on/off
- jump to/select a specific table
- Visual preferences such as compact mode, zebra rows and font size scaling
- Optional column chooser (show/hide columns)
- Optional layout persistence (remember table layout)
- Copy/export features:
- copy table data to clipboard
- download table data as CSV/XLSX/XML
- export either the current view (respecting filters/sort when available) or all rows
... and more!
Highly recommended if you're dealing with big tables and need to quickly extract relevant data from them.
The transformation is done using Tabulator, a great table management JS library made by Oli Folkerd which I'm extensively using in all my web-based projects.
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 (v6.3.0), by Oli Folkerd (MIT license)
- SheetJS, for XLSX export (Apache-2.0 license)