@perspective-dev/viewer-datagrid 4.3.0 → 4.4.1

package/dist/esm/plugin/activate.d.ts

@@ -1,5 +1,5 @@
 import type { View } from "@perspective-dev/client";
-import type { DatagridPluginElement } from "../types.js";
+import { type DatagridPluginElement } from "../types.js";
 /**
  * Lazy initialize this plugin with various listeners.
  */

package/dist/esm/plugin/column_style_controls.d.ts

@@ -1,4 +1,4 @@
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
 import type { DatagridPluginElement } from "../types.js";
 interface NumberStyleOpts {
     datagrid_number_style: {

package/dist/esm/style_handlers/body.d.ts

@@ -1,7 +1,7 @@
 import { RegularTableElement } from "regular-table";
-import { type DatagridModel, type PerspectiveViewerElement, type ColumnsConfig } from "../types.js";
-import { CollectedCell, LocalSelectedPositionMap, LocalSelectedRowsMap } from "./types.js";
+import { type DatagridModel, type ColumnsConfig } from "../types.js";
+import { CollectedCell } from "./types.js";
 /**
  * Apply styles to all body cells in a single pass.
  */
-export declare function applyBodyCellStyles(this: DatagridModel, cells: CollectedCell[], plugins: ColumnsConfig, isSettingsOpen: boolean, isSelectable: boolean, isEditable: boolean, regularTable: RegularTableElement, selectedRowsMap: LocalSelectedRowsMap, selectedPositionMap: LocalSelectedPositionMap, viewer: PerspectiveViewerElement): void;
+export declare function applyBodyCellStyles(model: DatagridModel, cells: CollectedCell[], plugins: ColumnsConfig, isSettingsOpen: boolean, isSelectable: boolean, isEditable: boolean, regularTable: RegularTableElement): void;

package/dist/esm/style_handlers/column_header.d.ts

@@ -1,13 +1,14 @@
 import { RegularTableElement } from "regular-table";
-import { type DatagridModel, type PerspectiveViewerElement } from "../types.js";
+import { type DatagridModel } from "../types.js";
 import { CollectedHeaderRow } from "./types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 /**
  * Apply selected column styling in response to column settings toggle events.
  * This is called directly (not as a style listener) when the user opens/closes
  * the column settings panel.
  */
-export declare function style_selected_column(this: DatagridModel, regularTable: RegularTableElement, viewer: PerspectiveViewerElement, selectedColumn: string | undefined): void;
+export declare function style_selected_column(model: DatagridModel, regularTable: RegularTableElement, viewer: HTMLPerspectiveViewerElement, selectedColumn: string | undefined): void;
 /**
  * Style a single column header row.
  */
-export declare function styleColumnHeaderRow(this: DatagridModel, headerRow: CollectedHeaderRow, regularTable: RegularTableElement, is_menu_row: boolean): void;
+export declare function styleColumnHeaderRow(model: DatagridModel, headerRow: CollectedHeaderRow, regularTable: RegularTableElement, is_menu_row: boolean): void;

package/dist/esm/style_handlers/consolidated.d.ts

@@ -1,54 +1,10 @@
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, PerspectiveViewerElement, ColumnsConfig, DatagridPluginElement, SelectedPosition } from "../types.js";
-import { CellMetadata } from "regular-table/dist/esm/types.js";
-interface CollectedCell {
-    element: HTMLElement;
-    metadata: CellMetadata;
-    isHeader: boolean;
-}
-interface CollectedHeaderRow {
-    row: HTMLTableRowElement;
-    cells: Array<{
-        element: HTMLTableCellElement;
-        metadata: CellMetadata | undefined;
-    }>;
-}
-/**
- * Context object passed through consolidated styling
- */
-export interface StyleContext {
-    model: DatagridModel;
-    regularTable: RegularTableElement;
-    viewer: PerspectiveViewerElement;
-    datagrid: DatagridPluginElement;
-    plugins: ColumnsConfig;
-    isSettingsOpen: boolean;
-    isSelectable: boolean;
-    isEditable: boolean;
-    selectedRowsMap: Map<RegularTableElement, unknown[]>;
-    selectedPositionMap: Map<RegularTableElement, SelectedPosition>;
-}
-type LocalSelectedRowsMap = WeakMap<RegularTableElement, unknown[]>;
-type LocalSelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;
+import type { DatagridModel, DatagridPluginElement, SelectedPositionMap } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 /**
  * Consolidated style listener that handles all cell styling in a single pass.
  * This eliminates redundant DOM traversals and reduces layout thrashing by:
  * 1. Collecting all cell metadata in a read phase
  * 2. Applying all styles in a write phase
  */
-export declare function createConsolidatedStyleListener(datagrid: DatagridPluginElement, selectedRowsMap: LocalSelectedRowsMap, selectedPositionMap: LocalSelectedPositionMap): (this: DatagridModel, regularTable: RegularTableElement, viewer: PerspectiveViewerElement) => void;
-declare module "../types.js" {
-    interface DatagridModel {
-        _applyBodyCellStyles(cells: CollectedCell[], plugins: ColumnsConfig, isSettingsOpen: boolean, isSelectable: boolean, isEditable: boolean, regularTable: RegularTableElement, selectedRowsMap: LocalSelectedRowsMap, selectedPositionMap: LocalSelectedPositionMap, viewer: PerspectiveViewerElement): void;
-        _applyGroupHeaderStyles(headerRows: CollectedHeaderRow[], regularTable: RegularTableElement): void;
-        _applyColumnHeaderStyles(headerRows: CollectedHeaderRow[], regularTable: RegularTableElement, viewer: PerspectiveViewerElement): void;
-        _applyFocusStyle(cells: CollectedCell[], regularTable: RegularTableElement, selectedPositionMap: LocalSelectedPositionMap): void;
-        _styleColumnHeaderRow(headerRow: CollectedHeaderRow, regularTable: RegularTableElement, is_menu_row: boolean): void;
-    }
-}
-/**
- * Install the styling methods on the DatagridModel prototype.
- * This should be called once during module initialization.
- */
-export declare function installConsolidatedStyleMethods(modelPrototype: any): void;
-export {};
+export declare function createConsolidatedStyleListener(datagrid: DatagridPluginElement, model: DatagridModel, regularTable: RegularTableElement, viewer: HTMLPerspectiveViewerElement, selectedPositionMap: SelectedPositionMap): () => void;

package/dist/esm/style_handlers/editable.d.ts

@@ -1,7 +1,8 @@
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, PerspectiveViewerElement } from "../types.js";
+import type { DatagridModel } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 import { CollectedHeaderRow } from "./types.js";
 /**
  * Apply styles to column header rows.
  */
