@perspective-dev/viewer-datagrid 4.0.1 → 4.1.0

package/src/ts/custom_elements/datagrid.ts

@@ -0,0 +1,250 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { PRIVATE_PLUGIN_SYMBOL } from "../model/index.js";
+import { activate } from "../plugin/activate.js";
+import { restore } from "../plugin/restore.js";
+import { save } from "../plugin/save.js";
+import { draw } from "../plugin/draw.js";
+import column_style_controls, {
+    ColumnStyleOpts,
+} from "../plugin/column_style_controls.js";
+import datagridStyles from "../../../dist/css/perspective-viewer-datagrid.css";
+import { format_raw } from "../data_listener/format_cell.js";
+
+import type { View, ViewWindow } from "@perspective-dev/client";
+import type { IPerspectiveViewerPlugin } from "@perspective-dev/viewer";
+import type {
+    DatagridModel,
+    DatagridToolbarElement,
+    EditMode,
+    PerspectiveViewerElement,
+    DatagridPluginConfig,
+    ColumnsConfig,
+} from "../types.js";
+import { RegularTableElement } from "regular-table";
+
+type RenderTarget = "shadow" | "light";
+
+/**
+ * The custom element class for this plugin.  The interface methods for this
+ */
+export class HTMLPerspectiveViewerDatagridPluginElement
+    extends HTMLElement
+    implements IPerspectiveViewerPlugin
+{
+    private static _global_stylesheet_installed: boolean = false;
+    private static _sheet: CSSStyleSheet | undefined;
+
+    // Determines whether this datagrid renders in the light DOM. This will
+    // break style encapsulation and may cause inconsistent behavior.
+    static renderTarget: RenderTarget =
+        window.CSS?.supports &&
+        window.CSS?.supports("selector(:host-context(foo))")
+            ? "shadow"
+            : "light";
+
+    regular_table: RegularTableElement;
+    model?: DatagridModel;
+    _toolbar?: DatagridToolbarElement;
+    _edit_button?: HTMLElement;
+    _scroll_lock?: HTMLElement;
+    _is_scroll_lock: boolean;
+    _edit_mode: EditMode;
+    _initialized?: boolean;
+    _reset_scroll_top?: boolean;
+    _reset_scroll_left?: boolean;
+    _reset_select?: boolean;
+    _reset_column_size?: boolean;
+
+    constructor() {
+        super();
+        this.regular_table = document.createElement(
+            "regular-table",
+        ) as RegularTableElement;
+        this.regular_table.part = "regular-table";
+        this._is_scroll_lock = false;
+        this._edit_mode = "READ_ONLY";
+        const Elem = HTMLPerspectiveViewerDatagridPluginElement;
+        if (!Elem._sheet) {
+            Elem._sheet = new CSSStyleSheet();
+            Elem._sheet.replaceSync(datagridStyles);
+        }
+
+        if (Elem.renderTarget === "shadow") {
+            const shadow = this.attachShadow({ mode: "open" });
+            shadow.adoptedStyleSheets.push(Elem._sheet);
+        } else if (
+            Elem.renderTarget === "light" &&
+            !Elem._global_stylesheet_installed
+        ) {
+            Elem._global_stylesheet_installed = true;
+            document.adoptedStyleSheets.push(Elem._sheet);
+        }
+    }
+
+    connectedCallback(): void {
+        if (!this._toolbar) {
+            this._toolbar = document.createElement(
+                "perspective-viewer-datagrid-toolbar",
+            ) as DatagridToolbarElement;
+        }
+
+        const parent = this.parentElement;
+        if (parent) {
+            parent.appendChild(this._toolbar);
+        }
+    }
+
+    disconnectedCallback(): void {
+        this._toolbar?.parentElement?.removeChild?.(this._toolbar);
+    }
+
+    async activate(view: View): Promise<void> {
+        return await activate.call(this, view);
+    }
+
+    get name(): string {
+        return "Datagrid";
+    }
+
+    get category(): string {
+        return "Basic";
+    }
+
+    get select_mode(): string {
+        return "toggle";
+    }
+
+    get min_config_columns(): number | undefined {
+        return undefined;
+    }
+
+    get config_column_names(): string[] {
+        return ["Columns"];
+    }
+
+    /**
+     * Give the Datagrid a higher priority so it is loaded
+     * over the default charts by default.
+     */
+    get priority(): number {
+        return 1;
+    }
+
+    can_render_column_styles(type: string, _group: string): boolean {
+        return type !== "boolean";
+    }
+
+    column_style_controls(type: string, group: string): ColumnStyleOpts {
+        return column_style_controls.call(this, type as any, group);
+    }
+
+    async draw(view: View): Promise<void> {
+        return await draw.call(this, view);
+    }
+
+    async update(view: View): Promise<void> {
+        if (this.model === undefined) {
+            await this.draw(view);
+        } else if (this.model._config.split_by?.length > 0) {
+            const dimensions = await view.dimensions();
+            this.model._num_rows = dimensions.num_view_rows;
+            await this.regular_table.draw();
+        } else {
+            this.model._num_rows = await view.num_rows();
+            await this.regular_table.draw();
+        }
+    }
+
+    async render(viewport?: ViewWindow): Promise<string> {
+        const viewer = this.parentElement as PerspectiveViewerElement;
+        const view = await viewer.getView();
+        const json = await view.to_columns(viewport as any);
+        const cols = await view.column_paths(viewport as any);
+
+        const nrows =
+            viewport?.end_row !== undefined &&
+            viewport?.end_row !== null &&
+            viewport?.start_row !== undefined &&
+            viewport?.start_row !== null
+                ? viewport.end_row - viewport.start_row
+                : await view.num_rows();
+        let out = "";
+        for (let ridx = 0; ridx < nrows; ridx++) {
+            for (const col_name of cols) {
+                const col = (json as Record<string, unknown[]>)[col_name];
+                const type = this.model!._schema[col_name];
+                const pluginConfig = (this.regular_table as any)[
+                    PRIVATE_PLUGIN_SYMBOL
+                ] as ColumnsConfig | undefined;
+                const columnName = col_name.split("|").at(-1)!;
+                const formatter = format_raw(
+                    type,
+                    pluginConfig?.[columnName] || {},
+                );
+
+                if (formatter) {
+                    out += formatter.format(col[ridx]) + "\t";
+                } else {
+                    out += col[ridx] + "\t";
+                }
+            }
+            out += "\n";
+        }
+
+        return out.trim();
+    }
+
+    async resize(): Promise<void> {
+        if (!this.isConnected || this.offsetParent == null) {
+            return;
+        }
+
+        if (this._initialized) {
+            await this.regular_table.draw();
+        }
+    }
+
+    async clear(): Promise<void> {
+        this.regular_table.resetAutoSize();
+        this.regular_table.clear();
+    }
+
+    async save(): Promise<any> {
+        return save.call(this);
+    }
+
+    async restore(
+        token: DatagridPluginConfig,
+        columns_config?: ColumnsConfig,
+    ): Promise<any> {
+        return restore.call(this, token, columns_config ?? {});
+    }
+
+    async restyle(): Promise<void> {
+        // Get view from model if available, otherwise no-op
+        if (this.model?._view) {
+            await this.draw(this.model._view);
+        }
+    }
+
+    async delete(): Promise<void> {
+        this.disconnectedCallback();
+        this._toolbar = undefined;
+        if ((this.regular_table as any).table_model) {
+            this.regular_table.resetAutoSize();
+        }
+
+        this.regular_table.clear();
+    }
+}

