@qnc/qnc_data_tables 1.3.1 → 1.3.2

package/dist/mithril_view.ts

@@ -0,0 +1,1138 @@
+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";
+import { QNCDialog } from "@qnc/qnc_dialog"; // access type definition
+import "@qnc/qnc_dialog"; // import for side effects
+
+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()),
+        m(
+            "div",
+            { style: { marginBottom: "1em" } },
+            top_control_bar({
+                column_controls_button: dialog_column_controls_button(
+                    state.columns,
+                    updaters,
+                    renderer,
+                ),
+                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: {
+    column_controls_button: Vnode;
+    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: { display: "flex", columnGap: gap, flexWrap: "wrap" } },
+            items.map((item) => m("div", item, " ")),
+        );
+    }
+
+    const {
+        current_page,
+        set_page,
+        total_pages,
+        page_size,
+        set_page_size,
+        result_count,
+        result_count_loading,
+        accessible_result_count,
+    } = options;
+
+    const 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),
+            },
+            ">",
+        ),
+    ];
+    const 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",
+    );
+    const total_result_count = render_with_loader(
+        result_count_loading,
+        m("span", m("b", result_count), " result(s) total."),
+    );
+    const optional_extra_sort_functions_widget =
+        options.extra_sort_functions.length > 0 &&
+        extra_sort_function_widget(
+            options.current_sort,
+            options.extra_sort_functions,
+            options.sort_by_function,
+        );
+
+    return [
+        space_horizontally("3em", [
+            space_horizontally("1.5em", [
+                paginator,
+                results_per_page,
+                total_result_count,
+            ]),
+            optional_extra_sort_functions_widget,
+            options.column_controls_button,
+        ]),
+
+        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 dialog_column_controls_button(
+    columns: ConfiguredColumns,
+    updaters: Updaters,
+    renderer: Renderer,
+): Vnode {
+    const dialog = m(
+        "qnc-dialog",
+        {
+            className: "qdt-qnc-dialog",
+            style: {
+                "--horizontal-preferences": "center end",
+                "--vertical-preferences": "after before",
+            },
+        },
+        m(
+            "ul",
+            {
+                style: {
+                    margin: "0",
+                    padding: "0",
+                    listStyle: "none",
+                },
+                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" } },
+                            "↕︎",
+                        ),
+                    ),
+                ),
+            ),
+        ),
+    );
+    return m(
+        "span",
+        m(
+            "button",
+            {
+                className: "qdt-column-options-button",
+                onclick: function (event: MouseEvent) {
+                    const button = event.currentTarget as HTMLElement;
+                    (button.nextElementSibling as QNCDialog).showNextTo(button);
+                },
+            },
+            "Columns ⋮",
+        ),
+        dialog,
+    );
+}
+
+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;
+      };