@perspective-dev/viewer-datagrid 4.0.0 → 4.1.0

package/src/ts/model/column_overrides.ts

@@ -0,0 +1,112 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type {
+    ColumnOverrides,
+    DatagridPluginElement,
+    RegularTable,
+} from "../types.js";
+
+interface RegularTableWithOverrides {
+    restoreColumnSizes(overrides: Record<number, number | undefined>): void;
+    saveColumnSizes(): Record<number, number | undefined>;
+}
+
+interface DatagridPluginWithCache extends DatagridPluginElement {
+    _cached_column_sizes?: ColumnOverrides;
+}
+
+/**
+ * Restore a saved column width override token.
+ *
+ * @param old_sizes An object previously returned by a call to
+ * `save_column_size_overrides()`
+ * @param cache A flag indicating whether this value should
+ * be cached so a future `resetAutoSize()` call does not clear it.
+ */
+export function restore_column_size_overrides(
+    this: DatagridPluginWithCache,
+    old_sizes: ColumnOverrides,
+    cache = false,
+): void {
+    if (!this._initialized) {
+        return;
+    }
+
+    if (cache) {
+        this._cached_column_sizes = old_sizes;
+    }
+
+    const overrides: Record<number, number | undefined> = {};
+    const { group_by } = this.model!._config;
+    const tree_header_offset = group_by?.length > 0 ? group_by.length + 1 : 0;
+
+    for (const key of Object.keys(old_sizes)) {
+        if (key === "__ROW_PATH__") {
+            overrides[tree_header_offset - 1] = old_sizes[key] as
+                | number
+                | undefined;
+        } else {
+            const index = this.model!._column_paths.indexOf(key);
+            overrides[index + tree_header_offset] = old_sizes[key] as
+                | number
+                | undefined;
+        }
+    }
+
+    (this.regular_table as RegularTableWithOverrides).restoreColumnSizes(
+        overrides,
+    );
+}
+
+/**
+ * Extract the current user-overriden column widths from
+ * `regular-table`. This function depends on the internal
+ * implementation of `regular-table` and may break!
+ *
+ * @returns An Object-as-dictionary keyed by column_path string, and
+ * valued by the column's user-overridden pixel width.
+ */
+export function save_column_size_overrides(
+    this: DatagridPluginWithCache,
+): ColumnOverrides {
+    if (!this._initialized) {
+        return {};
+    }
+
+    if (this._cached_column_sizes) {
+        const x = this._cached_column_sizes;
+        this._cached_column_sizes = undefined;
+        return x;
+    }
+
+    const overrides = (
+        this.regular_table as RegularTableWithOverrides
+    ).saveColumnSizes();
+    const { group_by } = this.model!._config;
+    const tree_header_offset = group_by?.length > 0 ? group_by.length + 1 : 0;
+
+    const old_sizes: ColumnOverrides = {};
+    for (const key of Object.keys(overrides)) {
+        const numKey = Number(key);
+        if (overrides[numKey] !== undefined) {
+            const index = numKey - tree_header_offset;
+            if (index > -1) {
+                old_sizes[this.model!._column_paths[index]] = overrides[numKey];
+            } else if (index === -1) {
+                old_sizes["__ROW_PATH__"] = overrides[numKey];
+            }
+        }
+    }
+
+    return old_sizes;
+}

package/src/ts/model/create.ts