package/src/ts/custom_elements/toolbar.ts

@@ -0,0 +1,75 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 TOOLBAR_STYLE from "../../../dist/css/perspective-viewer-datagrid-toolbar.css";
+import { toggle_edit_mode, toggle_scroll_lock } from "../model/toolbar.js";
+import type {
+    DatagridPluginElement,
+    PerspectiveViewerElement,
+} from "../types.js";
+
+const stylesheet = new CSSStyleSheet();
+stylesheet.replaceSync(TOOLBAR_STYLE);
+
+/**
+ * The custom element for this plugin's toolbar, a component which displays in
+ * the host `<perspective-viewer>`'s status bar when this plugin is active.
+ * In the case of Datagrid, this comprises "Editable" and "Scroll Lock" toggle
+ * buttons.
+ */
+export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
+    private _initialized: boolean = false;
+
+    connectedCallback(): void {
+        if (this._initialized) {
+            return;
+        }
+
+        this._initialized = true;
+        this.setAttribute("slot", "statusbar-extra");
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot!.adoptedStyleSheets.push(stylesheet);
+        this.shadowRoot!.innerHTML = `
+            <div id="toolbar">
+                <span class="hover-target">
+                    <span id="scroll_lock" class="button">
+                        <span></span>
+                    </span>
+                </span>
+                <span class="hover-target">
+                    <span id="edit_mode" class="button" data-edit-mode="READ_ONLY">
+                        <span></span>
+                    </span>
+                </span>
+            </div>
+        `;
+
+        const viewer = this.parentElement as PerspectiveViewerElement;
+        const plugin = this.previousElementSibling as DatagridPluginElement;
+
+        plugin._scroll_lock = this.shadowRoot!.querySelector(
+            "#scroll_lock",
+        ) as HTMLElement;
+        plugin._scroll_lock.addEventListener("click", () =>
+            toggle_scroll_lock.call(plugin),
+        );
+
+        plugin._edit_button = this.shadowRoot!.querySelector(
+            "#edit_mode",
+        ) as HTMLElement;
+        plugin._edit_button.addEventListener("click", () => {
+            toggle_edit_mode.call(plugin);
+            plugin.regular_table.draw();
+            viewer.dispatchEvent(new Event("perspective-config-update"));
+        });
+    }
+}

