Table Sorter

WHAT IT DOES

Table Sorter is a floating panel that brings powerful sorting and filtering capabilities to any table on the web. The panel automatically detects all tables on the current page and lets you sort them by any column—numeric, string, date, or mixed content—with ascending or descending order. You can click column headers directly on the page (the panel adds visual sort indicators) or select a table and column from the panel interface. Multi‑column sorting (secondary sort) is supported, and sort preferences are automatically persisted per domain, so your sorting state remains across page reloads. The panel also includes a text‑based row filter that hides rows not matching the search term and highlights matching rows for quick scanning. All sorting is applied directly to the live DOM table without breaking existing event listeners or styling, making it safe to use on complex, interactive websites. Perfect for data analysts, researchers, project managers, or anyone who regularly works with data in tables.

WHERE IT RUNS

The panel overlays any website that loads the BotGentz extension—whether you're on a data dashboard, a CRM, a project management tool, a spreadsheet view, a reporting page, or any other web page. It works on all modern Chromium‑based browsers (Chrome, Edge, Brave, Arc) and Firefox. The script injects a self‑contained UI element that does not interfere with the host page's layout, styles, or JavaScript execution. It runs client‑side only, with no external API calls or cloud dependencies.

HOW TO USE

After installing the free BotGentz extension, visit any page and click the extension icon to activate the panel. The first time you use Table Sorter, it will appear as a draggable widget near the bottom‑right corner of your viewport. To sort a table:

- The panel automatically detects all tables on the page and lists them in the dropdown.

- Select a table, then select a column, choose ascending or descending, and click "Sort Table".

- Alternatively, click on any table header directly on the page—the panel adds ▲ and ▼ indicators and sorts the table instantly.

To filter rows:

- Enter text in the "Search text" field and click "Apply Filter". Rows not containing the text are hidden, and matching rows are highlighted.

To manage sorting:

- Click "Reset Sort" to revert the table to its original order.

- Use "Copy Table Info" to copy a summary of all tables on the page to your clipboard.

The panel remembers your sort preferences per domain, so refreshing the page restores your last sorting state.

INTELLIGENT TYPE DETECTION AND DOM‑SAFE SORTING ENGINE

Unlike naive string‑based sorter, this panel uses an intelligent type detection engine that samples the first 10 rows of a column to determine the most appropriate data type—numeric, date, or string. For numeric values, it strips commas and parses floats; for dates, it converts to timestamps; for strings, it performs case‑insensitive comparison. This ensures that numbers like "$1,234" and dates like "Jan 15, 2024" sort correctly without manual intervention. The sorting engine operates directly on the DOM using a stable, non‑destructive approach: it collects all row elements into an array, sorts them using JavaScript's native sort (which is stable in modern browsers), and then re‑appends them to the tbody using a document fragment to minimize reflows. Crucially, the engine preserves all existing event listeners, data attributes, and inline styles on row elements by moving the elements themselves rather than cloning or replacing them. The visual sort indicators are added as lightweight span elements that do not interfere with existing header content. Multi‑column sorting is implemented via a secondary sort comparator that applies additional sorting criteria when the primary column values are equal.

THE PANEL

- Drag: Click and hold the panel's header bar to move it anywhere on the screen.

- Per‑site position: The panel stores its last position separately for each domain (e.g., different positions for Airtable vs. Google Sheets) using the browser's localStorage, keyed by hostname.

- Snap: When dragged near any edge of the viewport, the panel snaps to that edge with a 16px margin for a clean, docked feel.

- Collapse: Click the "−" button in the header to collapse the panel to a compact title bar, preserving all current values. Click "+" to expand it back.

- Resize: Drag the bottom‑right corner handle to resize the panel from 280px to 600px wide and 200px to 500px tall; the layout adapts responsively.

- Escape: Press the Escape key while the panel is focused to close it entirely (you can reopen it from the extension toolbar).

PLEASE NOTE

This script requires the free BotGentz extension to run—it is not a standalone bookmarklet or user script. Websites frequently update their DOM structures and security policies; while we strive to keep the panel functional across thousands of sites, occasional updates may be needed. The sorter performs all operations entirely in your browser—no data is sent to any server, and no cookies or tracking identifiers are used. Your table selections, sort preferences, and filter settings remain private to your local session and are persisted only via GM_setValue (the extension's local storage) for convenience, not shared across devices or sessions. Sorting large tables (500+ rows) may cause brief performance delays—the panel is optimized for tables up to a few hundred rows. The filter is case‑insensitive and matches substrings; for advanced filtering (regex, multiple conditions), consider using dedicated data analysis tools.