@perspective-dev/viewer-datagrid 4.0.1 → 4.1.1

package/src/ts/event_handlers/select_region.ts

@@ -0,0 +1,427 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { RegularTableElement } from "regular-table";
+import type {
+    DatagridPluginElement,
+    PerspectiveViewerElement,
+    SelectionArea,
+} from "../types.js";
+import { ViewWindow } from "@perspective-dev/client";
+
+const MOUSE_SELECTED_AREA_CLASS = "mouse-selected-area";
+
+interface AddAreaMouseSelectionOptions {
+    className?: string;
+    selected?: SelectionArea[];
+}
+
+export const addAreaMouseSelection = (
+    datagrid: DatagridPluginElement,
+    table: RegularTableElement,
+    {
+        className = MOUSE_SELECTED_AREA_CLASS,
+        selected = [],
+    }: AddAreaMouseSelectionOptions = {},
+): RegularTableElement => {
+    datagrid.model!._selection_state = {
+        selected_areas: selected,
+        dirty: true,
+    };
+
+    table.addEventListener(
+        "mousedown",
+        getMousedownListener(datagrid, table, className),
+    );
+
+    table.addEventListener(
+        "mouseover",
+        getMouseoverListener(datagrid, table, className),
+    );
+
+    table.addEventListener(
+        "mouseup",
+        getMouseupListener(datagrid, table, className),
+    );
+
+    table.addStyleListener(() =>
+        applyMouseAreaSelections(datagrid, table, className),
+    );
+
+    return table;
+};
+
+const getMousedownListener =
+    (
+        datagrid: DatagridPluginElement,
+        table: RegularTableElement,
+        className: string,
+    ) =>
+    (event: Event): void => {
+        const mouseEvent = event as MouseEvent;
+        if (
+            mouseEvent.button === 0 &&
+            (datagrid.model!._edit_mode === "SELECT_REGION" ||
+                datagrid.model!._edit_mode === "SELECT_ROW" ||
+                datagrid.model!._edit_mode === "SELECT_COLUMN")
+        ) {
+            datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES = {};
+            const meta = table.getMeta(mouseEvent.target as Element);
+            if (meta && meta.x !== undefined && meta.y !== undefined) {
+                datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES =
+                    {
+                        x: meta.x,
+                        y: meta.y,
+                    };
+
+                datagrid.model!._selection_state.old_selected_areas =
+                    datagrid.model!._selection_state.selected_areas;
+                datagrid.model!._selection_state.selected_areas = [];
+
+                const start: SelectionArea = {
+                    x0: meta.x,
+                    x1: meta.x,
+                    y0: meta.y,
+                    y1: meta.y,
+                };
+                datagrid.model!._selection_state.potential_selection = start;
+                applyMouseAreaSelections(
+                    datagrid,
+                    table,
+                    className,
+                    datagrid.model!._selection_state.selected_areas.concat([
+                        start,
+                    ]),
+                );
+
+                return;
+            }
+        }
+
+        datagrid.model!._selection_state.selected_areas = [];
+    };
+
+const getMouseoverListener =
+    (
+        datagrid: DatagridPluginElement,
+        table: RegularTableElement,
+        className: string,
+    ) =>
+    (event: Event): void => {
+        const mouseEvent = event as MouseEvent;
+        if (
+            datagrid.model!._edit_mode === "SELECT_REGION" ||
+            datagrid.model!._edit_mode === "SELECT_ROW" ||
+            datagrid.model!._edit_mode === "SELECT_COLUMN"
+        ) {
+            if (
+                datagrid.model!._selection_state
+                    .CURRENT_MOUSEDOWN_COORDINATES &&
+                datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES
+                    .x !== undefined
+            ) {
+                const meta = table.getMeta(mouseEvent.target as Element);
+                if (meta && meta.x !== undefined && meta.y !== undefined) {
+                    const potentialSelection: SelectionArea = {
+                        x0: Math.min(
+                            meta.x,
+                            datagrid.model!._selection_state
+                                .CURRENT_MOUSEDOWN_COORDINATES.x!,
+                        ),
+                        x1: Math.max(
+                            meta.x,
+                            datagrid.model!._selection_state
+                                .CURRENT_MOUSEDOWN_COORDINATES.x!,
+                        ),
+                        y0: Math.min(
+                            meta.y,
+                            datagrid.model!._selection_state
+                                .CURRENT_MOUSEDOWN_COORDINATES.y!,
+                        ),
+                        y1: Math.max(
+                            meta.y,
+                            datagrid.model!._selection_state
+                                .CURRENT_MOUSEDOWN_COORDINATES.y!,
+                        ),
+                    };
+
+                    datagrid.model!._selection_state.potential_selection =
+                        potentialSelection;
+
+                    applyMouseAreaSelections(
+                        datagrid,
+                        table,
+                        className,
+                        datagrid.model!._selection_state.selected_areas.concat([
+                            potentialSelection,
+                        ]),
+                    );
+                }
+            }
+        }
+    };
+
+const getMouseupListener =
+    (
+        datagrid: DatagridPluginElement,
+        table: RegularTableElement,
+        className: string,
+    ) =>
+    (event: Event): void => {
+        const mouseEvent = event as MouseEvent;
+        if (
+            datagrid.model!._edit_mode === "SELECT_REGION" ||
+            datagrid.model!._edit_mode === "SELECT_ROW" ||
+            datagrid.model!._edit_mode === "SELECT_COLUMN"
+        ) {
+            const meta = table.getMeta(mouseEvent.target as Element);
+            if (!meta) return;
+
+            if (
+                (datagrid.model!._selection_state.old_selected_areas?.length ??
+                    0) > 0
+            ) {
+                const selected =
+                    datagrid.model!._selection_state.old_selected_areas![0];
+                if (
+                    selected.x0 === selected.x1 &&
+                    selected.y0 === selected.y1 &&
+                    selected.x0 === meta.x &&
+                    selected.y0 === meta.y
+                ) {
+                    datagrid.model!._selection_state.selected_areas = [];
+                    datagrid.model!._selection_state.old_selected_areas = [];
+                    datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES =
+                        {};
+                    datagrid.model!._selection_state.potential_selection =
+                        undefined;
+                    applyMouseAreaSelections(datagrid, table, className, []);
+                    return;
+                }
+            }
+
+            datagrid.model!._selection_state.old_selected_areas = [];
+
+            if (
+                datagrid.model!._selection_state
+                    .CURRENT_MOUSEDOWN_COORDINATES &&
+                datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES
+                    .x !== undefined &&
+                meta.x !== undefined &&
+                meta.y !== undefined
+            ) {
+                const selection: SelectionArea = {
+                    x0: Math.min(
+                        meta.x,
+                        datagrid.model!._selection_state
+                            .CURRENT_MOUSEDOWN_COORDINATES.x!,
+                    ),
+                    x1: Math.max(
+                        meta.x,
+                        datagrid.model!._selection_state
+                            .CURRENT_MOUSEDOWN_COORDINATES.x!,
+                    ),
+                    y0: Math.min(
+                        meta.y,
+                        datagrid.model!._selection_state
+                            .CURRENT_MOUSEDOWN_COORDINATES.y!,
+                    ),
+                    y1: Math.max(
+                        meta.y,
+                        datagrid.model!._selection_state
+                            .CURRENT_MOUSEDOWN_COORDINATES.y!,
+                    ),
+                };
+                datagrid.model!._selection_state.selected_areas.push(selection);
+                applyMouseAreaSelections(datagrid, table, className);
+            }
+
+            datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES = {};
+            datagrid.model!._selection_state.potential_selection = undefined;
+        }
+    };
+
+function set_psp_selection(
+    viewer: PerspectiveViewerElement,
+    datagrid: DatagridPluginElement,
+    { x0, x1, y0, y1 }: SelectionArea,
+): void {
+    const viewport: ViewWindow = {};
+    const mode = datagrid.model!._edit_mode;
+    if (
+        x0 !== undefined &&
+        ["SELECT_COLUMN", "SELECT_REGION"].indexOf(mode) > -1
+    ) {
+        viewport.start_col = x0;
+    }
+
+    if (
+        x1 !== undefined &&
+        ["SELECT_COLUMN", "SELECT_REGION"].indexOf(mode) > -1
+    ) {
+        viewport.end_col = x1 + 1;
+    }
+
+    if (
+        y0 !== undefined &&
+        ["SELECT_ROW", "SELECT_REGION"].indexOf(mode) > -1
+    ) {
+        viewport.start_row = y0;
+    }
+
+    if (
+        y1 !== undefined &&
+        ["SELECT_ROW", "SELECT_REGION"].indexOf(mode) > -1
+    ) {
+        viewport.end_row = y1 + 1;
+    }
+
+    viewer.setSelection(viewport);
+}
+
+export const applyMouseAreaSelections = (
+    datagrid: DatagridPluginElement,
+    table: RegularTableElement,
+    className: string,
+    selected?: SelectionArea[],
+): void => {
+    if (
+        datagrid.model!._edit_mode === "SELECT_REGION" ||
+        datagrid.model!._edit_mode === "SELECT_ROW" ||
+        datagrid.model!._edit_mode === "SELECT_COLUMN"
+    ) {
+        selected = datagrid.model!._selection_state.selected_areas.slice(0);
+        if (datagrid.model!._selection_state.potential_selection) {
+            selected.push(datagrid.model!._selection_state.potential_selection);
+        }
+
+        const tds = table.querySelectorAll("tbody td");
+
+        if (selected.length > 0) {
+            set_psp_selection(
+                datagrid.parentElement as any,
+                datagrid,
+                selected[0],
+            );
+            applyMouseAreaSelection(datagrid, table, selected, className);
+        } else {
+            (datagrid.parentElement as any).setSelection();
+            for (const td of tds) {
+                td.classList.remove(className);
+            }
+        }
+    } else if (datagrid.model!._selection_state.dirty) {
+        datagrid.model!._selection_state.dirty = false;
+        const tds = table.querySelectorAll("tbody td");
+        for (const td of tds) {
+            td.classList.remove(className);
+        }
+    }
+};
+
+const applyMouseAreaSelection = (
+    datagrid: DatagridPluginElement,
+    table: RegularTableElement,
+    selected: SelectionArea[],
+    className: string,
+): void => {
+    if (datagrid.model!._edit_mode === "SELECT_REGION" && selected.length > 0) {
+        const tds = table.querySelectorAll("tbody td");
+
+        for (const td of tds) {
+            const meta = table.getMeta(td);
+            if (!meta) continue;
+            let rendered = false;
+            for (const { x0, x1, y0, y1 } of selected) {
+                if (
+                    x0 !== undefined &&
+                    y0 !== undefined &&
+                    x1 !== undefined &&
+                    y1 !== undefined
+                ) {
+                    if (
+                        x0 <= meta.x &&
+                        meta.x <= x1 &&
+                        y0 <= meta.y &&
+                        meta.y <= y1
+                    ) {
+                        rendered = true;
+                        datagrid.model!._selection_state.dirty = true;
+                        td.classList.add(className);
+                    }
+                }
+            }
+
+            if (!rendered) {
+                td.classList.remove(className);
+            }
+        }
+    } else if (
+        datagrid.model!._edit_mode === "SELECT_ROW" &&
+        selected.length > 0
+    ) {
+        const tds = table.querySelectorAll("tbody td");
+
+        for (const td of tds) {
+            const meta = table.getMeta(td);
+            if (!meta) continue;
+            let rendered = false;
+            for (const { x0, x1, y0, y1 } of selected) {
+                if (
+                    x0 !== undefined &&
+                    y0 !== undefined &&
+                    x1 !== undefined &&
+                    y1 !== undefined
+                ) {
+                    if (y0 <= meta.y && meta.y <= y1) {
+                        datagrid.model!._selection_state.dirty = true;
+                        rendered = true;
+                        td.classList.add(className);
+                    }
+                }
+            }
+
+            if (!rendered) {
+                td.classList.remove(className);
+            }
+        }
+    } else if (
+        datagrid.model!._edit_mode === "SELECT_COLUMN" &&
+        selected.length > 0
+    ) {
+        const tds = table.querySelectorAll("tbody td");
+
+        for (const td of tds) {
+            const meta = table.getMeta(td);
+            if (!meta) continue;
+            let rendered = false;
+            for (const { x0, x1, y0, y1 } of selected) {
+                if (
+                    x0 !== undefined &&
+                    y0 !== undefined &&
+                    x1 !== undefined &&
+                    y1 !== undefined
+                ) {
+                    if (x0 <= meta.x && meta.x <= x1) {
+                        datagrid.model!._selection_state.dirty = true;
+                        rendered = true;
+                        td.classList.add(className);
+                    }
+                }
+            }
+
+            if (!rendered) {
+                td.classList.remove(className);
+            }
+        }
+    }
+};

