@qnc/qnc_data_tables 1.0.2 → 1.0.4

package/dist/qnc_data_tables.js

@@ -0,0 +1,1136 @@
+/*
+    Usage:
+    1. (optionally) call register_renderer(...)
+    2. call define('some-tag-name')
+    3. In html: <some-tag-name table-config="..."></some-tag-name>
+
+    table-config should be JSON-encoded options. See source for details.
+
+    TODO:
+    - stop using JSON.parse directly; work with unknown instead of any
+*/
+import m from "mithril";
+import * as drag_sorter from "@qnc/drag_sorter";
+import css from './qnc_data_tables_inline_css.js';
+/**
+ * Create a <style> element that users should inject into their document somewhere.
+ */
+export function make_style() {
+    const style = document.createElement('style');
+    style.innerText = css;
+    return style;
+}
+function expected_but_got(type_name, value) {
+    throw new Error(`Expected ${type_name} but got ${typeof value} ("${value}")`);
+}
+function is_json_map(value) {
+    return typeof value == "object" && value != null;
+}
+/** typescript uses Array.isArray() to narrow to any[] ; here, we narrow to unknown[] */
+function is_array(value) {
+    return Array.isArray(value);
+}
+function is_2_tuple(value) {
+    return Array.isArray(value) && value.length == 2;
+}
+function is_3_tuple(value) {
+    return Array.isArray(value) && value.length == 3;
+}
+function is_number(value) {
+    return typeof value == "number" && !isNaN(value);
+}
+function require_json_map(value) {
+    if (is_json_map(value))
+        return value;
+    expected_but_got('simple object', value);
+}
+function require_number(value) {
+    if (!is_number(value))
+        expected_but_got('number', value);
+    return value;
+}
+export function require_array(value) {
+    if (is_array(value))
+        return value;
+    expected_but_got('array', value);
+}
+export function require_array_of(value, element_validator) {
+    return require_array(value).map(element_validator);
+}
+/**
+    Like nullish coalescing operator, except that the fallback is ONLY used if value is undefined
+    Use in situations where null is a valid option and distinct from the fallback
+*/
+function defined_or_default(value, fallback) {
+    if (typeof value == "undefined")
+        return fallback;
+    return value;
+}
+function is_loading(xhr) {
+    return xhr.readyState != 4;
+}
+function log_error(xhr) {
+    /*
+    Always log the error but don't alert when status == 0, statusText == "" and responseText == "" because Safari
+    returns those conditions when a request is interrupted by the user making another request and we don't want to show
+    an empty alert. These conditions are also met when there is a network failure, however there is no info to
+    show in an alert so logging without alerting still makes sense.
+    */
+    console.warn("qnc_data_tables xhr error: ", xhr);
+    if (xhr.status != 0 || xhr.statusText != "" || xhr.responseText != "") {
+        alert("Data table error: " + xhr.responseText || xhr.statusText);
+    }
+}
+const DEFAULT_KEY_PREFIX = "table-manager";
+function storage_key(path, table_id, key) {
+    return `${path}#${table_id}-${key}`;
+}
+function optional_storage_wrapper(storage, path, table_id) {
+    if (!storage)
+        return {
+            get(key) {
+                return null;
+            },
+            set(key, value) { },
+        };
+    return {
+        get(key) {
+            return storage.getItem(storage_key(path, table_id, key));
+        },
+        set(key, value) {
+            storage.setItem(storage_key(path, table_id, key), value);
+        },
+    };
+}
+function render_help_text(text) {
+    return m("span", {
+        tabindex: 0,
+        title: text,
+        onclick: function (e) {
+            alert(text);
+            // This allows you to render help text inside other interactive elements
+            e.preventDefault();
+            e.stopPropagation();
+        },
+        onkeydown: function (e) {
+            if (e.key == "Enter" || e.key == " ") {
+                this.click();
+                // in case you pressed space, don't scroll page
+                e.preventDefault();
+            }
+        },
+        className: "qnc-data-table-help-text",
+    });
+}
+function render_header({ text, help_text, sortable, sorted, sorted_reverse, sort, sort_reverse, }) {
+    // entire header text is a (clickable) button (similar to many file browser and other UIs) :
+    if (sortable)
+        return m("button", {
+            onclick: sorted ? sort_reverse : sort,
+            className: "qnc-data-table-header-button",
+        }, 
+        // The wrapping span is so that you can see (in your browsers dev tools) exactly how wide the button content is, in case you want to fix column width at that width
+        // (note - button _might_ also suffice for this, but users might style button as full-width, for increased click target size)
+        m("span", m("span", { className: "qnc-data-table-header-button-text" }, text, " ", help_text), sorted &&
+            m("span", { className: "qnc-data-table-sort-indicator" }, " ▲"), sorted_reverse &&
+            m("span", { className: "qnc-data-table-sort-indicator" }, " ▼")));
+    // The wrapping span is so that you can see (in your browsers dev tools) exactly how wide the text content is, in case you want to fix column width at that width
+    return m("span", text, " ", help_text);
+    // OR, show text (always) with button (only when sortable) :
+    // text,
+    // ' ',
+    // sortable && m(
+    //     'button',
+    //     {onclick: sorted ? sort_reverse : sort, style: 'padding: 0'},
+    //     m('span', {style: !sorted && 'opacity: 0.2'}, '▼'),
+    //     m('span', {style: !sorted_reverse && 'opacity: 0.2'}, '▲'),
+    // ),
+}
+function render_form_content({ result_count_loading, result_count, results_limited, results_limited_to, table_data_loading, table, current_page, total_pages, set_page, page_size, set_page_size, editable_columns_list, selected_row_count, all_results_selected, entire_page_selected, selection_buttons, select_page, clear_page, select_table, clear_table, clear_selection, }) {
+    function with_loader(loading, content) {
+        return m("div", { className: loading ? "loading" : "" }, content);
+    }
+    const selection_operators = [
+        entire_page_selected
+            ? m("button", { onclick: clear_page }, "Deselect Current Page")
+            : m("button", { onclick: select_page }, "Select Current Page"),
+        all_results_selected
+            ? m("button", { onclick: clear_table }, "Deselect All Results")
+            : m("button", { onclick: select_table }, "Select All Results"),
+        m("button", { onclick: clear_selection, disabled: selected_row_count == 0 }, "Clear Selection"),
+    ];
+    function space_horizontally(gap, items) {
+        return m("div", { style: { overflow: "hidden" } }, m("div", { style: { display: "flex", marginRight: "-" + gap } }, items.map((item) => m("div", { style: { marginRight: gap } }, item, " "))));
+    }
+    return [
+        space_horizontally("2em", [
+            // Paginator
+            [
+                m("button", {
+                    type: "button",
+                    disabled: current_page <= 1,
+                    onclick: (e) => set_page(current_page - 1),
+                }, "<"),
+                " Page ",
+                m("input", {
+                    type: "number",
+                    value: current_page,
+                    max: total_pages,
+                    style: { width: "5em" },
+                    onchange: function (e) {
+                        set_page(parseInt(e.target.value));
+                    },
+                }),
+                " of ",
+                total_pages,
+                " ",
+                m("button", {
+                    type: "button",
+                    disabled: current_page >= total_pages,
+                    onclick: (e) => set_page(current_page + 1),
+                }, ">"),
+            ],
+            // Results per page
+            m("label", m("input", {
+                value: page_size,
+                type: "number",
+                style: { width: "5em" },
+                onchange: function (e) {
+                    set_page_size(parseInt(e.target.value));
+                },
+            }), " results per page"),
+            // Result count
+            with_loader(result_count_loading, m("span", m("b", result_count), " result(s) total.", results_limited &&
+                m("sup", { style: { color: "red" } }, "*"))),
+        ]),
+        results_limited &&
+            m("div", { style: { color: "red", fontWeight: "bold" } }, m("sup", "*"), "The result table is limited to the first ", results_limited_to, " results."),
+        // Columns list
+        m("details", { open: false }, m("summary", "Columns"), editable_columns_list),
+        // Result table
+        with_loader(table_data_loading, table),
+        // Selection options
+        selection_buttons.length > 0 && [
+            m("div", selection_operators.map((b) => [b, " "])),
+            // Selection buttons
+            m("fieldset", { disabled: selected_row_count == 0 }, m("legend", "With ", selected_row_count, " selected rows:"), m("div", selection_buttons.map((a) => [a, " "]))),
+        ],
+    ];
+}
+const table_renderers = new Map();
+function make_renderer(renderer) {
+    var _a, _b, _c;
+    return {
+        help_text: (_a = renderer.help_text) !== null && _a !== void 0 ? _a : render_help_text,
+        header: (_b = renderer.header) !== null && _b !== void 0 ? _b : render_header,
+        form_content: (_c = renderer.form_content) !== null && _c !== void 0 ? _c : render_form_content,
+    };
+}
+const default_renderer = make_renderer({});
+export function register_renderer(name, renderer) {
+    table_renderers.set(name, make_renderer(renderer));
+}
+register_renderer("default", default_renderer);
+function column_width_property_name(key) {
+    return `--qdt-column-${key}-width`;
+}
+function column_width_style(key) {
+    return `var(${column_width_property_name(key)})`;
+}
+function complete_table_manager_factory_options(options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return {
+        buttons: (_a = options.buttons) !== null && _a !== void 0 ? _a : [],
+        api_url: (_b = options.api_url) !== null && _b !== void 0 ? _b : ".",
+        filter_form: (_c = options.filter_form) !== null && _c !== void 0 ? _c : null,
+        key_prefix: (_d = options.key_prefix) !== null && _d !== void 0 ? _d : DEFAULT_KEY_PREFIX,
+        auto_submit: (_e = options.auto_submit) !== null && _e !== void 0 ? _e : true,
+        page_size: (_f = options.page_size) !== null && _f !== void 0 ? _f : 25,
+        fill_last_page: (_g = options.fill_last_page) !== null && _g !== void 0 ? _g : true,
+        renderer: (_h = options.renderer) !== null && _h !== void 0 ? _h : default_renderer,
+        default_sort_ascending: (_j = options.default_sort_ascending) !== null && _j !== void 0 ? _j : true,
+        default_sort_column_key: (_k = options.default_sort_column_key) !== null && _k !== void 0 ? _k : null,
+        layout_storage: defined_or_default(options.layout_storage, localStorage),
+        navigation_storage: defined_or_default(options.navigation_storage, sessionStorage),
+        selection_storage: defined_or_default(options.selection_storage, sessionStorage),
+        sort_storage: defined_or_default(options.sort_storage, "navigation_storage"),
+        extra_sort_options: (_l = options.extra_sort_options) !== null && _l !== void 0 ? _l : [],
+    };
+}
+function safe_json_parse(data) {
+    try {
+        return JSON.parse(data);
+    }
+    catch (e) { }
+}
+/**
+    If html represents exactly one node, and that node is an HTMLElement, return that element.
+    Otherwise, wrap in a div.
+ */
+function conditionally_wrapped_element(html) {
+    const t = document.createElement("template");
+    t.innerHTML = html;
+    if (t.content.childNodes.length == 1 &&
+        t.content.children[0] instanceof HTMLElement)
+        return t.content.children[0];
+    const d = document.createElement("div");
+    d.innerHTML = html;
+    return d;
+}
+function mount_data_table(container_element, columns, partial_options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const options = complete_table_manager_factory_options(partial_options);
+    for (const c of columns) {
+        // Keys are used in custom css property names
+        // This might be more restrictive than strictly necessary
+        if (!c.key.match(/^[-a-zA-Z_0-9]+$/))
+            throw new Error("Invalid column key.");
+    }
+    // TODO - check if id is unique?
+    // Initial state
+    ///////////////////////////////////////////////////////////////////////////
+    let selected_pks = new Set();
+    let shift_key_pressed = false;
+    let prev_selected_pk = null;
+    let prev_unselected_pk = null;
+    let result_count = 0;
+    let limit = 1;
+    let filtered_ids = [];
+    let page = 1;
+    let page_size = options.page_size;
+    let sort_column_key = (_a = options.default_sort_column_key) !== null && _a !== void 0 ? _a : (columns.filter((c) => c.enabled && c.sortable)[0] ||
+        columns.filter((c) => c.sortable)[0] || { key: "" }).key;
+    let sort_reverse = !((_b = options.default_sort_ascending) !== null && _b !== void 0 ? _b : true);
+    let table_data = [];
+    const filter_form = (_c = options.filter_form) !== null && _c !== void 0 ? _c : document.createElement("form");
+    const buttons = ((_d = options.buttons) !== null && _d !== void 0 ? _d : []).map((html) => m.trust(html));
+    let download_form = null;
+    let download_form_input = null;
+    // element references (to be set in oncreate hooks)
+    ///////////////////////////////////////////////////////////////////////////
+    let table_element = null;
+    let header_row = null;
+    let sticky_column_style_element = null;
+    let row_width_style_element = null;
+    // interpretation of options
+    ///////////////////////////////////////////////////////////////////////////
+    let fixed_columns = columns.filter((c) => c.fixed);
+    let sortable_columns = columns.filter((c) => !c.fixed);
+    // Note: henceforth we should only use fixed_columns and sortable_columns, NOT columns
+    // TODO: how to enforce? Rethink this?
+    const has_selection_actions = buttons.length > 0;
+    function all_columns() {
+        return fixed_columns.concat(sortable_columns);
+    }
+    function column_by_key(key) {
+        for (const column of fixed_columns)
+            if (column.key == key)
+                return column;
+        for (const column of sortable_columns)
+            if (column.key == key)
+                return column;
+    }
+    const key_prefix = (_e = options.key_prefix) !== null && _e !== void 0 ? _e : DEFAULT_KEY_PREFIX;
+    // Read configuration from storage
+    // Different categories of settings may be stored in different storages
+    ///////////////////////////////////////////////////////////////////////////
+    const layout_storage = optional_storage_wrapper(options.layout_storage, location.pathname, key_prefix);
+    const navigation_storage = optional_storage_wrapper(options.navigation_storage, location.pathname, key_prefix);
+    const selection_storage = optional_storage_wrapper(options.selection_storage, location.pathname, key_prefix);
+    const sort_storage = options.sort_storage == "navigation_storage"
+        ? navigation_storage
+        : optional_storage_wrapper(options.sort_storage, location.pathname, key_prefix);
+    {
+        const page_size = layout_storage.get("page_size");
+        if (page_size)
+            set_page_size(page_size);
+    }
+    {
+        const column_config_string = (_f = layout_storage.get("column_config")) !== null && _f !== void 0 ? _f : "{}";
+        const column_config = safe_json_parse(column_config_string);
+        if (is_json_map(column_config)) {
+            sortable_columns.forEach((c) => {
+                const config = column_config[c.key];
+                if (is_json_map(config)) {
+                    c.enabled = Boolean(config.enabled);
+                }
+            });
+            for (const c of all_columns()) {
+                const config = column_config[c.key];
+                if (is_json_map(config)) {
+                    if (is_number(config.width))
+                        c.width = config.width;
+                }
+            }
+            const column_order = (key) => {
+                const config = column_config[key];
+                if (is_json_map(config) && is_number(config.order))
+                    return config.order;
+                // column is newly added, was not in config
+                // add at end of list
+                return sortable_columns.length;
+            };
+            sortable_columns.sort(function (a, b) {
+                return column_order(a.key) - column_order(b.key);
+            });
+        }
+    }
+    {
+        const stored_page = parseInt((_g = navigation_storage.get("page")) !== null && _g !== void 0 ? _g : "nan");
+        if (!isNaN(stored_page))
+            page = stored_page;
+    }
+    {
+        const stored_sort_column_key = (_h = sort_storage.get("sort_column_key")) !== null && _h !== void 0 ? _h : "";
+        const column = column_by_key(stored_sort_column_key);
+        if (column && column.sortable) {
+            sort_column_key = stored_sort_column_key;
+        }
+        const stored_sort_reverse = safe_json_parse((_j = sort_storage.get("sort_reverse")) !== null && _j !== void 0 ? _j : "");
+        if (typeof stored_sort_reverse == "boolean") {
+            sort_reverse = stored_sort_reverse;
+        }
+    }
+    {
+        const stored_selected_pks = safe_json_parse((_k = selection_storage.get("selected_pks")) !== null && _k !== void 0 ? _k : "");
+        if (is_array(stored_selected_pks)) {
+            selected_pks = new Set(stored_selected_pks);
+        }
+    }
+    function set_page_size(any_val) {
+        page_size = parseInt(any_val);
+        if (isNaN(page_size))
+            page_size = 25;
+        page_size = Math.max(1, page_size);
+    }
+    function save_session_if_enabled() {
+        const column_config = {};
+        for (const c of all_columns()) {
+            column_config[c.key] = {
+                width: c.width,
+            };
+        }
+        sortable_columns.forEach(function (column, index) {
+            Object.assign(column_config[column.key], {
+                enabled: column.enabled,
+                order: index,
+            });
+        });
+        layout_storage.set("page_size", page_size.toString());
+        layout_storage.set("column_config", JSON.stringify(column_config));
+        navigation_storage.set("page", page.toString());
+        sort_storage.set("sort_column_key", sort_column_key);
+        sort_storage.set("sort_reverse", JSON.stringify(sort_reverse));
+        selection_storage.set("selected_pks", JSON.stringify(Array.from(selected_pks)));
+    }
+    ///////////////////////////////////////////////////////////////////////////
+    const result_count_xhr = new XMLHttpRequest();
+    const id_list_xhr = new XMLHttpRequest();
+    const page_xhr = new XMLHttpRequest();
+    if (options.auto_submit) {
+        filter_form.addEventListener("change", function (e) {
+            page = 1;
+            fetch_result_count();
+            fetch_id_list();
+        });
+    }
+    filter_form.addEventListener("submit", function (e) {
+        e.preventDefault();
+        page = 1;
+        fetch_result_count();
+        fetch_id_list();
+    });
+    function fetch_result_count() {
+        const data = new FormData(filter_form);
+        data.append(`${key_prefix}_action`, "get_result_count");
+        result_count_xhr.open("POST", options.api_url);
+        result_count_xhr.send(data);
+    }
+    result_count_xhr.onload = function () {
+        if (this.status != 200) {
+            log_error(this);
+            m.redraw();
+            return;
+        }
+        const data = JSON.parse(this.responseText);
+        result_count = data.count;
+        limit = data.limit;
+        m.redraw();
+    };
+    result_count_xhr.onerror = function () {
+        log_error(this);
+        m.redraw();
+    };
+    function fetch_id_list() {
+        const data = new FormData(filter_form);
+        data.append(`${key_prefix}_action`, 'get_ids');
+        data.append(`${key_prefix}_sort_key`, sort_column_key);
+        id_list_xhr.open("POST", options.api_url);
+        id_list_xhr.send(data);
+    }
+    id_list_xhr.onload = function () {
+        if (this.status != 200) {
+            log_error(this);
+            m.redraw();
+            return;
+        }
+        const data = require_json_map(safe_json_parse(this.responseText));
+        const ids = require_array(data.ids);
+        filtered_ids = ids;
+        container_element.dispatchEvent(new CustomEvent("qnc-data-table-ids-loaded", {
+            detail: filtered_ids,
+            bubbles: true,
+        }));
+        m.redraw();
+        fetch_page();
+    };
+    id_list_xhr.onerror = function () {
+        log_error(this);
+        m.redraw();
+    };
+    function current_page_ids() {
+        const start = (page - 1) * page_size;
+        return filtered_ids.slice(start, start + page_size);
+    }
+    function fetch_page() {
+        // Note - most pages won't need data from filter_form to return results
+        // However, some pages MAY include controls in the filter_form which impact how the columns/data are generated
+        // It's part of our documented contract that we always submit filter_form data with each post request
+        const data = new FormData(filter_form);
+        data.append(`${key_prefix}_action`, "get_table_data");
+        data.append(`${key_prefix}_columns`, JSON.stringify(all_columns()
+            .filter((c) => c.enabled)
+            .map((c) => c.key)));
+        data.append(`${key_prefix}_ids`, JSON.stringify(current_page_ids()));
+        page_xhr.open("POST", options.api_url);
+        page_xhr.send(data);
+    }
+    page_xhr.onload = function () {
+        if (this.status != 200) {
+            log_error(this);
+            m.redraw();
+            return;
+        }
+        const data = require_json_map(safe_json_parse(this.responseText));
+        table_data = require_array(data.rows).map(function (row) {
+            if (!is_2_tuple(row))
+                throw new Error("row data not an array");
+            const pk = row[0];
+            const cell_data = row[1];
+            if (!is_json_map(cell_data))
+                throw new Error("row data [1] is not a map");
+            const cells = {};
+            for (const key in cell_data) {
+                if (!cell_data.hasOwnProperty(key))
+                    continue;
+                const column = column_by_key(key);
+                if (!column) {
+                    throw new Error(`Received data for unknown column "${key}"`);
+                }
+                const datum = cell_data[key];
+                if (typeof datum != "string")
+                    throw new Error(`Received non-string cell data "${datum}" for key "${key}"`);
+                cells[key] = make_cell(column, datum);
+            }
+            return { pk: pk, cells };
+        });
+        m.redraw();
+    };
+    page_xhr.onerror = function () {
+        log_error(this);
+        m.redraw();
+    };
+    function add_style_props(s, column) {
+        s.width = column_width_style(column.key);
+    }
+    function make_cell(column, html) {
+        const cell = conditionally_wrapped_element(html);
+        cell.setAttribute("role", "cell");
+        add_style_props(cell.style, column);
+        return m.fragment({ key: column.key }, [m.trust(cell.outerHTML)]);
+    }
+    function make_empty_cell(column) {
+        const style = {};
+        add_style_props(style, column);
+        return m("div", { role: "cell", style });
+    }
+    function set_page(value) {
+        if (typeof value == "string")
+            value = parseInt(value);
+        if (isNaN(value))
+            value = 1;
+        value = Math.max(1, value);
+        value = Math.min(result_count, value);
+        page = value;
+        fetch_page();
+    }
+    function on_column_sort(element) {
+        const indeces = new Map();
+        for (const [index, child] of Array.from(element.children).entries()) {
+            indeces.set(child.getAttribute("data-key"), index);
+        }
+        sortable_columns.sort(function (a, b) {
+            return indeces.get(a.key) - indeces.get(b.key);
+        });
+        m.redraw();
+        fetch_page();
+    }
+    function columns_list() {
+        return m("ol", {
+            oncreate: (vnode) => drag_sorter.enable(vnode.dom, {
+                onchange: on_column_sort,
+                stationary_list_item_markers: true,
+            }),
+        }, sortable_columns.map((c, index) => m("li", {
+            "data-key": c.key,
+            key: c.key,
+            className: "qnc-data-table-column-item",
+        }, m("label", m("input", {
+            type: "checkbox",
+            checked: c.enabled,
+            onclick: (e) => {
+                c.enabled = !c.enabled;
+                // AFTER redraw, recompute row widths (based on enabled columns)
+                setTimeout(update_row_width_style);
+                fetch_page();
+            },
+        }), " ", c.display, " ", c.help_text && options.renderer.help_text(c.help_text), 
+        // The whole li is a drag target, this just makes it more obvious
+        " ", m("span", "↕︎")))));
+    }
+    function checkbox_cell(checked, set_checked) {
+        return m("label", {
+            role: "cell",
+            className: "qnc-data-table-row-checkbox-label",
+        }, m("input", {
+            type: "checkbox",
+            checked: checked,
+            onchange: (e) => set_checked(e.target.checked),
+        }));
+    }
+    function empty_checkbox_cell() {
+        return m("div", {
+            role: "columnheader",
+            className: "qnc-data-table-row-checkbox-label",
+        }, 
+        // Render an invisible checkbox, so this header cell takes up the same width as the rest of the checkbox cells
+        m("input", {
+            type: "checkbox",
+            style: {
+                visibility: "hidden",
+                pointerEvents: "none",
+            },
+            tabIndex: -1,
+        }));
+    }
+    function empty_expanding_cell(role = "cell") {
+        return m("div", {
+            style: { flexGrow: "1", padding: "0", flexBasis: "0px" },
+            // Just in case users are using this in their selector for default cell background/border
+            role: role,
+        });
+    }
+    function total_pages() {
+        return Math.ceil(result_count / page_size);
+    }
+    fetch_result_count();
+    fetch_id_list();
+    function onformcreate(vnode) {
+        // attach this custom attribute to the form element
+        // this is a bit of hack, so that "selection buttons" can easily access these helpers
+        vnode.dom.data_table_controller = {
+            table_id: key_prefix,
+            get_selected_ids: function () {
+                return Array.from(selected_pks);
+            },
+            get_enabled_column_keys: function () {
+                return all_columns()
+                    .filter((c) => c.enabled)
+                    .map((c) => c.key);
+            },
+            clear_selection: function () {
+                selected_pks.clear();
+                m.redraw();
+            },
+            reload: function () {
+                fetch_result_count();
+                fetch_id_list();
+                m.redraw();
+            },
+            post_ids_to_new_window: function (url) {
+                /*
+                    Intended to help you implement server-side bulk actions (ie. spreadsheet export).
+                    Posts a form which submits to given url and opens a new window.
+                    The form content will be "ids=json_encoded_list_of_ids".
+
+                    If the returned response has "Content-Disposition: attachment", it will trigger file download, and then the new window will automatically close.
+                */
+                this.post_ids_to_window_named("_blank", url);
+            },
+            post_ids_to_window_named: function (name, url) {
+                /*
+                    Similar to post_ids_to_new_window, but more generic.
+                    Can post to an existing iframe, a new window that you opened (and need a reference to), etc.
+                */
+                if (!download_form)
+                    throw new Error("download_form has not yet been created");
+                if (!download_form_input)
+                    throw new Error("download_form_input has not yet been created");
+                download_form.target = name;
+                download_form.action = url;
+                download_form_input.value = JSON.stringify(Array.from(selected_pks));
+                download_form.submit();
+            },
+        };
+    }
+    function select_ids(ids) {
+        ids.forEach(selected_pks.add.bind(selected_pks));
+        m.redraw();
+    }
+    function deselect_ids(ids) {
+        ids.forEach(selected_pks.delete.bind(selected_pks));
+        m.redraw();
+    }
+    function header_cell(c) {
+        return m("div", {
+            role: "columnheader",
+            style: {
+                width: column_width_style(c.key),
+            },
+            class: "qdt-resizable-header",
+        }, m("div", // the only reason this div is here is so that it has "overflow: hidden;", while the parent element has "overflow: visible" (to allow resize handle to overflow)
+        options.renderer.header({
+            text: c.display,
+            help_text: c.help_text && options.renderer.help_text(c.help_text),
+            sortable: c.sortable,
+            sorted: c.key == sort_column_key && !sort_reverse,
+            sorted_reverse: c.key == sort_column_key && sort_reverse,
+            sort: () => {
+                sort_column_key = c.key;
+                sort_reverse = false;
+                fetch_id_list();
+            },
+            sort_reverse: () => {
+                sort_column_key = c.key;
+                sort_reverse = true;
+                fetch_id_list();
+            },
+        })), m("span", {
+            onmousedown: begin_header_drag.bind(null, c),
+            class: "qdt-column-resizer",
+        }));
+    }
+    function render() {
+        // This is a bit of a hack
+        // Ideally, we'd call this from any function that changes any of our state, but this approach guarantees it gets called as needed
+        save_session_if_enabled();
+        const enabled_columns = all_columns().filter((c) => c.enabled);
+        const page_ids = table_data.map((r) => r.pk);
+        const thead_rows = m("div", {
+            role: "row",
+            className: `qnc-data-table-row qnc-data-table-header-row qnc-data-table-row-${key_prefix}`,
+            oncreate: (vnode) => (header_row = vnode.dom),
+        }, 
+        // "overflow-left detector"
+        m("div", {
+            role: "columnheader",
+            style: "padding: 0; width: 0; border: none;",
+        }, m("div", {
+            style: "width: 1px; height: 1px; background-color: transparent; pointerEvents: none;",
+            oncreate: (vnode) => setup_left_overflow_detector(vnode.dom),
+        })), has_selection_actions && empty_checkbox_cell(), fixed_columns.filter((c) => c.enabled).map(header_cell), m("div", {
+            role: "columnheader",
+            class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-left`,
+        }), sortable_columns.filter((c) => c.enabled).map(header_cell), empty_expanding_cell("columnheader"), m("div", {
+            role: "columnheader",
+            class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-right`,
+        }), 
+        // "overflow-right detector"
+        m("div", {
+            role: "columnheader",
+            style: "padding: 0; width: 0; border: none; position: relative;",
+        }, m("div", {
+            style: "position: absolute; right: 0; width: 1px; height: 1px; background-color: transparent; pointerEvents: none;",
+            oncreate: (vnode) => setup_right_overflow_detector(vnode.dom),
+        })));
+        function table_row(checkbox_cell, fixed_cells, sortable_cells) {
+            return m("div", {
+                role: "row",
+                className: `qnc-data-table-row qnc-data-table-body-row qnc-data-table-row-${key_prefix}`,
+            }, 
+            // Empty "scroll detector" column
+            m("div", {
+                role: "cell",
+                style: "width: 0px; padding: 0; border: none;",
+            }), checkbox_cell, 
+            // has_selection_actions && checkbox_cell(
+            //     selected_pks.has(row.pk),
+            //     checked => {
+            //         if (checked) selected_pks.add(row.pk)
+            //         else selected_pks.delete(row.pk)
+            //         m.redraw()
+            //     },
+            // ),
+            fixed_cells, m("div", {
+                role: "cell",
+                class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-left`,
+            }), sortable_cells, empty_expanding_cell(), m("div", {
+                role: "cell",
+                class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-right`,
+            }), 
+            // Empty "overflow detector" column
+            m("div", {
+                role: "cell",
+                style: "width: 0px; padding: 0; border: none;",
+            }));
+        }
+        const tbody_rows = [
+            table_data.map((row) => table_row(has_selection_actions &&
+                checkbox_cell(selected_pks.has(row.pk), (checked) => {
+                    if (checked) {
+                        if (shift_key_pressed &&
+                            prev_selected_pk !== null) {
+                            const start_index = filtered_ids.indexOf(prev_selected_pk);
+                            const end_index = filtered_ids.indexOf(row.pk);
+                            if (start_index < 0 ||
+                                end_index < 0 ||
+                                start_index == end_index) {
+                                selected_pks.add(row.pk);
+                            }
+                            else if (start_index < end_index) {
+                                for (let i = start_index; i <= end_index; i++) {
+                                    selected_pks.add(filtered_ids[i]);
+                                }
+                            }
+                            else if (start_index > end_index) {
+                                for (let i = end_index; i <= start_index; i++) {
+                                    selected_pks.add(filtered_ids[i]);
+                                }
+                            }
+                        }
+                        else {
+                            selected_pks.add(row.pk);
+                        }
+                        prev_selected_pk = row.pk;
+                        prev_unselected_pk = null;
+                    }
+                    else {
+                        if (shift_key_pressed &&
+                            prev_unselected_pk !== null) {
+                            const start_index = filtered_ids.indexOf(prev_unselected_pk);
+                            const end_index = filtered_ids.indexOf(row.pk);
+                            if (start_index < 0 ||
+                                end_index < 0 ||
+                                start_index == end_index) {
+                                selected_pks.delete(row.pk);
+                            }
+                            else if (start_index < end_index) {
+                                for (let i = start_index; i <= end_index; i++) {
+                                    selected_pks.delete(filtered_ids[i]);
+                                }
+                            }
+                            else if (start_index > end_index) {
+                                for (let i = end_index; i <= start_index; i++) {
+                                    selected_pks.delete(filtered_ids[i]);
+                                }
+                            }
+                        }
+                        else {
+                            selected_pks.delete(row.pk);
+                        }
+                        prev_unselected_pk = row.pk;
+                        prev_selected_pk = null;
+                    }
+                    m.redraw();
+                }), fixed_columns
+                .filter((c) => c.enabled)
+                .map((c) => row.cells[c.key]), sortable_columns
+                .filter((c) => c.enabled)
+                .map((c) => row.cells[c.key]))),
+            options.fill_last_page &&
+                Array.from(Array(Math.max(0, page_size - table_data.length))).map((x) => table_row(empty_checkbox_cell(), fixed_columns
+                    .filter((c) => c.enabled)
+                    .map(make_empty_cell), sortable_columns
+                    .filter((c) => c.enabled)
+                    .map(make_empty_cell))),
+        ];
+        const form_content = options.renderer.form_content({
+            result_count_loading: is_loading(result_count_xhr),
+            result_count: result_count,
+            results_limited: result_count > limit,
+            results_limited_to: limit,
+            table_data_loading: is_loading(id_list_xhr) || is_loading(page_xhr),
+            table: m("div", {
+                oncreate: (vnode) => (table_element = vnode.dom),
+                class: "qnc-data-table",
+                role: "table",
+                style: all_columns()
+                    .map((c) => `${column_width_property_name(c.key)}: ${c.width}px`)
+                    .join(";"),
+            }, 
+            // "overflow-top detector"
+            m("div", {
+                id: "qdt-overflow-top-detector",
+                oncreate: (vnode) => setup_top_overflow_detector(vnode.dom),
+            }), m("div", {
+                class: "qnc-data-table-head",
+                role: "rowgroup",
+            }, thead_rows, m("div", { id: "qdt-overflow-top-indicator" })), m("div", {
+                class: "qnc-data-table-body",
+                role: "rowgroup",
+            }, tbody_rows), 
+            // "overflow-bottom detector"
+            m("div", {
+                id: "qdt-overflow-bottom-detector",
+                oncreate: (vnode) => setup_bottom_overflow_detector(vnode.dom),
+            }), m("div", { id: "qdt-overflow-bottom-indicator" })),
+            current_page: page,
+            total_pages: Math.ceil(filtered_ids.length / page_size),
+            set_page: set_page,
+            page_size: page_size,
+            set_page_size: (v) => {
+                set_page_size(v);
+                m.redraw();
+            },
+            editable_columns_list: columns_list(),
+            selected_row_count: selected_pks.size,
+            entire_page_selected: current_page_ids().every((id) => selected_pks.has(id)),
+            all_results_selected: filtered_ids.every((id) => selected_pks.has(id)),
+            selection_buttons: buttons,
+            select_page: () => select_ids(page_ids),
+            clear_page: () => deselect_ids(page_ids),
+            select_table: () => select_ids(filtered_ids),
+            clear_table: () => deselect_ids(filtered_ids),
+            clear_selection: () => {
+                selected_pks.clear();
+                m.redraw();
+            },
+        });
+        return [
+            m("form", {
+                onsubmit: (e) => e.preventDefault(),
+                oncreate: onformcreate,
+            }, m("style", {
+                oncreate: (vnode) => {
+                    row_width_style_element = vnode.dom;
+                    update_row_width_style();
+                },
+            }), m("style", {
+                oncreate: (vnode) => {
+                    sticky_column_style_element = vnode.dom;
+                    update_sticky_column_style();
+                },
+            }), form_content),
+            // This form is used by the "post_ids_to_new_window" function
+            m("form", {
+                oncreate: (vnode) => (download_form = vnode.dom),
+                target: "_blank",
+                method: "POST",
+                style: "display: none;",
+            }, m("input", {
+                name: "ids",
+                oncreate: (vnode) => (download_form_input = vnode.dom),
+            })),
+        ];
+    }
+    function setup_top_overflow_detector(detector_cell) {
+        new IntersectionObserver((entries, observer) => {
+            if (table_element && entries[0]) {
+                table_element.classList.toggle("qdt-overflows-top", !entries[0].isIntersecting);
+            }
+        }, {
+            root: table_element,
+        }).observe(detector_cell);
+    }
+    function setup_bottom_overflow_detector(detector_cell) {
+        new IntersectionObserver(function (entries, observer) {
+            if (table_element && entries[0]) {
+                table_element.classList.toggle("qdt-overflows-bottom", !entries[0].isIntersecting);
+            }
+        }, {
+            root: table_element,
+        }).observe(detector_cell);
+    }
+    function setup_left_overflow_detector(detector_cell) {
+        new IntersectionObserver(function (entries, observer) {
+            if (table_element && entries[0]) {
+                table_element.classList.toggle("qdt-overflows-left", !entries[0].isIntersecting);
+            }
+        }, {
+            root: table_element,
+        }).observe(detector_cell);
+    }
+    function setup_right_overflow_detector(detector_cell) {
+        new IntersectionObserver(function (entries, observer) {
+            if (table_element && entries[0]) {
+                table_element.classList.toggle("qdt-overflows-right", !entries[0].isIntersecting);
+            }
+        }, {
+            root: table_element,
+        }).observe(detector_cell);
+    }
+    function update_row_width_style() {
+        /*
+            Rows need explicit width.
+            Otherwise, they are only as wide as table, and cell overflow.
+            This causes problems if:
+            1. there are any background colours/borders on rows
+            2. there are sticky columns, and row content is more than two table-widths wide (eventually, the sticky columns get pushed out view)
+
+            #1. can be solved by putting all colours/borders on cells, rather than rows, but issue #2 still requires fixed row widths.
+
+            Note - this needs to run whenever any columns are toggled or resized
+            It might be better to split this off from the "sticky position" calculations (different style element, different function, called at different times)
+        */
+        const s = row_width_style_element;
+        if (!s)
+            return;
+        if (!header_row)
+            return;
+        s.innerHTML = "";
+        let row_width = 0;
+        let cell = header_row.firstElementChild;
+        // Notice - skip the lastElementChild, since it's the "empty_expanding_cell"
+        // (it's width _should_ be 0 right now)
+        while (cell && cell != header_row.lastElementChild) {
+            row_width += cell.clientWidth;
+            cell = cell.nextElementSibling;
+        }
+        s.innerHTML = `
+        .qnc-data-table-row-${key_prefix}{width: ${row_width}px;}
+        #qdt-overflow-top-indicator{width: ${row_width}px;}
+        #qdt-overflow-top-detector{width: ${row_width}px;}
+        #qdt-overflow-bottom-indicator{width: ${row_width}px;}
+        #qdt-overflow-bottom-detector{width: ${row_width}px;}
+        `;
+    }
+    function update_sticky_column_style() {
+        if (!sticky_column_style_element)
+            return;
+        if (!header_row)
+            return;
+        sticky_column_style_element.innerHTML = "";
+        const fixed_column_count = Number(has_selection_actions) + // 1, iff selection column exists
+            fixed_columns.length +
+            1; // the "sticky divider" column, where box-shadow is rendered
+        let previous_width = 0;
+        let i = 1; // skip over the "scroll detector" column
+        while (i <= fixed_column_count) {
+            const cell = header_row.children[i];
+            if (!cell)
+                break;
+            sticky_column_style_element.innerHTML += `.qnc-data-table-row-${key_prefix} > :nth-child(${i + 1}) {
+                position: sticky;
+                left: ${previous_width}px;
+                z-index: 2;
+            }`;
+            previous_width += cell.clientWidth;
+            i++;
+        }
+    }
+    window.addEventListener("load", update_sticky_column_style);
+    window.addEventListener("load", update_row_width_style);
+    window.addEventListener("resize", update_row_width_style);
+    let column_resizing = null;
+    function begin_header_drag(column, event) {
+        const style = document.createElement("style");
+        style.innerHTML = "* {cursor: col-resize !important}";
+        document.body.appendChild(style);
+        column_resizing = {
+            column,
+            width: column.width,
+            x: event.clientX,
+            style,
+        };
+    }
+    window.addEventListener("mousemove", function (event) {
+        if (!column_resizing)
+            return;
+        event.preventDefault(); // prevent text selection
+        const { column, width, x } = column_resizing;
+        column.width = Math.max(0, width + event.clientX - x);
+        update_sticky_column_style();
+        m.redraw();
+    });
+    window.addEventListener("mouseup", function () {
+        if (!column_resizing)
+            return;
+        column_resizing.style.remove();
+        column_resizing = null;
+        update_row_width_style();
+    });
+    window.addEventListener("keydown", function (e) {
+        shift_key_pressed = e.shiftKey;
+    });
+    window.addEventListener("keyup", function (e) {
+        shift_key_pressed = e.shiftKey;
+    });
+    m.mount(container_element, { view: render });
+}
+function parse_storage(name) {
+    if (name == "sessionStorage")
+        return sessionStorage;
+    if (name == "localStorage")
+        return localStorage;
+    if (name)
+        throw new Error("Unknown storage: " + name);
+    return null;
+}
+class QncDataTable extends HTMLElement {
+    static get observedAttributes() {
+        return ["table-config"];
+    }
+    attributeChangedCallback() {
+        this.read_and_update_config();
+    }
+    constructor() {
+        super();
+        this.read_and_update_config();
+    }
+    read_and_update_config() {
+        const config = JSON.parse(this.getAttribute("table-config"));
+        let storage = config.storage;
+        if (storage == "sessionStorage")
+            storage = sessionStorage;
+        else if (storage == "localStorage")
+            storage = localStorage;
+        else if (storage)
+            throw new Error("Unknown storage: " + storage);
+        function get_filter_form() {
+            if (!config.filter_form_id)
+                return null;
+            const form = document.getElementById(config.filter_form_id);
+            if (!(form instanceof HTMLFormElement))
+                throw new Error(`"#${config.filter_form_id}" does not identify an HTMLFormElement`);
+            return form;
+        }
+        const renderer = table_renderers.get(config.renderer);
+        if (!renderer)
+            throw new Error(`No table renderer registered for "${config.renderer}"`);
+        const navigation_storage = parse_storage(config.navigation_storage);
+        const sort_storage_key = config.sort_storage;
+        // Note sure whether or not this is necessary
+        m.mount(this, null);
+        mount_data_table(this, config.columns, {
+            buttons: config.buttons,
+            api_url: config.api_url,
+            filter_form: get_filter_form(),
+            key_prefix: config.key_prefix,
+            auto_submit: config.auto_submit,
+            page_size: config.page_size,
+            renderer: renderer,
+            default_sort_column_key: config.default_sort_column_key,
+            default_sort_ascending: config.default_sort_ascending,
+            fill_last_page: config.fill_last_page,
+            layout_storage: parse_storage(config.layout_storage),
+            navigation_storage: parse_storage(config.navigation_storage),
+            selection_storage: parse_storage(config.selection_storage),
+            sort_storage: sort_storage_key == "navigation_storage"
+                ? navigation_storage
+                : parse_storage(sort_storage_key),
+        });
+    }
+}
+export function define(tag_name) {
+    customElements.define(tag_name, QncDataTable);
+}