package/src/ts/data_listener/format_cell.ts

@@ -0,0 +1,84 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { FormatterCache, Formatter } from "./formatter_cache.js";
+import type { DatagridModel, ColumnsConfig, ColumnConfig } from "../types.js";
+import { ColumnType } from "@perspective-dev/client";
+
+const FORMAT_CACHE = new FormatterCache();
+const MAX_BAR_WIDTH_PCT = 1;
+
+export function format_raw(
+    type: ColumnType,
+    value: ColumnConfig,
+): Formatter | false | undefined {
+    return FORMAT_CACHE.get(type, value);
+}
+
+/**
+ * Format a single cell's text content as the content of a `<td>` or `<th>`.
+ */
+export function format_cell(
+    this: DatagridModel,
+    title: string,
+    val: unknown,
+    plugins: ColumnsConfig = {},
+    use_table_schema = false,
+): string | HTMLElement | null {
+    if (val === null) {
+        return null;
+    }
+
+    const type: ColumnType = ((use_table_schema && this._table_schema[title]) ||
+        this._schema[title] ||
+        "string") as ColumnType;
+    const plugin: ColumnConfig = plugins[title] || {};
+    const is_numeric = type === "integer" || type === "float";
+
+    if (is_numeric && plugin?.number_fg_mode === "bar") {
+        const a = Math.max(
+            0,
+            Math.min(
+                MAX_BAR_WIDTH_PCT,
+                Math.abs((val as number) / plugin.fg_gradient!) *
+                    MAX_BAR_WIDTH_PCT,
+            ),
+        );
+
+        const div = this._div_factory.get();
+        const anchor = (val as number) >= 0 ? "left" : "right";
+        const pct = (a * 100).toFixed(2);
+        div.setAttribute(
+            "style",
+            `width:calc(${pct}% - 4px);position:absolute;${anchor}:2px;height:80%;top:10%;pointer-events:none;`,
+        );
+
+        return div;
+    } else if (plugin?.format === "link" && type === "string") {
+        const anchor = document.createElement("a");
+        anchor.setAttribute("href", val as string);
+        anchor.setAttribute("target", "_blank");
+        anchor.textContent = val as string;
+        return anchor;
+    } else if (plugin?.format === "bold" && type === "string") {
+        const bold = document.createElement("b");
+        bold.textContent = val as string;
+        return bold;
+    } else if (plugin?.format === "italics" && type === "string") {
+        const italic = document.createElement("i");
+        italic.textContent = val as string;
+        return italic;
+    } else {
+        const formatter = FORMAT_CACHE.get(type, plugin);
+        return formatter ? formatter.format(val) : (val as string);
+    }
+}