package/src/ts/event_handlers/sort.ts

@@ -0,0 +1,118 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { RegularTableElement } from "regular-table";
+import type {
+    DatagridModel,
+    PerspectiveViewerElement,
+    SortRotationOrder,
+    SortTerm,
+} from "../types.js";
+import { SortDir } from "@perspective-dev/client";
+
+const ROW_SORT_ORDER: SortRotationOrder = {
+    desc: "asc",
+    asc: undefined,
+    "desc abs": "asc abs",
+    "asc abs": undefined,
+};
+
+const ROW_COL_SORT_ORDER: SortRotationOrder = {
+    desc: "asc",
+    asc: "col desc",
+    "desc abs": "asc abs",
+    "asc abs": "col desc abs",
+    "col desc": "col asc",
+    "col asc": undefined,
+    "col desc abs": "col asc abs",
+    "col asc abs": undefined,
+};
+
+export async function sortHandler(
+    this: DatagridModel,
+    regularTable: RegularTableElement,
+    viewer: PerspectiveViewerElement,
+    event: MouseEvent,
+    target: HTMLElement,
+): Promise<void> {
+    const meta = regularTable.getMeta(target);
+    if (!meta?.column_header) return;
+    const column_name = meta.column_header[this._config.split_by.length];
+    const sort_method =
+        event.ctrlKey ||
+        (event as MouseEvent & { metaKet?: boolean }).metaKet ||
+        event.altKey
+            ? append_sort
+            : override_sort;
+
+    const abs = event.shiftKey;
+    const sort = sort_method.call(this, column_name, abs);
+    await viewer.restore({ sort });
+}
+
+export function append_sort(
+    this: DatagridModel,
+    column_name: string,
+    abs: boolean,
+): SortTerm[] {
+    const sort: SortTerm[] = [];
+    let found = false;
+    for (const sort_term of this._config.sort) {
+        const [_column_name, _sort_dir] = sort_term;
+        if (_column_name === column_name) {
+            found = true;
+            const term = create_sort.call(this, column_name, _sort_dir, abs);
+            if (term) {
+                sort.push(term);
+            }
+        } else {
+            sort.push(sort_term);
+        }
+    }
+
+    if (!found) {
+        sort.push([column_name, abs ? "desc abs" : "desc"]);
+    }
+
+    return sort;
+}
+
+export function override_sort(
+    this: DatagridModel,
+    column_name: string,
+    abs: boolean,
+): SortTerm[] {
+    for (const [_column_name, _sort_dir] of this._config.sort) {
+        if (_column_name === column_name) {
+            const sort = create_sort.call(this, column_name, _sort_dir, abs);
+            return sort ? [sort] : [];
+        }
+    }
+    return [[column_name, abs ? "desc abs" : "desc"]];
+}
+
+export function create_sort(
+    this: DatagridModel,
+    column_name: string,
+    sort_dir: SortDir | undefined,
+    _abs: boolean,
+): SortTerm | undefined {
+    const is_col_sortable = this._config.split_by.length > 0;
+    const order = is_col_sortable ? ROW_COL_SORT_ORDER : ROW_SORT_ORDER;
+    const inc_sort_dir: SortDir | undefined = sort_dir
+        ? order[sort_dir]
+        : "desc";
+    if (inc_sort_dir) {
+        return [column_name, inc_sort_dir];
+    }
+    return undefined;
+}