-export declare function applyColumnHeaderStyles(this: DatagridModel, headerRows: CollectedHeaderRow[], regularTable: RegularTableElement, viewer: PerspectiveViewerElement): void;
+export declare function applyColumnHeaderStyles(model: DatagridModel, headerRows: CollectedHeaderRow[], regularTable: RegularTableElement, viewer: HTMLPerspectiveViewerElement): void;

package/dist/esm/style_handlers/focus.d.ts

@@ -1,11 +1,11 @@
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, SelectedPosition } from "../types.js";
-import { CollectedCell, LocalSelectedPositionMap } from "./types.js";
+import type { DatagridModel, SelectedPositionMap } from "../types.js";
+import { CollectedCell } from "./types.js";
 /**
  * Apply focus style to the selected cell.
  * Optimized to use collected cells instead of querySelectorAll.
  */
-export declare function applyFocusStyle(this: DatagridModel, cells: CollectedCell[], regularTable: RegularTableElement, selectedPositionMap: LocalSelectedPositionMap): void;
+export declare function applyFocusStyle(_model: DatagridModel, cells: CollectedCell[], regularTable: RegularTableElement, selectedPositionMap: SelectedPositionMap): void;
 /**
  * Standalone function to focus the selected cell.
  * This collects cells from the table and tries to focus the selected position.
@@ -13,4 +13,4 @@ export declare function applyFocusStyle(this: DatagridModel, cells: CollectedCel
  *
  * Used by edit_keydown.ts for keyboard navigation.
  */