package/src/ts/data_listener/format_tree_header.ts

@@ -0,0 +1,82 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { PRIVATE_PLUGIN_SYMBOL } from "../types.js";
+import { format_cell } from "./format_cell.js";
+import type { DatagridModel, RegularTable, ColumnsConfig } from "../types.js";
+
+type RowHeaderCell = string | HTMLElement | { toString(): string };
+
+/**
+ * Format a single cell of the `group_by` tree header for __ROW_PATH__ data.
+ */
+export function* format_tree_header_row_path(
+    this: DatagridModel,
+    paths: unknown[][] = [],
+    row_headers: string[],
+    regularTable: RegularTable,
+): Generator<RowHeaderCell[]> {
+    const plugins: ColumnsConfig =
+        (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
+    for (let path of paths) {
+        const fullPath: unknown[] = ["TOTAL", ...path];
+        const last = fullPath[fullPath.length - 1];
+        let newPath: RowHeaderCell[] = fullPath
+            .slice(0, fullPath.length - 1)
+            .fill("") as string[];
+        const formatted = format_cell.call(
+            this,
+            row_headers[newPath.length - 1],
+            last,
+            plugins,
+            true,
+        );
+
+        if (formatted instanceof HTMLElement) {
+            newPath = newPath.concat(formatted);
+        } else {
+            newPath = newPath.concat({ toString: () => formatted as string });
+        }
+
+        newPath.length = row_headers.length + 1;
+        yield newPath;
+    }
+}
+
+/**
+ * Format a single cell of the `group_by` tree header.
+ */
+export function* format_tree_header(
+    this: DatagridModel,
+    paths: unknown[][] = [],
+    row_headers: string[],
+    regularTable: RegularTable,
+): Generator<unknown[]> {
+    const plugins: ColumnsConfig =
+        (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
+    for (const path of paths) {
+        const new_path: unknown[] = [""];
+        for (const idx in path) {
+            new_path.push(
+                format_cell.call(
+                    this,
+                    row_headers[idx],
+                    path[idx],
+                    plugins,
+                    true,
+                ),
+            );
+        }
+
+        yield path;
+    }
+}

package/src/ts/data_listener/formatter_cache.ts

@@ -0,0 +1,191 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { ColumnType } from "@perspective-dev/client";
+import type { ColumnConfig } from "../types.js";
+
+export interface Formatter {
+    format(val: unknown): string;
+}
+
+class BooleanFormatter implements Formatter {
+    format(val: unknown): string {
+        return val ? "true" : "false";
+    }
+}
+
+// PluginConfig is a subset of ColumnConfig with the formatting properties
+type PluginConfig = Pick<ColumnConfig, "date_format" | "number_format">;
+
+const LEGACY_CONFIG: Record<
+    string,
+    { format: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions }
+> = {
+    float: {
+        format: {
+            style: "decimal",
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        },
+    },
+    datetime: {
+        format: {
+            dateStyle: "short",
+            timeStyle: "medium",
+        } as Intl.DateTimeFormatOptions,
+    },
+    date: {
+        format: {
+            dateStyle: "short",
+        } as Intl.DateTimeFormatOptions,
+    },
+};
+
+export class FormatterCache {
+    private _formatters: Map<string, Formatter | false>;
+
+    constructor() {
+        this._formatters = new Map();
+    }
+
+    private create_datetime_formatter(
+        _type: ColumnType,
+        plugin: PluginConfig,
+    ): Intl.DateTimeFormat {
+        if (plugin.date_format?.format !== "custom") {
+            const options: Intl.DateTimeFormatOptions = {
+                timeZone: plugin.date_format?.timeZone,
+                dateStyle:
+                    plugin.date_format?.dateStyle === "disabled"
+                        ? undefined
+                        : (plugin.date_format?.dateStyle ?? "short"),
+                timeStyle:
+                    plugin.date_format?.timeStyle === "disabled"
+                        ? undefined
+                        : (plugin.date_format?.timeStyle ?? "medium"),
+            };
+
+            return new Intl.DateTimeFormat(
+                navigator.languages as string[],
+                options,
+            );
+        } else {
+            const options: Intl.DateTimeFormatOptions = {
+                timeZone: plugin.date_format?.timeZone,
+                hour12: plugin.date_format?.hour12 ?? true,
+                fractionalSecondDigits:
+                    plugin.date_format?.fractionalSecondDigits,
+            };
+
+            if (plugin.date_format?.year !== "disabled") {
+                options.year = plugin.date_format?.year ?? "2-digit";
+            }
+            if (plugin.date_format?.month !== "disabled") {
+                options.month = plugin.date_format?.month ?? "numeric";
+            }
+            if (plugin.date_format?.day !== "disabled") {
+                options.day = plugin.date_format?.day ?? "numeric";
+            }
+            if (
+                plugin.date_format?.weekday &&
+                plugin.date_format?.weekday !== "disabled"
+            ) {
+                options.weekday = plugin.date_format.weekday;
+            }
+            if (plugin.date_format?.hour !== "disabled") {
+                options.hour = plugin.date_format?.hour ?? "numeric";
+            }
+            if (plugin.date_format?.minute !== "disabled") {
+                options.minute = plugin.date_format?.minute ?? "numeric";
+            }
+            if (plugin.date_format?.second !== "disabled") {
+                options.second = plugin.date_format?.second ?? "numeric";
+            }
+
+            return new Intl.DateTimeFormat(
+                navigator.languages as string[],
+                options,
+            );
+        }
+    }
+
+    private create_date_formatter(
+        _type: ColumnType,
+        plugin: PluginConfig,
+    ): Intl.DateTimeFormat {
+        const options: Intl.DateTimeFormatOptions = {
+            timeZone: "utc",
+            dateStyle:
+                plugin.date_format?.dateStyle === "disabled"
+                    ? undefined
+                    : (plugin.date_format?.dateStyle ?? "short"),
+        };
+
+        return new Intl.DateTimeFormat(
+            navigator.languages as string[],
+            options,
+        );
+    }
+
+    private create_number_formatter(
+        type: ColumnType,
+        plugin: PluginConfig,
+    ): Intl.NumberFormat {
+        const format =
+            plugin.number_format ??
+            (LEGACY_CONFIG[type]?.format as Intl.NumberFormatOptions);
+        return new Intl.NumberFormat(navigator.languages as string[], format);
+    }
+
+    private create_boolean_formatter(
+        _type: ColumnType,
+        _plugin: PluginConfig,
+    ): Formatter {
+        return new BooleanFormatter();
+    }
+
+    get(type: ColumnType, plugin: PluginConfig): Formatter | false | undefined {
+        const formatter_key = [
+            type,
+            ...Object.values(plugin.date_format ?? {}),
+            ...Object.values(plugin.number_format ?? {}),
+        ].join("-");
+
+        if (!this._formatters.has(formatter_key)) {
+            if (type === "date") {
+                this._formatters.set(
+                    formatter_key,
+                    this.create_date_formatter(type, plugin),
+                );
+            } else if (type === "datetime") {
+                this._formatters.set(
+                    formatter_key,
+                    this.create_datetime_formatter(type, plugin),
+                );
+            } else if (type === "integer" || type === "float") {
+                this._formatters.set(
+                    formatter_key,
+                    this.create_number_formatter(type, plugin),
+                );
+            } else if (type === "boolean") {
+                this._formatters.set(
+                    formatter_key,
+                    this.create_boolean_formatter(type, plugin),
+                );
+            } else {
+                this._formatters.set(formatter_key, false);
+            }
+        }
+
+        return this._formatters.get(formatter_key);
+    }
+}