package/src/ts/get_cell_config.ts

@@ -0,0 +1,68 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { View, ViewConfig, Filter, Scalar } from "@perspective-dev/client";
+import type { CellConfigResult } from "./types.js";
+
+interface ModelWithViewAndConfig {
+    _view: View;
+    _config: ViewConfig;
+}
+
+interface RowData {
+    __ROW_PATH__?: unknown[];
+    [key: string]: unknown;
+}
+
+export default async function getCellConfig(
+    { _view, _config }: ModelWithViewAndConfig,
+    row_idx: number,
+    col_idx: number,
+): Promise<CellConfigResult> {
+    const group_by = _config.group_by;
+    const split_by = _config.split_by;
+    const start_row = row_idx >= 0 ? row_idx : 0;
+    const end_row = start_row + 1;
+    const r = (await _view.to_json({ start_row, end_row })) as RowData[];
+    const row_paths = r.map((x) => x.__ROW_PATH__);
+    const group_by_values = (row_paths[0] || []) as Scalar[];
+    const row_filters = group_by
+        .map((pivot, index): Filter | undefined => {
+            const pivot_value = group_by_values[index];
+            return pivot_value ? [pivot, "==", pivot_value] : undefined;
+        })
+        .filter((x): x is Filter => x !== undefined);
+
+    const column_index = group_by.length > 0 ? col_idx + 1 : col_idx;
+    const column_paths = Object.keys(r[0])[column_index];
+    const result: CellConfigResult = {
+        row: r[0] as Record<string, unknown>,
+        column_names: [],
+        config: { filter: [] },
+    };
+    let column_filters: Filter[] = [];
+    if (column_paths) {
+        const split_by_values = column_paths.split("|");
+        result.column_names = [split_by_values[split_by.length]];
+        column_filters = split_by
+            .map((pivot, index): Filter | undefined => {
+                const pivot_value = split_by_values[index];
+                return pivot_value ? [pivot, "==", pivot_value] : undefined;
+            })
+            .filter((x): x is Filter => x !== undefined)
+            .filter(([, , value]) => value !== "__ROW_PATH__");
+    }
+
+    const filter = _config.filter.concat(row_filters).concat(column_filters);
+    result.config = { filter };
+    return result;
+}

