@renderorange/alanbradley 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Blaine Motsinger
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,258 @@
+# @renderorange/alanbradley
+
+Lightweight table filter, sorting, and pagination library, with optional background chunking.
+
+`alanbradley` fights for the user on the grid.
+
+## Features
+
+- zero dependencies
+- progressive background chunking for large datasets
+- client-side sort (numeric, date, string)
+- global text search across configurable fields (including nested data)
+- per-column dropdown filters
+- pagination with configurable page sizes
+- expandable subtable rows
+- fully themable via CSS custom properties
+
+## Installation
+
+```bash
+npm install @renderorange/alanbradley
+```
+
+Or copy `src/alanbradley.js` and `src/alanbradley.css` into your project.
+
+## Usage
+
+```html
+<link rel="stylesheet" href="alanbradley.css" />
+
+<table id="my-table">
+    <tbody></tbody>
+</table>
+<div class="alanbradley-status"></div>
+
+<script src="alanbradley.js"></script>
+<script>
+    new AlanBradley("#my-table", {
+        api: "/api/items",
+        columns: [
+            { key: "id", label: "ID", sortable: true },
+            { key: "name", label: "Name", sortable: true },
+            { key: "status", label: "Status", sortable: true },
+        ],
+        filters: [
+            { key: "status", label: "Status", options: ["active", "closed"] },
+        ],
+        search_fields: ["name", "status"],
+        render_row: function (item) {
+            return (
+                "<tr>" +
+                '<td data-label="ID">' + item.id + "</td>" +
+                '<td data-label="Name">' + item.name + "</td>" +
+                '<td data-label="Status">' + item.status + "</td>" +
+                "</tr>"
+            );
+        },
+    });
+</script>
+```
+
+## API Contract
+
+Your API endpoint must accept:
+
+```
+GET /api/items?chunk=1&page_size=500
+```
+
+And return:
+
+```json
+{
+    "data": [{ "id": 1, "name": "Item 1" }],
+    "total": 150,
+    "chunk": 1,
+    "page_size": 500
+}
+```
+
+| Field       | Type   | Description                  |
+| ----------- | ------ | ---------------------------- |
+| `data`      | array  | Array of row objects         |
+| `total`     | number | Total records in the dataset |
+| `chunk`     | number | Current chunk number         |
+| `page_size` | number | Records per chunk            |
+
+## Options
+
+| Option               | Type     | Default               | Description                                  |
+| -------------------- | -------- | --------------------- | -------------------------------------------- |
+| `api`                | string   | required              | API endpoint URL                             |
+| `columns`            | array    | required              | Column definitions                           |
+| `columns[].key`      | string   | required              | Data field name (also used as sort key)      |
+| `columns[].label`    | string   | required              | Header display text                          |
+| `columns[].sortable` | boolean  | `false`               | Whether column is sortable                   |
+| `filters`            | array    | `[]`                  | Dropdown filter definitions                  |
+| `filters[].key`      | string   | required              | Data field to filter on                      |
+| `filters[].label`    | string   | required              | Display label                                |
+| `filters[].options`  | array    | required              | Values (strings or `{value, label}` objects) |
+| `search_fields`      | array    | `[]`                  | Field names to search across (supports dot-notation for nested data) |
+| `render_row`         | function | required              | Returns HTML string for a data row           |
+| `render_expanded`    | function | `null`                | Returns HTML string for expanded row content  |
+| `on_expand`          | function | `null`                | Callback fired when a row is expanded        |
+| `on_collapse`        | function | `null`                | Callback fired when a row is collapsed      |
+| `page_size`          | number   | `50`                  | Rows per page                                |
+| `page_size_options`  | array    | `[25, 50, 100]`       | Available page sizes                         |
+| `chunk`              | boolean  | `true`                | Enable progressive chunked loading           |
+| `chunk_size`         | number   | `500`                 | Records per chunk                            |
+| `search_placeholder` | string   | `'Search...'`         | Search input placeholder                     |
+| `empty_message`      | string   | `'No records found.'` | Message when no data                         |
+
+## Public Methods
+
+| Method                        | Description                                    |
+| ----------------------------- | ---------------------------------------------- |
+| `refresh()`                   | Re-fetch all data                              |
+| `go_to_page(n)`               | Navigate to page n                             |
+| `set_sort(column, direction)` | Set sort programmatically                      |
+| `set_filter(key, value)`      | Set a filter value                              |
+| `clear_filters()`             | Reset all filters and search                    |
+| `search(term)`                | Set search term programmatically                |
+| `toggle_row(index)`           | Toggle expanded state of row at index           |
+| `expand_row(index)`           | Expand row at index                             |
+| `collapse_row(index)`         | Collapse row at index                           |
+| `collapse_all()`              | Collapse all expanded rows                      |
+| `destroy()`                   | Remove all generated DOM elements               |
+
+## HTML Structure
+
+```html
+<!-- Controls row: search + filters -->
+<table class="alanbradley">
+    <thead>
+        <!-- generated by JS -->
+    </thead>
+    <tbody>
+        <!-- generated by JS -->
+        <!-- with render_expanded, each row gets a toggle cell, -->
+        <!-- and expanded rows get a colspan td with your content -->
+    </tbody>
+</table>
+
+<!-- Status bar: page size, pagination, count -->
+<div class="alanbradley-status">
+    <select class="alanbradley-page-size">...</select>
+    <span class="alanbradley-page-size-label">per page</span>
+    <div class="alanbradley-pagination">...</div>
+    <span class="alanbradley-status-text">Showing 1-50 of 200</span>
+</div>
+```
+
+## Expandable Rows
+
+When `render_expanded` is provided, each row gets a toggle button in the first column. Clicking it reveals the content returned by `render_expanded`:
+
+```js
+new AlanBradley("#my-table", {
+    api: "/api/items",
+    columns: [
+        { key: "id", label: "ID", sortable: true },
+        { key: "name", label: "Name", sortable: true },
+        { key: "status", label: "Status", sortable: true },
+    ],
+    search_fields: ["name", "items.description"],
+    render_row: function (item) {
+        return (
+            "<tr>" +
+            '<td data-label="ID">' + item.id + "</td>" +
+            '<td data-label="Name">' + item.name + "</td>" +
+            '<td data-label="Status">' + item.status + "</td>" +
+            "</tr>"
+        );
+    },
+    render_expanded: function (item) {
+        if (!item.items || item.items.length === 0) {
+            return "<p>No items found.</p>";
+        }
+        var html = '<dl>';
+        for (var i = 0; i < item.items.length; i++) {
+            html += '<dt>' + item.items[i].label + '</dt>';
+            html += '<dd>' + item.items[i].description + '</dd>';
+        }
+        html += '</dl>';
+        return html;
+    },
+});
+```
+
+Expanded rows are collapsed automatically when sorting, filtering, searching, or changing pages.
+
+### Nested Search
+
+`search_fields` supports dot-notation paths for searching nested data:
+
+```js
+search_fields: ["name", "items.description"]
+```
+
+When a path resolves to an array (e.g., `items`), each item's field (e.g., `description`) is searched. A match on any nested item includes the parent row in results.
+
+## CSS Customization
+
+All styling uses CSS custom properties. Override `:root` or target a specific container:
+
+```css
+:root {
+    --alanbradley-sort-arrow-color: #6c757d;
+    --alanbradley-active-sort-color: #0d6efd;
+    --alanbradley-row-hover-bg: #f1f3f5;
+    --alanbradley-pagination-active-bg: #0d6efd;
+    --alanbradley-pagination-active-color: #fff;
+    --alanbradley-pagination-hover-bg: #e9ecef;
+    --alanbradley-loading-opacity: 0.5;
+    --alanbradley-filter-bg: #fff;
+    --alanbradley-filter-border: #ced4da;
+    --alanbradley-filter-border-radius: 0.375rem;
+    --alanbradley-search-bg: #fff;
+    --alanbradley-search-border: #ced4da;
+    --alanbradley-search-border-radius: 0.375rem;
+    --alanbradley-status-color: #6c757d;
+    --alanbradley-empty-color: #6c757d;
+    --alanbradley-toggle-color: #6c757d;
+    --alanbradley-toggle-hover-color: #0d6efd;
+    --alanbradley-expanded-bg: #f8f9fa;
+    --alanbradley-expanded-border: #dee2e6;
+}
+```
+
+### Dark mode
+
+```css
+[data-theme="dark"] {
+    --alanbradley-row-hover-bg: #363636;
+    --alanbradley-filter-bg: #333;
+    --alanbradley-filter-border: #555;
+    --alanbradley-search-bg: #333;
+    --alanbradley-search-border: #555;
+    --alanbradley-status-color: #999;
+    --alanbradley-empty-color: #999;
+    --alanbradley-toggle-color: #999;
+    --alanbradley-toggle-hover-color: #6c9eff;
+    --alanbradley-expanded-bg: #2b2b2b;
+    --alanbradley-expanded-border: #444;
+}
+```
+
+### Bootstrap 5
+
+Add Bootstrap's `.table` class alongside `.alanbradley` for base table styling:
+
+```html
+<table id="my-table" class="table alanbradley"></table>
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@renderorange/alanbradley",
+    "version": "2.0.0",
+    "description": "lightweight table filter, sorting, and pagination library, with optional background chunking",
+    "license": "MIT",
+    "author": "Blaine Motsinger <blaine@renderorange.com>",
+    "main": "src/alanbradley.js",
+    "style": "src/alanbradley.css",
+    "files": [
+        "src/",
+        "LICENSE",
+        "README.md"
+    ],
+    "keywords": [
+        "table",
+        "sort",
+        "filter",
+        "pagination",
+        "grid",
+        "vanilla-js"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/renderorange/alanbradley.git"
+    },
+    "bugs": {
+        "url": "https://github.com/renderorange/alanbradley/issues"
+    },
+    "homepage": "https://github.com/renderorange/alanbradley#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "test:coverage": "jest --coverage",
+        "lint": "node node_modules/eslint/bin/eslint.js . --fix",
+        "lint:check": "node node_modules/eslint/bin/eslint.js ."
+    },
+    "devDependencies": {
+        "eslint": "^9.0.0",
+        "@stylistic/eslint-plugin": "^3.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0"
+    }
+}

package/src/alanbradley.css

@@ -0,0 +1,235 @@
+/* AlanBradley - Interactive table enhancements */
+/* Does NOT style base table — bring your own CSS */
+/* Namespace: alanbradley-* */
+
+:root {
+    --alanbradley-sort-arrow-color: #6c757d;
+    --alanbradley-active-sort-color: #0d6efd;
+    --alanbradley-row-hover-bg: #f1f3f5;
+    --alanbradley-pagination-active-bg: #0d6efd;
+    --alanbradley-pagination-active-color: #fff;
+    --alanbradley-pagination-hover-bg: #e9ecef;
+    --alanbradley-loading-opacity: 0.5;
+    --alanbradley-filter-bg: #fff;
+    --alanbradley-filter-border: #ced4da;
+    --alanbradley-filter-border-radius: 0.375rem;
+    --alanbradley-search-bg: #fff;
+    --alanbradley-search-border: #ced4da;
+    --alanbradley-search-border-radius: 0.375rem;
+    --alanbradley-status-color: #6c757d;
+    --alanbradley-empty-color: #6c757d;
+    --alanbradley-toggle-color: #6c757d;
+    --alanbradley-toggle-hover-color: #0d6efd;
+    --alanbradley-expanded-bg: #f8f9fa;
+    --alanbradley-expanded-border: #dee2e6;
+}
+
+/* Controls bar: search + filters */
+.alanbradley-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.alanbradley-search {
+    width: 200px;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    background: var(--alanbradley-search-bg);
+    border: 1px solid var(--alanbradley-search-border);
+    border-radius: var(--alanbradley-search-border-radius);
+    outline: none;
+    transition: border-color 0.15s ease;
+}
+
+.alanbradley-search:focus {
+    border-color: var(--alanbradley-active-sort-color);
+    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
+}
+
+.alanbradley-page-size {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8125rem;
+    background: var(--alanbradley-filter-bg);
+    border: 1px solid var(--alanbradley-filter-border);
+    border-radius: var(--alanbradley-filter-border-radius);
+}
+
+.alanbradley-filter {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    background: var(--alanbradley-filter-bg);
+    border: 1px solid var(--alanbradley-filter-border);
+    border-radius: var(--alanbradley-filter-border-radius);
+}
+
+.alanbradley-filter-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--alanbradley-status-color);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    margin-right: 0.25rem;
+}
+
+/* Sortable headers */
+.alanbradley-sortable {
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    padding-right: 1.5rem;
+}
+
+.alanbradley-sortable:hover {
+    background: var(--alanbradley-row-hover-bg);
+}
+
+.alanbradley-sortable::after {
+    content: "\2195";
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--alanbradley-sort-arrow-color);
+    opacity: 0.4;
+    font-size: 0.6rem;
+}
+
+.alanbradley-sort-asc::after {
+    content: "\2191";
+    opacity: 1;
+    font-size: 0.6rem;
+}
+
+.alanbradley-sort-desc::after {
+    content: "\2193";
+    opacity: 1;
+    font-size: 0.6rem;
+}
+
+/* Row hover */
+.alanbradley tbody tr:hover {
+    background: var(--alanbradley-row-hover-bg);
+}
+
+/* Loading state */
+.alanbradley-loading {
+    opacity: var(--alanbradley-loading-opacity);
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+}
+
+/* Empty state */
+.alanbradley-empty td {
+    text-align: center;
+    padding: 2rem;
+    color: var(--alanbradley-empty-color);
+    font-style: italic;
+}
+
+/* Expandable rows */
+.alanbradley-toggle {
+    cursor: pointer;
+    width: 2rem;
+    text-align: center;
+    color: var(--alanbradley-toggle-color);
+    user-select: none;
+}
+
+.alanbradley-toggle:hover {
+    color: var(--alanbradley-toggle-hover-color);
+}
+
+.alanbradley-expanded td {
+    background: var(--alanbradley-expanded-bg);
+    border-bottom: 1px solid var(--alanbradley-expanded-border);
+    padding: 0.75rem 1rem;
+}
+
+/* Status bar: [page size] per page [pagination] [showing X-Y of Z] */
+.alanbradley-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    font-size: 0.8125rem;
+    color: var(--alanbradley-status-color);
+}
+
+.alanbradley-page-size-label {
+    margin-right: auto;
+}
+
+.alanbradley-pagination {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.alanbradley-pagination-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 0.5rem;
+    font-size: 0.875rem;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    background: transparent;
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.alanbradley-pagination-item:hover:not(.alanbradley-pagination-active):not(
+    .alanbradley-pagination-disabled
+) {
+    background: var(--alanbradley-pagination-hover-bg);
+}
+
+.alanbradley-pagination-active {
+    background: var(--alanbradley-pagination-active-bg);
+    color: var(--alanbradley-pagination-active-color);
+    border-color: var(--alanbradley-pagination-active-bg);
+}
+
+.alanbradley-pagination-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.alanbradley-status-text {
+    margin-left: auto;
+}
+
+/* Mobile responsive */
+@media (max-width: 767.98px) {
+    .alanbradley-controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .alanbradley-search {
+        width: 100%;
+    }
+
+    .alanbradley-filter {
+        width: 100%;
+    }
+}
+
+[data-theme="dark"] {
+    --alanbradley-row-hover-bg: #363636;
+    --alanbradley-filter-bg: #333;
+    --alanbradley-filter-border: #555;
+    --alanbradley-search-bg: #333;
+    --alanbradley-search-border: #555;
+    --alanbradley-status-color: #999;
+    --alanbradley-empty-color: #999;
+    --alanbradley-toggle-color: #999;
+    --alanbradley-toggle-hover-color: #6c9eff;
+    --alanbradley-expanded-bg: #2b2b2b;
+    --alanbradley-expanded-border: #444;
+}

package/src/alanbradley.js

@@ -0,0 +1,733 @@
+/**
+ * AlanBradley - lightweight table filter, sorting, and pagination library
+ * with optional background chunking.
+ *
+ * Usage:
+ *   const table = new AlanBradley('#my-table', {
+ *       api: '/api/endpoint',
+ *       columns: [{ key: 'name', label: 'Name', sortable: true }],
+ *       filters: [{ key: 'status', label: 'Status', options: ['active', 'closed'] }],
+ *       search_fields: ['name', 'email'],
+ *       render_row: (item) => '<tr><td>' + item.name + '</td></tr>'
+ *   });
+ */
+(function () {
+    "use strict";
+
+    function AlanBradley (selector, options) {
+        this.el =
+      typeof selector === "string"
+          ? document.querySelector(selector)
+          : selector;
+        if (!this.el)
+            throw new Error("AlanBradley: element not found: " + selector);
+
+        this.api = options.api;
+        this.columns = options.columns || [];
+        this.filters = options.filters || [];
+        this.search_fields = options.search_fields || [];
+        this.render_row = options.render_row;
+        this.page_size = options.page_size || 50;
+        this.page_size_options = options.page_size_options || [25, 50, 100];
+        this.chunk_size = options.chunk_size || 500;
+        this.chunk = options.chunk !== false;
+        this.search_placeholder = options.search_placeholder || "Search...";
+        this.empty_message = options.empty_message || "No records found.";
+        this.on_sort = options.on_sort || null;
+        this.on_filter = options.on_filter || null;
+        this.render_expanded = options.render_expanded || null;
+        this.on_expand = options.on_expand || null;
+        this.on_collapse = options.on_collapse || null;
+
+        this.all_data = [];
+        this.loaded_chunks = {};
+        this.total = 0;
+        this.fully_loaded = false;
+        this.current_page = 1;
+        this.sort_column = null;
+        this.sort_dir = "asc";
+        this.search_term = "";
+        this.filter_values = {};
+        this.expanded_rows = new Set();
+        this.search_timeout = null;
+
+        this.init();
+    }
+
+    AlanBradley.prototype.init = function () {
+        this.build_controls();
+        this.build_table();
+        this.build_status();
+        this.el.querySelector("tbody").classList.add("alanbradley-loading");
+
+        if (this.render_expanded) {
+            let self = this;
+            this._onToggleClick = function (e) {
+                let td = e.target.closest(".alanbradley-toggle");
+                if (!td) return;
+                let index = parseInt(td.getAttribute("data-alanbradley-row"), 10);
+                if (isNaN(index)) return;
+                self.toggle_row(index);
+            };
+            this.el.querySelector("tbody")
+                .addEventListener("click", this._onToggleClick);
+        }
+
+        this.fetch_chunk(1);
+    };
+
+    // --- Data loading ---
+
+    AlanBradley.prototype.fetch_chunk = function (chunk_num) {
+        let self = this;
+        if (this.loaded_chunks[chunk_num]) return;
+
+        let params = new URLSearchParams();
+        params.set("chunk", chunk_num);
+        params.set("page_size", this.chunk ? this.chunk_size : 999999);
+
+        let url = this.api + "?" + params.toString();
+        this.loaded_chunks[chunk_num] = "loading";
+
+        fetch(url)
+            .then(function (response) {
+                if (!response.ok) throw new Error("HTTP " + response.status);
+                return response.json();
+            })
+            .then(function (result) {
+                self.total = result.total;
+                self.all_data = self.all_data.concat(result.data);
+                self.loaded_chunks[chunk_num] = "done";
+
+                if (!self.chunk) {
+                    self.fully_loaded = true;
+                } else {
+                    let total_chunks = Math.ceil(self.total / self.chunk_size);
+                    if (chunk_num >= total_chunks) {
+                        self.fully_loaded = true;
+                    } else {
+                        self.fetch_chunk(chunk_num + 1);
+                    }
+                }
+
+                self.render();
+            })
+            .catch(function (err) {
+                console.error("AlanBradley fetch error:", err);
+                self.loaded_chunks[chunk_num] = "error";
+            });
+    };
+
+    // --- Data accessors ---
+
+    AlanBradley.prototype.get_filtered_data = function () {
+        let data = this.all_data;
+        let self = this;
+
+        // Column filters
+        let filter_keys = Object.keys(this.filter_values);
+        if (filter_keys.length > 0) {
+            data = data.filter(function (row) {
+                for (let i = 0; i < filter_keys.length; i++) {
+                    let key = filter_keys[i];
+                    let val = String(row[key] || "")
+                        .toLowerCase();
+                    if (val !== self.filter_values[key].toLowerCase()) return false;
+                }
+                return true;
+            });
+        }
+
+        // Search
+        if (this.search_term && this.search_fields.length > 0) {
+            let term = this.search_term.toLowerCase();
+            data = data.filter(function (row) {
+                for (let i = 0; i < self.search_fields.length; i++) {
+                    let field = self.search_fields[i];
+                    let val = self._resolve_field(row, field);
+                    if (val === null || val === undefined) continue;
+                    if (Array.isArray(val)) {
+                        for (let j = 0; j < val.length; j++) {
+                            if (val[j] && String(val[j])
+                                .toLowerCase()
+                                .indexOf(term) !== -1) return true;
+                        }
+                    } else {
+                        if (String(val)
+                            .toLowerCase()
+                            .indexOf(term) !== -1) return true;
+                    }
+                }
+                return false;
+            });
+        }
+
+        return data;
+    };
+
+    AlanBradley.prototype.get_sorted_data = function () {
+        let data = this.get_filtered_data();
+
+        if (this.sort_column) {
+            let col = this.sort_column;
+            let dir = this.sort_dir === "desc" ? -1 : 1;
+            data = data.slice()
+                .sort(function (a, b) {
+                    let va = a[col];
+                    let vb = b[col];
+
+                    // Handle nulls
+                    if (va == null && vb == null) return 0;
+                    if (va == null) return dir;
+                    if (vb == null) return -dir;
+
+                    // Date sort (ISO date strings)
+                    if (
+                        typeof va === "string" &&
+          /^\d{4}-\d{2}-\d{2}/.test(va) &&
+          typeof vb === "string" &&
+          /^\d{4}-\d{2}-\d{2}/.test(vb)
+                    ) {
+                        let da = new Date(va)
+                            .getTime();
+                        let db = new Date(vb)
+                            .getTime();
+                        if (!isNaN(da) && !isNaN(db)) {
+                            return (da - db) * dir;
+                        }
+                    }
+
+                    // Numeric sort (handles string-encoded numbers)
+                    let na = parseFloat(va);
+                    let nb = parseFloat(vb);
+                    if (!isNaN(na) && !isNaN(nb) && String(va)
+                        .indexOf("-") !== 0) {
+                        return (na - nb) * dir;
+                    }
+
+                    // String sort
+                    va = String(va)
+                        .toLowerCase();
+                    vb = String(vb)
+                        .toLowerCase();
+                    if (va < vb) return -1 * dir;
+                    if (va > vb) return 1 * dir;
+                    return 0;
+                });
+        }
+
+        return data;
+    };
+
+    AlanBradley.prototype.get_page_data = function () {
+        let sorted = this.get_sorted_data();
+        let start = (this.current_page - 1) * this.page_size;
+        let end = start + this.page_size;
+        return sorted.slice(start, end);
+    };
+
+    AlanBradley.prototype.get_total_filtered = function () {
+        return this.get_filtered_data().length;
+    };
+
+    AlanBradley.prototype.get_total_pages = function () {
+        let total = this.get_total_filtered();
+        return Math.max(1, Math.ceil(total / this.page_size));
+    };
+
+    // --- Rendering ---
+
+    AlanBradley.prototype.render = function () {
+        this.render_rows();
+        this.render_pagination();
+        this.render_status();
+    };
+
+    AlanBradley.prototype.render_rows = function () {
+        let tbody = this.el.querySelector("tbody");
+        let page_data = this.get_page_data();
+        let colspan = this.columns.length + (this.render_expanded ? 1 : 0);
+
+        if (page_data.length === 0 && this.all_data.length > 0) {
+            tbody.innerHTML =
+        "<tr class=\"alanbradley-empty\"><td colspan=\"" +
+        colspan +
+        "\">" +
+        this.escape_html(this.empty_message) +
+        "</td></tr>";
+            return;
+        }
+
+        if (page_data.length === 0) {
+            tbody.classList.add("alanbradley-loading");
+            return;
+        }
+
+        tbody.classList.remove("alanbradley-loading");
+        let html = "";
+        for (let i = 0; i < page_data.length; i++) {
+            let row_html = this.render_row(page_data[i]);
+
+            if (this.render_expanded) {
+                let toggle_icon = this.expanded_rows.has(i) ? "\u2212" : "+";
+                let toggle_td = "<td class=\"alanbradley-toggle\" data-alanbradley-row=\"" + i + "\">" + toggle_icon + "</td>";
+                row_html = row_html.replace("<tr>", "<tr>" + toggle_td);
+
+                if (this.expanded_rows.has(i)) {
+                    let expanded_content = this.render_expanded(page_data[i]);
+                    html += row_html;
+                    html += "<tr class=\"alanbradley-expanded\"><td colspan=\"" + colspan + "\">" + expanded_content + "</td></tr>";
+                    continue;
+                }
+            }
+
+            html += row_html;
+        }
+        tbody.innerHTML = html;
+    };
+
+    AlanBradley.prototype.render_pagination = function () {
+        let el = this.pagination_el;
+        let total_pages = this.get_total_pages();
+
+        if (total_pages <= 1) {
+            el.innerHTML = "";
+            return;
+        }
+
+        let html = "";
+
+        // Previous
+        if (this.current_page > 1) {
+            html +=
+        "<button class=\"alanbradley-pagination-item\" data-alanbradley-page=\"" +
+        (this.current_page - 1) +
+        "\">&laquo;</button>";
+        } else {
+            html +=
+        "<button class=\"alanbradley-pagination-item alanbradley-pagination-disabled\">&laquo;</button>";
+        }
+
+        // Page numbers (sliding window of 5)
+        let start = Math.max(1, this.current_page - 2);
+        let end = Math.min(total_pages, this.current_page + 2);
+
+        if (start > 1) {
+            html +=
+        "<button class=\"alanbradley-pagination-item\" data-alanbradley-page=\"1\">1</button>";
+            if (start > 2)
+                html +=
+          "<span class=\"alanbradley-pagination-item alanbradley-pagination-disabled\">&hellip;</span>";
+        }
+
+        for (let p = start; p <= end; p++) {
+            if (p === this.current_page) {
+                html +=
+          "<button class=\"alanbradley-pagination-item alanbradley-pagination-active\">" +
+          p +
+          "</button>";
+            } else {
+                html +=
+          "<button class=\"alanbradley-pagination-item\" data-alanbradley-page=\"" +
+          p +
+          "\">" +
+          p +
+          "</button>";
+            }
+        }
+
+        if (end < total_pages) {
+            if (end < total_pages - 1)
+                html +=
+          "<span class=\"alanbradley-pagination-item alanbradley-pagination-disabled\">&hellip;</span>";
+            html +=
+        "<button class=\"alanbradley-pagination-item\" data-alanbradley-page=\"" +
+        total_pages +
+        "\">" +
+        total_pages +
+        "</button>";
+        }
+
+        // Next
+        if (this.current_page < total_pages) {
+            html +=
+        "<button class=\"alanbradley-pagination-item\" data-alanbradley-page=\"" +
+        (this.current_page + 1) +
+        "\">&raquo;</button>";
+        } else {
+            html +=
+        "<button class=\"alanbradley-pagination-item alanbradley-pagination-disabled\">&raquo;</button>";
+        }
+
+        el.innerHTML = html;
+
+        // Bind click handlers
+        let self = this;
+        let buttons = el.querySelectorAll("[data-alanbradley-page]");
+        for (let i = 0; i < buttons.length; i++) {
+            buttons[i].addEventListener("click", function () {
+                self.go_to_page(
+                    parseInt(this.getAttribute("data-alanbradley-page"), 10),
+                );
+            });
+        }
+    };
+
+    AlanBradley.prototype.render_status = function () {
+        let filtered_total = this.get_total_filtered();
+        if (filtered_total === 0 && this.all_data.length === 0) {
+            this.status_text_el.textContent = "";
+            return;
+        }
+        let start = (this.current_page - 1) * this.page_size + 1;
+        let end = Math.min(this.current_page * this.page_size, filtered_total);
+        let text = "Showing " + start + "-" + end + " of " + filtered_total;
+
+        if (!this.fully_loaded) {
+            let loaded = this.all_data.length;
+            let remaining = this.total - loaded;
+            text += " (" + remaining + " more loading)";
+        }
+
+        this.status_text_el.textContent = text;
+    };
+
+    // --- UI builders ---
+
+    AlanBradley.prototype.build_controls = function () {
+        let container = this.el.parentElement;
+
+        // Search + filters row
+        let controls = document.createElement("div");
+        controls.className = "alanbradley-controls";
+        let self = this;
+
+        // Search input (left)
+        let search = document.createElement("input");
+        search.type = "text";
+        search.className = "alanbradley-search";
+        search.placeholder = this.search_placeholder;
+        search.addEventListener("input", function () {
+            clearTimeout(self.search_timeout);
+            self.search_timeout = setTimeout(function () {
+                self.search_term = search.value.trim();
+                self.expanded_rows.clear();
+                self.current_page = 1;
+                self.render();
+            }, 300);
+        });
+        this.search_input = search;
+        controls.appendChild(search);
+
+        // Filter dropdowns (right)
+        for (let f = 0; f < this.filters.length; f++) {
+            let filter = this.filters[f];
+            let filter_wrapper = document.createElement("span");
+
+            let label = document.createElement("label");
+            label.className = "alanbradley-filter-label";
+            label.textContent = filter.label;
+            filter_wrapper.appendChild(label);
+
+            let select = document.createElement("select");
+            select.className = "alanbradley-filter";
+            select.setAttribute("data-alanbradley-filter", filter.key);
+
+            let all_opt = document.createElement("option");
+            all_opt.value = "";
+            all_opt.textContent = "All " + filter.label;
+            select.appendChild(all_opt);
+
+            for (let o = 0; o < filter.options.length; o++) {
+                let option = document.createElement("option");
+                let opt_val = filter.options[o];
+                if (typeof opt_val === "object" && opt_val !== null) {
+                    option.value = opt_val.value;
+                    option.textContent = opt_val.label;
+                } else {
+                    option.value = opt_val;
+                    option.textContent = opt_val;
+                }
+                select.appendChild(option);
+            }
+
+            (function (key) {
+                select.addEventListener("change", function () {
+                    if (this.value) {
+                        self.filter_values[key] = this.value;
+                    } else {
+                        delete self.filter_values[key];
+                    }
+                    self.expanded_rows.clear();
+                    self.current_page = 1;
+                    self.render();
+                    if (self.on_filter) self.on_filter(self.filter_values);
+                });
+            })(filter.key);
+
+            filter_wrapper.appendChild(select);
+            controls.appendChild(filter_wrapper);
+        }
+
+        container.insertBefore(controls, this.el);
+    };
+
+    AlanBradley.prototype.build_table = function () {
+        let thead = this.el.querySelector("thead");
+        if (!thead) {
+            thead = document.createElement("thead");
+            this.el.insertBefore(thead, this.el.firstChild);
+        }
+        thead.innerHTML = "";
+
+        let tr = document.createElement("tr");
+        let self = this;
+
+        if (this.render_expanded) {
+            let toggle_th = document.createElement("th");
+            toggle_th.className = "alanbradley-th";
+            tr.appendChild(toggle_th);
+        }
+
+        for (let i = 0; i < this.columns.length; i++) {
+            let col = this.columns[i];
+            let th = document.createElement("th");
+            th.className = "alanbradley-th";
+            th.textContent = col.label;
+
+            if (col.sortable) {
+                th.classList.add("alanbradley-sortable");
+                th.setAttribute("data-alanbradley-sort", col.key);
+                (function (key) {
+                    th.addEventListener("click", function () {
+                        if (self.sort_column === key) {
+                            self.sort_dir = self.sort_dir === "asc" ? "desc" : "asc";
+                        } else {
+                            self.sort_column = key;
+                            self.sort_dir = "asc";
+                        }
+                        self.expanded_rows.clear();
+                        self.current_page = 1;
+                        self.update_sort_indicators();
+                        self.render();
+                        if (self.on_sort) self.on_sort(self.sort_column, self.sort_dir);
+                    });
+                })(col.key);
+            }
+
+            tr.appendChild(th);
+        }
+
+        thead.appendChild(tr);
+    };
+
+    AlanBradley.prototype.build_status = function () {
+        let next = this.el.nextElementSibling;
+        if (next && next.classList.contains("alanbradley-status")) {
+            this.status_el = next;
+        } else {
+            this.status_el = document.createElement("div");
+            this.status_el.className = "alanbradley-status";
+            this.el.parentElement.insertBefore(this.status_el, next);
+        }
+
+        let self = this;
+
+        // Page size selector
+        let page_size_select = document.createElement("select");
+        page_size_select.className = "alanbradley-page-size";
+        for (let i = 0; i < this.page_size_options.length; i++) {
+            let opt = document.createElement("option");
+            opt.value = this.page_size_options[i];
+            opt.textContent = this.page_size_options[i];
+            if (this.page_size_options[i] === this.page_size) opt.selected = true;
+            page_size_select.appendChild(opt);
+        }
+        page_size_select.addEventListener("change", function () {
+            self.page_size = parseInt(this.value, 10);
+            self.current_page = 1;
+            self.render();
+        });
+        this.page_size_el = page_size_select;
+
+        // "per page" label
+        let page_size_label = document.createElement("span");
+        page_size_label.className = "alanbradley-page-size-label";
+        page_size_label.textContent = "per page";
+
+        // Pagination container
+        this.pagination_el = document.createElement("div");
+        this.pagination_el.className = "alanbradley-pagination";
+
+        // Status text
+        this.status_text_el = document.createElement("span");
+        this.status_text_el.className = "alanbradley-status-text";
+
+        this.status_el.appendChild(this.page_size_el);
+        this.status_el.appendChild(page_size_label);
+        this.status_el.appendChild(this.pagination_el);
+        this.status_el.appendChild(this.status_text_el);
+    };
+
+    AlanBradley.prototype.update_sort_indicators = function () {
+        let ths = this.el.querySelectorAll(".alanbradley-sortable");
+        for (let i = 0; i < ths.length; i++) {
+            ths[i].classList.remove("alanbradley-sort-asc", "alanbradley-sort-desc");
+            if (
+                this.sort_column &&
+        ths[i].getAttribute("data-alanbradley-sort") === this.sort_column
+            ) {
+                ths[i].classList.add(
+                    this.sort_dir === "asc"
+                        ? "alanbradley-sort-asc"
+                        : "alanbradley-sort-desc",
+                );
+            }
+        }
+    };
+
+    // --- Public API ---
+
+    AlanBradley.prototype.go_to_page = function (page) {
+        let total_pages = this.get_total_pages();
+        if (page < 1 || page > total_pages) return;
+        this.expanded_rows.clear();
+        this.current_page = page;
+        this.render();
+    };
+
+    AlanBradley.prototype.set_sort = function (column, direction) {
+        this.sort_column = column;
+        this.sort_dir = direction;
+        this.expanded_rows.clear();
+        this.current_page = 1;
+        this.update_sort_indicators();
+        this.render();
+    };
+
+    AlanBradley.prototype.set_filter = function (key, value) {
+        if (value) {
+            this.filter_values[key] = value;
+        } else {
+            delete this.filter_values[key];
+        }
+        let select = this.el.parentElement.querySelector(
+            "[data-alanbradley-filter=\"" + key + "\"]",
+        );
+        if (select) select.value = value || "";
+        this.expanded_rows.clear();
+        this.current_page = 1;
+        this.render();
+    };
+
+    AlanBradley.prototype.clear_filters = function () {
+        this.filter_values = {};
+        this.search_term = "";
+        this.expanded_rows.clear();
+        if (this.search_input) this.search_input.value = "";
+        let selects = this.el.parentElement.querySelectorAll(
+            "[data-alanbradley-filter]",
+        );
+        for (let i = 0; i < selects.length; i++) {
+            selects[i].value = "";
+        }
+        this.current_page = 1;
+        this.render();
+    };
+
+    AlanBradley.prototype.search = function (term) {
+        this.search_term = term;
+        this.expanded_rows.clear();
+        if (this.search_input) this.search_input.value = term;
+        this.current_page = 1;
+        this.render();
+    };
+
+    AlanBradley.prototype.refresh = function () {
+        this.all_data = [];
+        this.loaded_chunks = {};
+        this.fully_loaded = false;
+        this.current_page = 1;
+        let tbody = this.el.querySelector("tbody");
+        tbody.classList.add("alanbradley-loading");
+        this.fetch_chunk(1);
+    };
+
+    AlanBradley.prototype.destroy = function () {
+        let controls = this.el.parentElement.querySelector(".alanbradley-controls");
+        if (controls) controls.remove();
+        this.pagination_el.innerHTML = "";
+        this.status_el.innerHTML = "";
+        if (this._onToggleClick) {
+            this.el.querySelector("tbody")
+                .removeEventListener("click", this._onToggleClick);
+        }
+    };
+
+    AlanBradley.prototype.toggle_row = function (index) {
+        if (this.expanded_rows.has(index)) {
+            this.collapse_row(index);
+        } else {
+            this.expand_row(index);
+        }
+    };
+
+    AlanBradley.prototype.expand_row = function (index) {
+        if (this.expanded_rows.has(index)) return;
+        this.expanded_rows.add(index);
+        let page_data = this.get_page_data();
+        this.render_rows();
+        if (this.on_expand) this.on_expand(page_data[index], index);
+    };
+
+    AlanBradley.prototype.collapse_row = function (index) {
+        if (!this.expanded_rows.has(index)) return;
+        this.expanded_rows.delete(index);
+        let page_data = this.get_page_data();
+        this.render_rows();
+        if (this.on_collapse) this.on_collapse(page_data[index], index);
+    };
+
+    AlanBradley.prototype.collapse_all = function () {
+        this.expanded_rows.clear();
+        this.render_rows();
+    };
+
+    AlanBradley.prototype._resolve_field = function (obj, path) {
+        if (path.indexOf(".") === -1) {
+            return obj[path] != null ? obj[path] : null;
+        }
+        let parts = path.split(".");
+        let current = obj;
+        for (let i = 0; i < parts.length - 1; i++) {
+            if (current == null || typeof current !== "object") return null;
+            current = current[parts[i]];
+        }
+        if (current == null) return null;
+        let lastKey = parts[parts.length - 1];
+        if (Array.isArray(current)) {
+            let results = [];
+            for (let i = 0; i < current.length; i++) {
+                if (current[i] != null && current[i][lastKey] != null) {
+                    results.push(current[i][lastKey]);
+                }
+            }
+            return results.length > 0 ? results : null;
+        }
+        if (current[lastKey] != null) return current[lastKey];
+        return null;
+    };
+
+    AlanBradley.prototype.escape_html = function (str) {
+        let div = document.createElement("div");
+        div.appendChild(document.createTextNode(str));
+        return div.innerHTML;
+    };
+
+    // Export
+    if (typeof module !== "undefined" && module.exports) {
+        module.exports = AlanBradley;
+    } else {
+        window.AlanBradley = AlanBradley;
+    }
+})();