-export declare function focusSelectedCell(regularTable: RegularTableElement, selectedPositionMap: Map<RegularTableElement, SelectedPosition>): boolean;
+export declare function focusSelectedCell(regularTable: RegularTableElement, selectedPositionMap: SelectedPositionMap): boolean;

package/dist/esm/style_handlers/group_header.d.ts

@@ -4,4 +4,4 @@ import { CollectedHeaderRow } from "./types.js";
 /**
  * Apply styles to group header rows.
  */
-export declare function applyGroupHeaderStyles(this: DatagridModel, headerRows: CollectedHeaderRow[], regularTable: RegularTableElement): void;
+export declare function applyGroupHeaderStyles(model: DatagridModel, headerRows: CollectedHeaderRow[], regularTable: RegularTableElement): void;

package/dist/esm/style_handlers/table_cell/boolean.d.ts

@@ -1,3 +1,3 @@
 import { CellMetadata } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColumnConfig } from "../../types.js";
-export declare function cell_style_boolean(this: DatagridModel, _plugin: ColumnConfig | undefined, td: HTMLElement, metadata: CellMetadata): void;
+export declare function cell_style_boolean(model: DatagridModel, _plugin: ColumnConfig | undefined, td: HTMLElement, metadata: CellMetadata): void;

package/dist/esm/style_handlers/table_cell/cell_flash.d.ts

@@ -1,3 +1,3 @@
 import { CellMetadataBody } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColorRecord } from "../../types.js";
-export declare function style_cell_flash(this: DatagridModel, metadata: CellMetadataBody, td: HTMLElement, [, , , , , pos_s, pos_e]: ColorRecord, [, , , , , neg_s, neg_e]: ColorRecord, is_settings_open: boolean): void;
+export declare function style_cell_flash(model: DatagridModel, metadata: CellMetadataBody, td: HTMLElement, [, , , , , pos_s, pos_e]: ColorRecord, [, , , , , neg_s, neg_e]: ColorRecord, is_settings_open: boolean): void;

package/dist/esm/style_handlers/table_cell/datetime.d.ts

@@ -1,3 +1,7 @@
 import { CellMetadata } from "regular-table/dist/esm/types.js";
-import type { DatagridModel, ColumnConfig } from "../../types.js";
-export declare function cell_style_datetime(this: DatagridModel, plugin: ColumnConfig, td: HTMLElement, metadata: CellMetadata): void;
+import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
+interface PluginWithColor extends Omit<ColumnConfig, "color"> {
+    color?: ColorRecord;
+}
+export declare function cell_style_datetime(model: DatagridModel, plugin: PluginWithColor, td: HTMLElement, metadata: CellMetadata): void;
+export {};

package/dist/esm/style_handlers/table_cell/numeric.d.ts

@@ -11,5 +11,5 @@ interface PluginWithColors extends Omit<ColumnConfig, "pos_fg_color" | "neg_fg_c
     pos_fg_color?: ColorRecord;
     neg_fg_color?: ColorRecord;
 }
-export declare function cell_style_numeric(this: DatagridModel, plugin: PluginWithColors | undefined, td: HTMLElement, metadata: CellMetaWithExtras, is_settings_open: boolean): void;
+export declare function cell_style_numeric(model: DatagridModel, plugin: PluginWithColors | undefined, td: HTMLElement, metadata: CellMetaWithExtras, is_settings_open: boolean): void;
 export {};

package/dist/esm/style_handlers/table_cell/row_header.d.ts

@@ -1,4 +1,4 @@
 import { CellMetadataRowHeader } from "regular-table/dist/esm/types.js";
 import type { DatagridModel } from "../../types.js";
 import { RegularTableElement } from "regular-table";