package/src/ts/index.ts

@@ -0,0 +1,49 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 "regular-table";
+import { HTMLPerspectiveViewerDatagridPluginElement } from "./custom_elements/datagrid.js";
+import { HTMLPerspectiveViewerDatagridToolbarElement } from "./custom_elements/toolbar.js";
+
+/******************************************************************************
+ *
+ * Main
+ *
+ */
+
+interface PerspectiveViewerConstructor {
+    registerPlugin(tagName: string): void;
+}
+
+async function _register_element(): Promise<void> {
+    customElements.define(
+        "perspective-viewer-datagrid-toolbar",
+        HTMLPerspectiveViewerDatagridToolbarElement,
+    );
+
+    customElements.define(
+        "perspective-viewer-datagrid",
+        HTMLPerspectiveViewerDatagridPluginElement,
+    );
+
+    await customElements.whenDefined("perspective-viewer");
+    const PerspectiveViewer = customElements.get(
+        "perspective-viewer",
+    ) as unknown as PerspectiveViewerConstructor;
+    PerspectiveViewer.registerPlugin("perspective-viewer-datagrid");
+}
+
+_register_element();
+
+export { PRIVATE_PLUGIN_SYMBOL } from "./types.js";
+export { HTMLPerspectiveViewerDatagridPluginElement };
+export { HTMLPerspectiveViewerDatagridToolbarElement };