@@ -0,0 +1,247 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import chroma from "chroma-js";
+import { createDataListener } from "../data_listener/index.js";
+import { blend, make_color_record } from "../color_utils.js";
+import type {
+    ColumnType,
+    Table,
+    View,
+    ViewConfig,
+} from "@perspective-dev/client";
+import type {
+    DatagridModel,
+    DatagridPluginElement,
+    RegularTable,
+    Schema,
+    CellMeta,
+    ElemFactory,
+    EditMode,
+    PerspectiveViewerElement,
+} from "../types.js";
+
+function get_rule(regular: HTMLElement, tag: string, def: string): string {
+    const color = window.getComputedStyle(regular).getPropertyValue(tag).trim();
+    if (color.length > 0) {
+        return color;
+    } else {
+        return def;
+    }
+}
+
+class ElemFactoryImpl implements ElemFactory {
+    private _name: string;
+    private _elements: HTMLElement[];
+    private _index: number;
+
+    constructor(name: string) {
+        this._name = name;
+        this._elements = [];
+        this._index = 0;
+    }
+
+    clear(): void {
+        this._index = 0;
+    }
+
+    get(): HTMLElement {
+        if (!this._elements[this._index]) {
+            this._elements[this._index] = document.createElement(this._name);
+        }
+        const elem = this._elements[this._index];
+        this._index += 1;
+        return elem;
+    }
+}
+
+function get_psp_type(this: DatagridModel, metadata: CellMeta): ColumnType {
+    if (metadata.x !== undefined && metadata.x >= 0) {
+        return this._column_types[metadata.x];
+    } else {
+        return this._row_header_types[metadata.row_header_x! - 1];
+    }
+}
+
+export async function createModel(
+    this: DatagridPluginElement,
+    regular: RegularTable,
+    table: Table,
+    view: View,
+    extend: Partial<DatagridModel> = {},
+): Promise<DatagridModel> {
+    const config = (await view.get_config()) as ViewConfig;
+    if (this?.model?._config) {
+        const old = this.model._config;
+        let group_by_changed = old.group_by.length !== config.group_by.length;
+        const type_changed =
+            (old.group_by.length === 0 || config.group_by.length === 0) &&
+            group_by_changed;
+
+        if (!group_by_changed) {
+            for (const lvl in old.group_by) {
+                group_by_changed ||= config.group_by[lvl] !== old.group_by[lvl];
+            }
+        }
+
+        let split_by_changed = old.split_by.length !== config.split_by.length;
+        if (split_by_changed) {
+            for (const lvl in old.split_by) {
+                split_by_changed ||= config.split_by[lvl] !== old.split_by[lvl];
+            }
+        }
+
+        let columns_changed = old.columns.length !== config.columns.length;
+        if (columns_changed) {
+            for (const lvl in old.columns) {
+                columns_changed ||= config.columns[lvl] !== old.columns[lvl];
+            }
+        }
+
+        let filter_changed = old.filter.length !== config.filter.length;
+        if (filter_changed) {
+            for (const lvl in old.filter) {
+                for (const i in config.filter[lvl]) {
+                    filter_changed ||=
+                        config.filter[lvl][i as unknown as number] !==
+                        old.filter[lvl][i as unknown as number];
+                }
+            }
+        }
+
+        let sort_changed = old.sort.length !== config.sort.length;
+        if (sort_changed) {
+            for (const lvl in old.sort) {
+                for (const i in config.sort[lvl]) {
+                    sort_changed ||=
+                        config.sort[lvl][i as unknown as number] !==
+                        old.sort[lvl][i as unknown as number];
+                }
+            }
+        }
+
+        this._reset_scroll_top = group_by_changed;
+        this._reset_scroll_left = split_by_changed;
+        this._reset_select =
+            group_by_changed ||
+            split_by_changed ||
+            filter_changed ||
+            sort_changed ||
+            columns_changed;
+
+        this._reset_column_size =
+            split_by_changed ||
+            group_by_changed ||
+            columns_changed ||
+            type_changed;
+    }
+
+    const [table_schema, num_rows, schema, expression_schema, _edit_port] =
+        await Promise.all([
+            table.schema(),
+            view.num_rows(),
+            view.schema(),
+            view.expression_schema(),
+            (this.parentElement as PerspectiveViewerElement).getEditPort(),
+        ]);
+
+    const _plugin_background = chroma(
+        get_rule(regular, "--plugin--background", "#FFFFFF"),
+    ).rgb();
+
+    const _pos_fg_color = make_color_record(
+        get_rule(regular, "--rt-pos-cell--color", "#338DCD"),
+    );
+
+    const _neg_fg_color = make_color_record(
+        get_rule(regular, "--rt-neg-cell--color", "#FF5942"),
+    );
+
+    const _pos_bg_color = make_color_record(
+        blend(_pos_fg_color[0], _plugin_background),
+    );
+
+    const _neg_bg_color = make_color_record(
+        blend(_neg_fg_color[0], _plugin_background),
+    );
+
+    const _color = make_color_record(
+        get_rule(regular, "--active--color", "#ff0000"),
+    );
+
+    const _schema: Schema = {
+        ...(schema as Schema),
+        ...(expression_schema as Schema),
+    };
+    const _table_schema: Schema = {
+        ...(table_schema as Schema),
+        ...(expression_schema as Schema),
+    };
+
+    const _column_paths: string[] = [];
+    const _is_editable: boolean[] = [];
+    const _column_types: ColumnType[] = [];
+
+    const _edit_mode: EditMode = this._edit_mode || "READ_ONLY";
+    this._edit_button!.dataset.editMode = _edit_mode;
+
+    const model: DatagridModel = Object.assign(extend, {
+        _edit_port,
+        _view: view,
+        _table: table,
+        _table_schema,
+        _config: config,
+        _num_rows: num_rows,
+        _schema,
+        _ids: [],
+        _plugin_background,
+        _color,
+        _pos_fg_color,
+        _neg_fg_color,
+        _pos_bg_color,
+        _neg_bg_color,
+        _column_paths,
+        _column_types,
+        _is_editable,
+        _edit_mode,
+        _selection_state: {
+            selected_areas: [],
+            dirty: false,
+        },
+        _row_header_types: config.group_by.map((column_path) => {
+            return _table_schema[column_path];
+        }),
+        _series_color_map: new Map<string, string>(),
+        _series_color_seed: new Map<string, number>(),
+        get_psp_type,
+        _div_factory: extend._div_factory || new ElemFactoryImpl("div"),
+    }) as DatagridModel;
+
+    regular.setDataListener(
+        createDataListener(this.parentElement as PerspectiveViewerElement).bind(
+            model,
+            regular,
+        ) as any,
+        {
+            virtual_mode: (window
+                .getComputedStyle(regular)
+                .getPropertyValue("--datagrid-virtual-mode")
+                ?.trim() || "both") as
+                | "both"
+                | "horizontal"
+                | "vertical"
+                | "none",
+        },
+    );
+
+    return model;
+}

