@qnc/qnc_data_tables 1.1.0 → 1.3.0

package/dist/mithril_view.ts

@@ -1,1029 +0,0 @@
-import m, { Children, redraw, Vnode, VnodeDOM, trust } from "mithril";
-import { AppState, SortState, SortStateInterpreter } from "./state_types.js";
-import { Renderer } from "./renderer.js";
-import { ExtraSortFunction } from "./table_options.js";
-import { ConfiguredColumns, ConfiguredColumn } from "./column_manager.js";
-import { enable } from "@qnc/drag_sorter2";
-import { begin_header_drag } from "./column_resizing.js";
-import { WatchedMutableValue } from "./watched_mutable_value.js";
-
-function classes(...values: (string | false | null)[]) {
-    return values.filter(Boolean).join(" ");
-}
-
-type Updaters = {
-    set_page_size: (page_size: number) => void;
-    set_page_number: (page_number: number) => void;
-    set_column_enabled: (column_key: string, enabled: boolean) => void;
-    sort_by_function: (sort_function_key: string) => void;
-    sort_by_column: (
-        column_key: string,
-        direction: "forward" | "reverse",
-    ) => void;
-    set_column_width: (column_key: string, width: number) => void;
-    set_column_order: (keys: string[]) => void;
-    set_selected: (pk: string, selected: boolean) => void;
-    bulk_set_selected: (pks: Iterable<string>, selected: boolean) => void;
-};
-
-export function app_view(
-    state: AppState<string>,
-    renderer: Renderer,
-    updaters: Updaters,
-) {
-    return [
-        m("style", state.row_width_style_string.get()),
-        top_control_bar({
-            current_page: state.page_number,
-            set_page: updaters.set_page_number,
-            total_pages:
-                state.accessible_result_count !== null
-                    ? Math.ceil(state.accessible_result_count / state.page_size)
-                    : null,
-            page_size: state.page_size,
-            set_page_size: updaters.set_page_size,
-            result_count: state.result_count,
-            result_count_loading: state.fetching_result_count,
-            accessible_result_count: state.accessible_result_count,
-            extra_sort_functions: state.extra_sort_functions,
-            sort_by_function: updaters.sort_by_function,
-            current_sort: state.current_sort,
-        }),
-        column_controls(state.columns, updaters, renderer),
-        m("form", [
-            render_with_loader(state.fetching_page_data, [
-                table(
-                    state.columns,
-                    updaters,
-                    state.table_data,
-                    renderer,
-                    state.sort_state_interpreter,
-                    state.fill_last_page,
-                    state.page_size,
-                    state.table_key,
-                    state.include_selection_column,
-                    state.table_overflows_left,
-                    state.table_overflows_right,
-                    state.row_width_style_string,
-                    state.selected_pks,
-                ),
-                state.include_selection_column &&
-                    selection_controls(state, updaters),
-            ]),
-        ]),
-    ];
-}
-type RowData = Readonly<
-    [
-        string, // row pk
-        ReadonlyMap<string, string>, // column key => cell html
-    ]
->;
-function table(
-    columns: ConfiguredColumns,
-    updaters: Updaters,
-    data: ReadonlyArray<RowData>,
-    renderer: Renderer,
-    sort_state_interpreter: SortStateInterpreter,
-    fill_last_page: boolean,
-    page_size: number,
-    table_key: string,
-    include_selection_column: boolean,
-    table_overflows_left: WatchedMutableValue<boolean>,
-    table_overflows_right: WatchedMutableValue<boolean>,
-    row_width_style_string: WatchedMutableValue<string>,
-    selected_pks: ReadonlySet<string>,
-) {
-    return m(
-        "div",
-        {
-            class: classes(
-                `qnc-data-table qnc-data-table-${CSS.escape(table_key)}`,
-                table_overflows_left.get() && "qdt-overflows-left",
-                table_overflows_right.get() && "qdt-overflows-right",
-            ),
-            role: "table",
-            // style: all_columns().map(c=>`${column_width_property_name(c.key)}: ${c.width}px`).join(';')
-        },
-        m(
-            "div",
-            {
-                class: "qnc-data-table-head",
-                role: "rowgroup",
-            },
-            header_row({
-                columns,
-                updaters,
-                sort_state_interpreter,
-                table_key,
-                include_selection_column,
-                renderer,
-                table_overflows_left,
-                table_overflows_right,
-                row_width_style_string,
-            }),
-        ),
-        m(
-            "div",
-            {
-                class: "qnc-data-table-body",
-                role: "rowgroup",
-            },
-            table_rows(
-                columns,
-                data,
-                fill_last_page,
-                page_size,
-                table_key,
-                include_selection_column,
-                updaters,
-                selected_pks,
-            ),
-        ),
-    );
-}
-type HeaderAttrs = {
-    columns: ConfiguredColumns;
-    updaters: Updaters;
-    renderer: Renderer;
-    sort_state_interpreter: SortStateInterpreter;
-    table_key: string;
-    include_selection_column: boolean;
-    table_overflows_left: WatchedMutableValue<boolean>;
-    table_overflows_right: WatchedMutableValue<boolean>;
-    row_width_style_string: WatchedMutableValue<string>;
-};
-
-function HeaderComponent(initialVnode: Vnode) {
-    let sticky_style_string = "";
-
-    function setup_detector(
-        detector: Element,
-        watched_value: WatchedMutableValue<boolean>,
-    ) {
-        const table = detector.closest(".qnc-data-table");
-        if (!table) throw new Error("could not find parent table element");
-        new IntersectionObserver(
-            function (entries, observer) {
-                watched_value.set(!entries[0]?.isIntersecting);
-            },
-            {
-                root: table,
-            },
-        ).observe(detector);
-    }
-
-    // Note: layout tightlty coupled to recompute_sticky_style_string
-    function raw_header_row(
-        columns: ConfiguredColumns,
-        updaters: Updaters,
-        renderer: Renderer,
-        sort_state_interpreter: SortStateInterpreter,
-        table_key: string,
-        table_overflows_left: WatchedMutableValue<boolean>,
-        table_overflows_right: WatchedMutableValue<boolean>,
-        include_selection_column: boolean,
-    ) {
-        return m(
-            "div",
-            {
-                role: "row",
-                className: `qnc-data-table-row qnc-data-table-header-row qnc-data-table-row qnc-data-table-row-${CSS.escape(
-                    table_key,
-                )}`,
-            },
-
-            // "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_detector(vnode.dom, table_overflows_left);
-                    },
-                }),
-            ),
-
-            include_selection_column && empty_checkbox_cell(table_key),
-
-            columns.fixed_enabled_columns.map((c) =>
-                header_cell(
-                    renderer,
-                    c,
-                    sort_state_interpreter,
-                    updaters,
-                    true,
-                    table_key,
-                ),
-            ),
-            m("div", {
-                role: "columnheader",
-                class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-left qnc-data-table-fixed-cell-${CSS.escape(
-                    table_key,
-                )}`,
-            }),
-            columns.sortable_enabled_columns.map((c) =>
-                header_cell(
-                    renderer,
-                    c,
-                    sort_state_interpreter,
-                    updaters,
-                    false,
-                    table_key,
-                ),
-            ),
-            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_detector(vnode.dom, table_overflows_right);
-                    },
-                }),
-            ),
-        );
-    }
-    // Note: tightlty coupled to raw_header_row layout
-    function recompute_sticky_style_string(
-        header_element: Element,
-        include_selection_column: boolean,
-        columns: ConfiguredColumns,
-        table_key: string,
-    ) {
-        const old_value = sticky_style_string;
-        sticky_style_string = "";
-        const fixed_column_count =
-            (include_selection_column ? 1 : 0) +
-            columns.fixed_enabled_columns.length +
-            1; // the "sticky divider" column, where box-shadow is rendered
-        let previous_width = 0;
-        const start_index = 1; // skip over the "scroll detector" column
-        let i = start_index; // i will range over "element index" of all fixed column headers
-        const end_index =
-            start_index +
-            fixed_column_count + // all fixed columns
-            1; // left overflow indicator cell
-        while (i < end_index) {
-            const cell = header_element.children[i];
-            if (!cell) break;
-
-            sticky_style_string += `.qnc-data-table-fixed-cell-${CSS.escape(
-                table_key,
-            )}:nth-child(${i + 1}) {
-                position: sticky;
-                left: ${previous_width}px;
-                z-index: 2;
-            }`;
-            previous_width += cell.clientWidth;
-            i++;
-        }
-        return sticky_style_string != old_value;
-    }
-
-    /*
-        Rows need explicit min-width.
-        Otherwise, they are only as wide as table, and cells 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.
-
-        While we _could_ compute the expected width based on columns.map(c => c.width), that approach would also require us to know the padding per cell (which might change based on media query). So let's just _measure_ the actual rendered width, instead. 
-        
-        Note: this isn't foolproof, either. In hindsight, I'd have preferred to just calculate this based on column widths (perhaps setting `box-sizing: border-box` on them, so we wouldn't have to worry about padding).
-    */
-    function get_row_width_style(header: Element, table_key: string): string {
-        let row_width = 0;
-        let cell = header.firstElementChild;
-
-        while (cell) {
-            // skip the "empty expanding column"; otherwise, row width will never shrink, even when it should
-            if (!cell.classList.contains("qdt-empty-expanding-cell")) {
-                row_width += cell.clientWidth;
-            }
-            cell = cell.nextElementSibling;
-        }
-        return `.qnc-data-table-row-${CSS.escape(
-            table_key,
-        )} {min-width: ${row_width}px;}`;
-    }
-
-    return {
-        oncreate(vnode: VnodeDOM) {
-            const {
-                columns,
-                include_selection_column,
-                table_key,
-                row_width_style_string,
-            } = vnode.attrs as HeaderAttrs;
-            row_width_style_string.set(
-                get_row_width_style(vnode.dom, table_key),
-            );
-            if (
-                recompute_sticky_style_string(
-                    vnode.dom,
-                    include_selection_column,
-                    columns,
-                    table_key,
-                )
-            )
-                redraw();
-        },
-        onupdate(vnode: VnodeDOM) {
-            const {
-                columns,
-                include_selection_column,
-                table_key,
-                row_width_style_string,
-            } = vnode.attrs as HeaderAttrs;
-            row_width_style_string.set(
-                get_row_width_style(vnode.dom, table_key),
-            );
-
-            // Optimization opportunity: we _could_ hash (column order, column widths, include_selection_count)
-            // and return early whenever unchanged
-            if (
-                recompute_sticky_style_string(
-                    vnode.dom,
-                    include_selection_column,
-                    columns,
-                    table_key,
-                )
-            )
-                redraw();
-        },
-        view(vnode: Vnode) {
-            const {
-                columns,
-                updaters,
-                renderer,
-                sort_state_interpreter,
-                table_key,
-                table_overflows_left,
-                table_overflows_right,
-                include_selection_column,
-            } = vnode.attrs as HeaderAttrs;
-            return [
-                raw_header_row(
-                    columns,
-                    updaters,
-                    renderer,
-                    sort_state_interpreter,
-                    table_key,
-                    table_overflows_left,
-                    table_overflows_right,
-                    include_selection_column,
-                ),
-                m("style", sticky_style_string),
-            ];
-        },
-    };
-}
-function header_row(attrs: HeaderAttrs) {
-    return (m as any)(HeaderComponent, attrs);
-}
-
-function header_cell(
-    renderer: Renderer,
-    column: ConfiguredColumn,
-    sort_state_interpreter: SortStateInterpreter,
-    updaters: Updaters,
-    fixed: boolean,
-    table_key: string,
-) {
-    const sort_direction = sort_state_interpreter(column.key);
-    return m(
-        "div",
-        {
-            role: "columnheader",
-            style: {
-                width: column.width + "px",
-            },
-            class: classes(
-                "qdt-cell",
-                "qdt-resizable-header",
-                fixed && `qnc-data-table-fixed-cell-${CSS.escape(table_key)}`,
-            ),
-        },
-
-        m(
-            "div", // serves two purposes: it has "overflow: hidden;", while the parent element has "overflow: visible" (to allow resize handle to overflow); also allows us to use flexbox for alignment
-            {
-                style: {
-                    display: "flex",
-                    justifyContent: column.horizontal_alignment,
-                    alignItems: "center", // No strong opinion on default vertical alignment for headers; center seems reasonable
-                },
-            },
-            renderer.render_header({
-                label: renderer.render_with_optional_help_text(
-                    column.display,
-                    column.help_text,
-                ),
-                sortable: column.sortable,
-                sorted: sort_direction || "no",
-                set_sort: function (direction: "forward" | "reverse") {
-                    updaters.sort_by_column(column.key, direction);
-                },
-            }),
-        ),
-
-        m("span", {
-            onmousedown: (e: MouseEvent) => {
-                e.preventDefault(); // prevent text highlighting
-
-                begin_header_drag(
-                    e,
-                    (width) => {
-                        updaters.set_column_width(column.key, width);
-                        m.redraw();
-                    },
-                    column.width,
-                    () => {
-                        m.redraw();
-                    },
-                );
-            },
-            class: "qdt-column-resizer",
-        }),
-    );
-}
-function table_rows(
-    columns: ConfiguredColumns,
-    data: ReadonlyArray<RowData>,
-    fill_last_page: boolean,
-    page_size: number,
-    table_key: string,
-    include_selection_column: boolean,
-    updaters: Updaters,
-    selected_pks: ReadonlySet<string>,
-) {
-    return [
-        data.map((row) =>
-            table_row(
-                row,
-                columns,
-                table_key,
-                include_selection_column
-                    ? checkbox_cell(row[0], updaters, selected_pks, table_key)
-                    : null,
-            ),
-        ),
-        fill_last_page &&
-            Array.from(Array(Math.max(0, page_size - data.length))).map((x) =>
-                raw_table_row(
-                    columns.fixed_enabled_columns.map((c) =>
-                        data_cell(c, null, true, table_key),
-                    ),
-                    columns.sortable_enabled_columns.map((c) =>
-                        data_cell(c, null, false, table_key),
-                    ),
-                    table_key,
-                    null,
-                ),
-            ),
-    ];
-}
-function raw_table_row(
-    fixed_cells: Children,
-    sortable_cells: Children,
-    table_key: string,
-    checkbox_cell: Vnode | null,
-) {
-    return m(
-        "div",
-        {
-            role: "row",
-            className: `qnc-data-table-row qnc-data-table-body-row qnc-data-table-row qnc-data-table-row-${CSS.escape(
-                table_key,
-            )}`,
-        },
-
-        // Empty "scroll detector" column
-        m("div", {
-            role: "cell",
-            style: "width: 0px; padding: 0; border: none;",
-        }),
-
-        checkbox_cell,
-        // include_selection_column && checkbox_cell(pk, updaters, selected_pks),
-
-        fixed_cells,
-        m("div", {
-            role: "cell",
-            class: `qdt-overflow-indicator-cell qdt-overflow-indicator-cell-left qnc-data-table-fixed-cell-${CSS.escape(
-                table_key,
-            )}`,
-        }),
-        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;",
-        }),
-    );
-}
-
-// #coupled-cell-functions: these functions are tightly coupled. TODO: move to a separate module
-function data_cell(
-    column: ConfiguredColumn,
-    content: Children,
-    fixed: boolean,
-    table_key: string,
-) {
-    return m(
-        "div",
-        {
-            role: "cell",
-            style: {
-                width: column.width + "px",
-                "--qdt-cell-justify-content": column.horizontal_alignment,
-                "--qdt-cell-align-items": column.data_vertical_alignment,
-            },
-            class: classes(
-                "qdt-cell",
-                fixed && `qnc-data-table-fixed-cell-${CSS.escape(table_key)}`,
-            ),
-        },
-        content,
-    );
-}
-// Note: layout tightly coupled to HeaderRow
-function table_row(
-    row: readonly [string, ReadonlyMap<string, string>],
-    columns: ConfiguredColumns,
-    table_key: string,
-    checkbox_cell: Vnode | null,
-) {
-    const [id, cell_map] = row;
-
-    return raw_table_row(
-        columns.fixed_enabled_columns.map((c) =>
-            data_cell(c, trust(cell_map.get(c.key) || ""), true, table_key),
-        ),
-        columns.sortable_enabled_columns.map((c) =>
-            data_cell(c, trust(cell_map.get(c.key) || ""), false, table_key),
-        ),
-        table_key,
-        checkbox_cell,
-    );
-}
-
-// #coupled-cell-functions: these functions are tightly coupled. TODO: move to a separate module
-function empty_checkbox_cell(table_key: string) {
-    return m(
-        "div",
-        {
-            role: "columnheader",
-            style: { width: "auto" }, // This is the only auto-width column; it works because every row has the same content
-            className: `qdt-cell qnc-data-table-fixed-cell-${CSS.escape(
-                table_key,
-            )}`,
-        },
-        // Render an invisible checkbox, so this header cell takes up the same width as the rest of the checkbox cells
-        m(
-            "label",
-            { className: "qdt-row-checkbox-label qdt-flex-cell" },
-            m("input", {
-                type: "checkbox",
-                style: {
-                    visibility: "hidden",
-                    pointerEvents: "none",
-                },
-                tabIndex: -1,
-            }),
-        ),
-    );
-}
-
-// #coupled-cell-functions: these functions are tightly coupled. TODO: move to a separate module
-function checkbox_cell(
-    pk: string,
-    updaters: Updaters,
-    selected_pks: ReadonlySet<string>,
-    table_key: string,
-) {
-    return m(
-        "div",
-        {
-            role: "cell",
-            style: { width: "auto" }, // This is the only auto-width column; it works because every row has the same content
-            className: `qdt-cell qnc-data-table-fixed-cell-${CSS.escape(
-                table_key,
-            )}`,
-        },
-        m(
-            "label",
-            { className: "qdt-row-checkbox-label qdt-flex-cell" },
-            m("input", {
-                type: "checkbox",
-                checked: selected_pks.has(pk),
-                onchange: (e: MouseEvent) => {
-                    updaters.set_selected(pk, !selected_pks.has(pk));
-                    // TODO: handle shift+clicking, like django_data_tables did
-                },
-            }),
-        ),
-    );
-}
-function empty_expanding_cell(role = "cell") {
-    return m("div", {
-        style: { flexGrow: "1", padding: "0", flexBasis: "0px" },
-        class: "qdt-empty-expanding-cell",
-        // Just in case users are using this in their selector for default cell background/border
-        role: role,
-    });
-}
-
-function extra_sort_function_widget(
-    current_sort: SortState | null,
-    extra_sort_functions: ExtraSortFunction[],
-    sort_by_function: (function_key: string) => void,
-) {
-    // TODO: update checkbox-dropdown to work with radio buttons, publish on npm, document that it should always be included as a peer dependency
-    // use that, so we can make help text smaller, and not show in "summary"
-    const current_function_key =
-        current_sort &&
-        current_sort.type == "function" &&
-        current_sort.function_key;
-    return m(
-        "label",
-        "sort by: ",
-        m(
-            "select",
-            {
-                onchange: (e: Event) => {
-                    const key = (e.target as HTMLSelectElement).value;
-                    if (key) sort_by_function(key);
-                },
-            },
-            current_sort == null && m("option", "-----"),
-            current_sort &&
-                current_sort.type == "column" &&
-                m("option", "(selected column)"),
-            extra_sort_functions.map((esf) =>
-                m(
-                    "option",
-                    {
-                        selected: current_function_key == esf.key,
-                        value: esf.key,
-                    },
-                    esf.display,
-                    esf.help_text && ` (${esf.help_text})`,
-                ),
-            ),
-        ),
-    );
-}
-
-function top_control_bar(options: {
-    current_page: number;
-    set_page: (page: number) => void;
-    total_pages: number | null;
-    page_size: number;
-    set_page_size: (size: number) => void;
-    result_count: number | null;
-    result_count_loading: boolean;
-    accessible_result_count: number | null;
-    sort_by_function: (function_key: string) => void;
-    extra_sort_functions: ExtraSortFunction[];
-    current_sort: SortState | null;
-}) {
-    function space_horizontally(gap: string, items: m.Children[]) {
-        return m(
-            "div",
-            { style: { overflow: "hidden" } },
-            m(
-                "div",
-                { style: { display: "flex", marginRight: "-" + gap } },
-                items.map((item) =>
-                    m("div", { style: { marginRight: gap } }, item, " "),
-                ),
-            ),
-        );
-    }
-
-    const {
-        current_page,
-        set_page,
-        total_pages,
-        page_size,
-        set_page_size,
-        result_count,
-        result_count_loading,
-        accessible_result_count,
-    } = options;
-
-    return [
-        space_horizontally("2em", [
-            // Paginator
-            [
-                m(
-                    "button",
-                    {
-                        type: "button",
-                        disabled: current_page <= 1,
-                        onclick: (e: MouseEvent) => set_page(current_page - 1),
-                    },
-                    "<",
-                ),
-                " Page ",
-                m("input", {
-                    type: "number",
-                    value: current_page,
-                    max: total_pages,
-                    style: { width: "3.5em" },
-                    onchange: function (e: Event) {
-                        set_page(
-                            parseInt((e.target as HTMLInputElement).value),
-                        );
-                    },
-                }),
-                " of ",
-                total_pages ?? "?",
-                " ",
-                m(
-                    "button",
-                    {
-                        type: "button",
-                        disabled: current_page >= (total_pages ?? 1),
-                        onclick: (e: MouseEvent) => set_page(current_page + 1),
-                    },
-                    ">",
-                ),
-            ],
-
-            // Results per page
-            m(
-                "label",
-                m("input", {
-                    value: page_size,
-                    type: "number",
-                    style: { width: "3.5em" },
-                    onchange: function (e: Event) {
-                        set_page_size(
-                            parseInt((e.target as HTMLInputElement).value),
-                        );
-                    },
-                }),
-                " results per page",
-            ),
-
-            // Result count
-            render_with_loader(
-                result_count_loading,
-                m("span", m("b", result_count), " result(s) total."),
-            ),
-
-            options.extra_sort_functions.length > 0 &&
-                extra_sort_function_widget(
-                    options.current_sort,
-                    options.extra_sort_functions,
-                    options.sort_by_function,
-                ),
-        ]),
-
-        m(
-            "div",
-            accessible_result_count !== null &&
-                result_count !== null &&
-                accessible_result_count < result_count &&
-                m(
-                    "div",
-                    { style: { color: "red", fontWeight: "bold" } },
-                    m("sup", "*"),
-                    "The result table is limited to the first ",
-                    accessible_result_count,
-                    " results.",
-                ),
-        ),
-    ];
-}
-
-function column_controls(
-    columns: ConfiguredColumns,
-    updaters: Updaters,
-    renderer: Renderer,
-) {
-    return m(
-        "details",
-        { className: "qdt-column-details" },
-        m("summary", "Columns"),
-        m(
-            "ol",
-            {
-                oncreate: (vnode) =>
-                    enable(vnode.dom as HTMLElement, {
-                        on_committed_move: (
-                            container: Element,
-                            dragged_element: Element,
-                            start_index: number,
-                            end_index: number,
-                        ) => {
-                            console.log("moved");
-                            updaters.set_column_order(
-                                Array.from(container.children).map(function (
-                                    li: Element,
-                                ) {
-                                    if (!(li instanceof HTMLElement))
-                                        throw new Error(
-                                            `unexpected child: ${li}`,
-                                        );
-                                    const value = li.dataset.key;
-                                    if (typeof value == "undefined")
-                                        throw new Error(
-                                            "column li missing [data-key]",
-                                        );
-                                    return value;
-                                }),
-                            );
-                        },
-                        stationary_list_item_markers: true,
-                        handle_selector: ".handle",
-                    }),
-            },
-            columns.all_sortable_columns.map((c) =>
-                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: MouseEvent) =>
-                                updaters.set_column_enabled(c.key, !c.enabled),
-                        }),
-                        " ",
-                        c.display,
-                        " ",
-                        // don't wrap c.display in help text, because it's part of the drag handle
-                        c.help_text &&
-                            renderer.render_with_help_text("", c.help_text),
-                        " ",
-                        m(
-                            "span.handle",
-                            { style: { padding: "0 0.5em", cursor: "grab" } },
-                            "↕︎",
-                        ),
-                    ),
-                ),
-            ),
-        ),
-    );
-}
-
-// I'd like to replace this with some kind of <qdt-loading-container> (make a new package on npm) which is user-styleable
-// Alternatively (or as part of that work), we could make use of <qnc-spinner-uppercase>
-// https://tracker.quadrant.net/issues/271/
-function render_with_loader(loading: boolean, content: m.Children) {
-    return m(
-        "div",
-        {
-            style: {
-                "--qdt-loading-spinner-size": "1em",
-                minWidth: "var(--qdt-loading-spinner-size)",
-                minHeight: "var(--qdt-loading-spinner-size)",
-                position: "relative",
-                isolation: "isolate", // force new stacking context
-            },
-        },
-        // content wrapper
-        m(
-            "div",
-            {
-                style: {
-                    opacity: loading ? "50%" : "",
-                },
-            },
-
-            content,
-        ),
-        // spinner
-        m("div", {
-            style: {
-                display: loading ? "block" : "none",
-                pointerEvents: "none",
-                zIndex: 2147483647,
-                position: "absolute",
-                top: "calc(50% - calc(var(--qdt-loading-spinner-size)/2))",
-                left: "calc(50% - calc(var(--qdt-loading-spinner-size)/2))",
-                borderRadius: "1000px",
-                border: "1px solid black",
-                borderWidth: "calc(var(--qdt-loading-spinner-size)/2)",
-                borderLeftColor: "white",
-                borderRightColor: "white",
-                opacity: "0.5",
-                animation: "qdt-loader-spin 1.2s linear infinite",
-            },
-        }),
-    );
-}
-function selection_controls(state: AppState<string>, updaters: Updaters) {
-    const page_ids = state.table_data.map(([pk, cells]) => pk);
-    const entire_page_selected = contains_all(
-        state.selected_pks,
-        new Set(page_ids),
-    );
-    const all_results_selected = contains_all(
-        state.selected_pks,
-        new Set(state.filtered_pks),
-    );
-
-    function clear_page() {
-        updaters.bulk_set_selected(page_ids, false);
-    }
-    function select_page() {
-        updaters.bulk_set_selected(page_ids, true);
-    }
-    function clear_table() {
-        updaters.bulk_set_selected(state.filtered_pks, false);
-    }
-    function select_table() {
-        updaters.bulk_set_selected(state.filtered_pks, true);
-    }
-    function clear_selection() {
-        updaters.bulk_set_selected(state.selected_pks, false);
-    }
-
-    const selection_operators = [
-        entire_page_selected
-            ? m(
-                  "button",
-                  { onclick: clear_page, type: "button" },
-                  "Deselect Current Page",
-              )
-            : m(
-                  "button",
-                  { onclick: select_page, type: "button" },
-                  "Select Current Page",
-              ),
-        all_results_selected
-            ? m(
-                  "button",
-                  { onclick: clear_table, type: "button" },
-                  "Deselect All Results",
-              )
-            : m(
-                  "button",
-                  { onclick: select_table, type: "button" },
-                  "Select All Results",
-              ),
-        m(
-            "button",
-            {
-                onclick: clear_selection,
-                disabled: state.selected_pks.size == 0,
-                type: "button",
-            },
-            "Clear Selection",
-        ),
-    ];
-    return m("div.qdt-selection-controls", selection_operators);
-}
-
-const contains_all = (Set.prototype as any).isSubsetOf
-    ? function <U>(
-          possible_superset: ReadonlySet<U>,
-          possible_subset: ReadonlySet<U>,
-      ): boolean {
-          // @ts-ignore
-          return possible_subset.isSubsetOf(possible_superset);
-      }
-    : function <U>(
-          possible_superset: ReadonlySet<U>,
-          possible_subset: ReadonlySet<U>,
-      ): boolean {
-          for (const value of possible_subset) {
-              if (!possible_superset.has(value)) return false;
-          }
-          return true;
-      };