-export declare function cell_style_row_header(this: DatagridModel, regularTable: RegularTableElement, td: HTMLElement, metadata: CellMetadataRowHeader): void;
+export declare function cell_style_row_header(model: DatagridModel, regularTable: RegularTableElement, td: HTMLElement, metadata: CellMetadataRowHeader): void;

package/dist/esm/style_handlers/table_cell/string.d.ts

@@ -7,5 +7,5 @@ interface CellMetaWithExtras {
 interface PluginWithColor extends Omit<ColumnConfig, "color"> {
     color?: ColorRecord;
 }
-export declare function cell_style_string(this: DatagridModel, plugin: PluginWithColor | undefined, td: HTMLElement, metadata: CellMetaWithExtras): void;
+export declare function cell_style_string(model: DatagridModel, plugin: PluginWithColor | undefined, td: HTMLElement, metadata: CellMetaWithExtras): void;
 export {};

package/dist/esm/style_handlers/types.d.ts

@@ -1,6 +1,4 @@
-import { RegularTableElement } from "regular-table";
 import { CellMetadata, CellMetadataBody, CellMetadataRowHeader } from "regular-table/dist/esm/types.js";
-import type { SelectedPosition } from "../types.js";
 export interface CollectedCell {
     element: HTMLElement;
     metadata: CellMetadataRowHeader | CellMetadataBody;
@@ -13,5 +11,3 @@ export interface CollectedHeaderRow {
         metadata: CellMetadata | undefined;
     }>;
 }
-export type LocalSelectedRowsMap = WeakMap<RegularTableElement, unknown[]>;
-export type LocalSelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;

package/dist/esm/types.d.ts

@@ -1,9 +1,10 @@
 import type { View, Table, ViewConfig, ColumnType, SortDir, ViewWindow, ViewConfigUpdate } from "@perspective-dev/client";
-import { RegularTableElement } from "regular-table";
-import { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
+import type { HTMLPerspectiveViewerElement, ViewerConfig } from "@perspective-dev/viewer";
+import type { RegularTableElement } from "regular-table";
+import type { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
 export type { RegularTableElement as RegularTable };
 export declare function get_psp_type(model: DatagridModel, metadata: CellMetadata): ColumnType;
-export type EditMode = "READ_ONLY" | "EDIT" | "SELECT_COLUMN" | "SELECT_ROW" | "SELECT_REGION";
+export type EditMode = "READ_ONLY" | "EDIT" | "SELECT_COLUMN" | "SELECT_ROW" | "SELECT_REGION" | "SELECT_ROW_TREE";
 export type ColorRecord = [
     string,
     number,
@@ -100,10 +101,11 @@ export interface DatagridModel {
     _view: View;
     _table: Table;
     _table_schema: Schema;
-    _config: ViewConfig;
+    _config: ViewerConfig;
     _num_rows: number;
     _num_columns?: number;
     _schema: Schema;
+    _theme: string;
     _ids: unknown[][];
     _plugin_background: number[];
     _color: ColorRecord;
@@ -115,6 +117,8 @@ export interface DatagridModel {
     _column_types: ColumnType[];
     _is_editable: boolean[];
     _edit_mode: EditMode;
+    _tree_selection_id?: unknown[];
+    _last_insert_configs?: ViewConfigUpdate[];
     _selection_state: SelectionState;
     _row_header_types: ColumnType[];
     _series_color_map: Map<string, Map<string, number>>;
@@ -135,17 +139,6 @@ export interface DatagridModel {
 export declare const PRIVATE_PLUGIN_SYMBOL: unique symbol;
 export type DataListener = (regularTable: RegularTableElement, x0: number, y0: number, x1: number, y1: number) => Promise<DataResponse>;
 export type StyleListener = () => void;
-export interface PerspectiveViewerElement extends HTMLElement {
-    getView(): Promise<View>;
-    getTable(): Promise<Table>;
-    getEditPort(): Promise<number>;
-    restore(config: Partial<ViewConfig>): Promise<void>;
-    toggleColumnSettings(columnName?: string): Promise<void>;
-    hasAttribute(name: string): boolean;
-    setSelection(viewport?: ViewWindow): void;
-    dispatchEvent(event: Event): boolean;
-    children: HTMLCollectionOf<HTMLElement>;
-}
 export interface DatagridToolbarElement extends HTMLElement {
     setEditButton(button: HTMLElement): void;
     setScrollLockButton(button: HTMLElement): void;
@@ -165,7 +158,7 @@ export interface PerspectiveClickDetail {
     column_names: string[];
     config: Partial<ViewConfig>;
 }
-export { PerspectiveSelectDetail } from "@perspective-dev/viewer";
+export { PerspectiveSelectDetail } from "@perspective-dev/viewer/src/ts/extensions.js";
 export interface HandledMouseEvent extends MouseEvent {
     handled?: boolean;
 }
@@ -184,5 +177,5 @@ export interface DatagridPluginElement extends HTMLElement {
     _reset_select?: boolean;
     _reset_column_size?: boolean;
 }
-export type SelectedRowsMap = WeakMap<RegularTableElement, Set<number>>;
 export type SelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;
+export declare function isEditableMode(model: DatagridModel, viewer: HTMLPerspectiveViewerElement, allowed?: boolean): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-datagrid",
-  "version": "4.3.0",
+  "version": "4.4.1",
   "description": "Perspective datagrid plugin based on `regular-table`",
   "unpkg": "dist/cdn/perspective-viewer-datagrid.js",
   "jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",
@@ -31,14 +31,12 @@
   "dependencies": {
     "@perspective-dev/client": "",
     "@perspective-dev/viewer": "",
-    "chroma-js": ">=3 <4",
-    "regular-table": "=0.8.3"
+    "regular-table": "=0.8.4"
   },
   "devDependencies": {
-    "@prospective.co/procss": "0.1.18",
+    "lightningcss": "^1.29.0",
     "@perspective-dev/esbuild-plugin": "",
     "@perspective-dev/test": "",
-    "@types/chroma-js": "^3.1.2",
     "prettier": ">=3 <4",
     "typescript": ">=5 <6",
     "zx": ">=8 <9"

package/src/css/mitered-headers.css

@@ -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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+.psp-header-border:not(.psp-is-top):not(.psp-header-leaf) {
+    /* right */
+    box-shadow: 1px 0px var(--psp-inactive--border-color, #8b868045);
+}
+
+.psp-header-group {
+    /* bottom */
+    box-shadow: 0px 10px 0 -9px var(--psp-inactive--border-color, #8b868045);
+}
+
+.psp-is-top {
+    /* top-miter-right */
+    box-shadow: 5px 4px 0px -4px var(--psp-inactive--border-color, #8b868045);
+}
+
+.psp-is-top.psp-header-group:not(.psp-header-group-corner) {
+    /* top-miter-right and bottom */
+    box-shadow:
+        5px 4px 0px -4px var(--psp-inactive--border-color, #8b868045),
+        0px 10px 0 -9px var(--psp-inactive--border-color, #8b868045);
+}
+
+.psp-header-border.psp-header-group {
+    &:not(.psp-is-top):not(.psp-header-group-corner) {
+        /* right and bottom */
+        box-shadow:
+            1px 0px var(--psp-inactive--border-color, #8b868045),
+            0px 10px 0 -9px var(--psp-inactive--border-color, #8b868045);
+    }
+}
+
+perspective-viewer[settings]
+    tr.rt-autosize
+    .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
+    box-shadow: 1px 0px var(--psp-inactive--border-color, #8b868045);
+}
+
+:host-context(perspective-viewer[settings])
+    tr.rt-autosize
+    .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
+    box-shadow: 1px 0px var(--psp-inactive--border-color, #8b868045);
+}
+
+.psp-header-leaf.psp-header-border {
+    /* bottom-miter-right */
+    box-shadow: 5px -4px 0px -4px var(--psp-inactive--border-color, #8b868045);
+}
+
+tr:only-child th {
+    box-shadow: none !important;
+}

package/src/css/perspective-viewer-datagrid.css

@@ -0,0 +1,6 @@
+@import "./pro.css";
+@import "./mitered-headers.css";
+@import "./row-hover.css";
+@import "./sub-cell-scroll.css";
+@import "./scrollbar.css";
+@import "./regular_table.css";

package/src/{less/pro.less → css/pro.css}

@@ -1,22 +1,21 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@row-height: 19px;
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 regular-table {
     padding: 0;
     margin: 12px 0 0 12px;
     font-family: inherit;
-    --rt-hover--border-color: var(--inactive--color, #c5c9d080);
+    --psp-datagrid--hover--border-color: var(--psp-inactive--color, #c5c9d080);
 
     div[tabindex] {
         outline: none;
@@ -35,7 +34,7 @@ regular-table {
         text-align: center;
     }
 
-    // Header groups should overflow and not contribute to auto-sizing.
+    /* Header groups should overflow and not contribute to auto-sizing. */
     thead tr:not(.rt-autosize) th {
         overflow: hidden;
         max-width: 0px;
@@ -70,7 +69,7 @@ regular-table {
         text-align: left;
     }
 
-    // frozen rows
+    /* frozen rows */
 
     thead tr:last-child th {
         border-bottom: 1px solid #8b868045;
@@ -95,12 +94,11 @@ regular-table {
     td,
     th {
         white-space: nowrap;
-        font-size: 12px;
         padding-right: 5px;
         padding-left: 5px;
         padding-top: 0px;
         padding-bottom: 0px;
-        height: @row-height;
+        height: var(--psp-datagrid--row--height, 19px);
     }
 
     table * {
@@ -116,7 +114,7 @@ regular-table {
     span.rt-row-header-icon {
         color: #aaa;
         padding-right: 4px;
-        font-family: var(--button--font-family);
+        font-family: var(--psp-button--font-family);
     }
 
     span.rt-column-header-icon {
@@ -124,7 +122,7 @@ regular-table {
         padding-left: 3px;
         display: inline-block;
         width: 10px;
-        font-family: var(--button--font-family);
+        font-family: var(--psp-button--font-family);
     }
 
     span.rt-row-header-icon:hover {
@@ -141,17 +139,17 @@ regular-table {
         text-overflow: ellipsis;
     }
 
-    // OPTIONAL zebra striping
+    /* OPTIONAL zebra striping */
 
-    // @zebra-stripe-color: rgb(238,238,238);
+    /* @zebra-stripe-color: rgb(238,238,238); */
 
-    // tbody tr:nth-child(even) td:not(.rt-group-header) {
-    //     background: @zebra-stripe-color;
-    // }
+    /* tbody tr:nth-child(even) td:not(.rt-group-header) { */
+    /*     background: @zebra-stripe-color; */
+    /* } */
 
-    // tbody tr:nth-child(even) span.rt-group-name {
-    //     background: @zebra-stripe-color;
-    // }
+    /* tbody tr:nth-child(even) span.rt-group-name { */
+    /*     background: @zebra-stripe-color; */
+    /* } */
 
     td span.rt-group-name,
     th span.rt-group-name {
@@ -182,15 +180,18 @@ regular-table {
     }
 
     a {
-        color: var(--rt-pos-cell--color);
+        color: var(--psp-datagrid--pos-cell--color);
     }
 
     a:visited {
-        color: var(--active--color);
+        color: var(--psp-active--color);
     }
 
     td.psp-null:after,
     th.psp-null:after {
-        content: var(--null--content, "-");
+        content: var(--psp-label--null--content, "-");
+        color: var(--psp-label--null--color, inherit);
+        font-size: var(--psp-label--null--font-size, inherit);
+        vertical-align: middle;
     }
 }