package/src/ts/model/index.ts

@@ -0,0 +1,19 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+export { PRIVATE_PLUGIN_SYMBOL } from "../types.js";
+export { createModel } from "./create.js";
+export { toggle_edit_mode, toggle_scroll_lock } from "./toolbar.js";
+export {
+    save_column_size_overrides,
+    restore_column_size_overrides,
+} from "./column_overrides.js";

package/src/ts/model/toolbar.ts

@@ -0,0 +1,64 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type { DatagridPluginElement, EditMode } from "../types.js";
+
+export const EDIT_MODES: readonly EditMode[] = [
+    "READ_ONLY",
+    "EDIT",
+    "SELECT_ROW",
+    "SELECT_COLUMN",
+    "SELECT_REGION",
+] as const;
+
+export function toggle_edit_mode(
+    this: DatagridPluginElement,
+    mode?: EditMode,
+): void {
+    if (typeof mode === "undefined") {
+        mode =
+            EDIT_MODES[
+                (EDIT_MODES.indexOf(this._edit_mode) + 1) % EDIT_MODES.length
+            ];
+    }
+
+    (this.parentElement as any)?.setSelection?.();
+    this._edit_mode = mode;
+    if (this.model) {
+        this.model._edit_mode = mode;
+        this.model._selection_state = {
+            selected_areas: [],
+            dirty: true,
+        };
+    }
+
+    if (this._edit_button !== undefined) {
+        this._edit_button.dataset.editMode = mode;
+    }
+
+    this.dataset.editMode = mode;
+}
+
+export function toggle_scroll_lock(
+    this: DatagridPluginElement,
+    force?: boolean,
+): void {
+    if (typeof force === "undefined") {
+        force = !this._is_scroll_lock;
+    }
+
+    this._is_scroll_lock = force;
+    this.classList.toggle("sub-cell-scroll-disabled", force);
+    if (this._scroll_lock !== undefined) {
+        this._scroll_lock.classList.toggle("lock-scroll", force);
+    }
+}

package/src/ts/plugin/activate.ts

@@ -0,0 +1,235 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { style_selected_column } from "../style_handlers/column_header.js";
+import {
+    click_listener,
+    mousedown_listener,
+} from "../event_handlers/header_click.js";
+
+import { focusinListener, focusoutListener } from "../event_handlers/focus.js";
+import { keydownListener, clickListener } from "../event_handlers/click.js";
+
+import { selectionListener } from "../event_handlers/row_select_click.js";
+import { deselect_all_listener } from "../event_handlers/deselect_all.js";
+
+import { createModel } from "../model/create.js";
+import { dispatch_click_listener } from "../event_handlers/dispatch_click.js";
+
+import { addAreaMouseSelection } from "../event_handlers/select_region.js";
+
+import {
+    createConsolidatedStyleListener,
+    installConsolidatedStyleMethods,
+} from "../style_handlers/consolidated.js";
+
+import type { View } from "@perspective-dev/client";
+import type {
+    DatagridPluginElement,
+    PerspectiveViewerElement,
+    SelectedPosition,
+} from "../types.js";
+import type { RegularTableElement } from "regular-table";
+
+interface ToggleColumnSettingsEvent extends CustomEvent {
+    detail: {
+        column_name: string | null;
+        open: boolean;
+    };
+}
+
+/**
+ * Lazy initialize this plugin with various listeners.
+ */
+export async function activate(
+    this: DatagridPluginElement,
+    view: View,
+): Promise<void> {
+    const viewer = this.parentElement as PerspectiveViewerElement;
+    const table = await viewer.getTable();
+
+    if (!this._initialized) {
+        this.innerHTML = "";
+        if (this.shadowRoot) {
+            this.shadowRoot.appendChild(this.regular_table);
+        } else {
+            this.appendChild(this.regular_table);
+        }
+
+        this.model = await createModel.call(
+            this,
+            this.regular_table,
+            table,
+            view,
+        );
+
+        if (!this.model) {
+            return;
+        }
+
+        addAreaMouseSelection(this, this.regular_table, {
+            className: "psp-select-region",
+        });
+
+        // Create shared state maps for selection and focus tracking
+        const selected_rows_map = new WeakMap<
+            RegularTableElement,
+            Set<number>
+        >();
+        const selected_position_map = new WeakMap<
+            RegularTableElement,
+            SelectedPosition
+        >();
+
+        // Install consolidated style methods on model prototype
+        installConsolidatedStyleMethods(this.model);
+
+        // Single consolidated style listener replaces:
+        // - table_cell_style_listener
+        // - group_header_style_listener
+        // - column_header_style_listener
+        // - selectionStyleListener
+        // - editable_style_listener
+        // - focus_style_listener
+        this.regular_table.addStyleListener(
+            createConsolidatedStyleListener(
+                this,
+                selected_rows_map as any,
+                selected_position_map as any,
+            ).bind(this.model, this.regular_table, viewer),
+        );
+
+        // uh ..
+        this.regular_table.addEventListener(
+            "click",
+            click_listener.bind(
+                this.model,
+                this.regular_table,
+            ) as EventListener,
+        );
+
+        this.regular_table.addEventListener(
+            "mousedown",
+            selectionListener.bind(
+                this.model,
+                this.regular_table,
+                viewer,
+                selected_rows_map as any,
+            ) as unknown as EventListener,
+        );
+
+        this.regular_table.addEventListener(
+            "psp-deselect-all",
+            deselect_all_listener.bind(
+                this.model,
+                this.regular_table,
+                viewer,
+                selected_rows_map as any,
+            ) as unknown as EventListener,
+        );
+
+        // User event click
+        this.regular_table.addEventListener(
+            "click",
+            dispatch_click_listener.bind(
+                this.model,
+                this.regular_table,
+                viewer,
+            ) as unknown as EventListener,
+        );
+
+        // tree collapse, expand, edit button headers
+        this.regular_table.addEventListener(
+            "mousedown",
+            mousedown_listener.bind(
+                this.model,
+                this.regular_table,
+                viewer,
+            ) as unknown as EventListener,
+        );
+
+        // Editing event handlers (style handling is now in consolidated listener)
+        // TODO relies on this.model._is_editable
+        this.regular_table.addEventListener(
+            "click",
+            clickListener.bind(
+                this.model,
+                this.regular_table,
+                viewer,
+            ) as EventListener,
+        );
+
+        this.regular_table.addEventListener(
+            "focusin",
+            focusinListener.bind(
+                this.model,
+                this.regular_table,
+                viewer,
+                selected_position_map as any,
+            ) as EventListener,
+        );
+
+        this.regular_table.addEventListener(
+            "focusout",
+            focusoutListener.bind(
+                this.model,
+                this.regular_table,
+                viewer,
+                selected_position_map as any,
+            ) as EventListener,
+        );
+
+        this.regular_table.addEventListener(
+            "keydown",
+            keydownListener.bind(
+                this.model,
+                this.regular_table,
+                viewer,
+                selected_position_map as any,
+            ) as EventListener,
+        );
+
+        // viewer event listeners
+        viewer.addEventListener(
+            "perspective-toggle-column-settings",
+            (event: Event) => {
+                const toggleEvent = event as ToggleColumnSettingsEvent;
+                if (this.isConnected) {
+                    style_selected_column.call(
+                        this.model!,
+                        this.regular_table,
+                        viewer,
+                        toggleEvent.detail.column_name ?? undefined,
+                    );
+                    if (!toggleEvent.detail.open) {
+                        this.model!._column_settings_selected_column =
+                            undefined;
+                        return;
+                    }
+
+                    this.model!._column_settings_selected_column =
+                        toggleEvent.detail.column_name ?? undefined;
+                }
+            },
+        );
+
+        this._initialized = true;
+    } else {
+        await createModel.call(
+            this,
+            this.regular_table,
+            table,
+            view,
+            this.model,
+        );
+    }
+}