@perspective-dev/viewer-datagrid 4.1.1 → 4.3.0

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

@@ -1,5 +1,5 @@
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, PerspectiveViewerElement, ColumnsConfig } from "../types.js";
+import { type DatagridModel, type PerspectiveViewerElement, type ColumnsConfig } from "../types.js";
 import { CollectedCell, LocalSelectedPositionMap, LocalSelectedRowsMap } from "./types.js";
 /**
  * Apply styles to all body cells in a single pass.

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

@@ -1,5 +1,5 @@
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, PerspectiveViewerElement } from "../types.js";
+import { type DatagridModel, type PerspectiveViewerElement } from "../types.js";
 import { CollectedHeaderRow } from "./types.js";
 /**
  * Apply selected column styling in response to column settings toggle events.

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

@@ -1,12 +1,9 @@
 import { RegularTableElement } from "regular-table";
-import { CellMetadata } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, PerspectiveViewerElement, ColumnsConfig, DatagridPluginElement, SelectedPosition } from "../types.js";
-interface CellMetaExtended extends CellMetadata {
-    _is_hidden_by_aggregate_depth?: boolean;
-}
+import { CellMetadata } from "regular-table/dist/esm/types.js";
 interface CollectedCell {
     element: HTMLElement;
-    metadata: CellMetaExtended;
+    metadata: CellMetadata;
     isHeader: boolean;
 }
 interface CollectedHeaderRow {

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

@@ -1,7 +1,3 @@
 import { CellMetadata } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColumnConfig } from "../../types.js";
-interface CellMetaWithFlags extends CellMetadata {
-    _is_hidden_by_aggregate_depth?: boolean;
-}
-export declare function cell_style_boolean(this: DatagridModel, _plugin: ColumnConfig | undefined, td: HTMLElement, metadata: CellMetaWithFlags): void;
-export {};
+export declare function cell_style_boolean(this: 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 { CellMetadata } from "regular-table/dist/esm/types.js";
+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: CellMetadata, td: HTMLElement, [, , , , , pos_s, pos_e]: ColorRecord, [, , , , , neg_s, neg_e]: ColorRecord, is_settings_open: boolean): void;
+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;

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

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

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

@@ -1,4 +1,4 @@
-import { CellMetadata } from "regular-table/dist/esm/types.js";
+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: CellMetadata): void;
+export declare function cell_style_row_header(this: DatagridModel, regularTable: RegularTableElement, td: HTMLElement, metadata: CellMetadataRowHeader): void;

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

@@ -1,12 +1,9 @@
 import { RegularTableElement } from "regular-table";
-import { CellMetadata } from "regular-table/dist/esm/types.js";
+import { CellMetadata, CellMetadataBody, CellMetadataRowHeader } from "regular-table/dist/esm/types.js";
 import type { SelectedPosition } from "../types.js";
-export interface CellMetaExtended extends CellMetadata {
-    _is_hidden_by_aggregate_depth?: boolean;
-}
 export interface CollectedCell {
     element: HTMLElement;
-    metadata: CellMetaExtended;
+    metadata: CellMetadataRowHeader | CellMetadataBody;
     isHeader: boolean;
 }
 export interface CollectedHeaderRow {

package/dist/esm/types.d.ts

@@ -1,8 +1,8 @@
-import type { View, Table, ViewConfig, ColumnType, SortDir, ViewWindow } from "@perspective-dev/client";
+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";
 export type { RegularTableElement as RegularTable };
-export type { CellMetadata as CellMeta };
+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 ColorRecord = [
     string,
@@ -158,19 +158,14 @@ export type FormatterCache = Map<string, FormatterCacheEntry>;
 export interface CellConfigResult {
     row: Record<string, unknown>;
     column_names: string[];
-    config: Partial<ViewConfig>;
+    config: ViewConfigUpdate;
 }
 export interface PerspectiveClickDetail {
     row: Record<string, unknown>;
     column_names: string[];
     config: Partial<ViewConfig>;
 }
-export interface PerspectiveSelectDetail {
-    selected: boolean;
-    row: Record<string, unknown>;
-    column_names?: string[];
-    config: Partial<ViewConfig>;
-}
+export { PerspectiveSelectDetail } from "@perspective-dev/viewer";
 export interface HandledMouseEvent extends MouseEvent {
     handled?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-datagrid",
-  "version": "4.1.1",
+  "version": "4.3.0",
   "description": "Perspective datagrid plugin based on `regular-table`",
   "unpkg": "dist/cdn/perspective-viewer-datagrid.js",
   "jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",
@@ -32,10 +32,10 @@
     "@perspective-dev/client": "",
     "@perspective-dev/viewer": "",
     "chroma-js": ">=3 <4",
-    "regular-table": "=0.8.0"
+    "regular-table": "=0.8.3"
   },
   "devDependencies": {
-    "@prospective.co/procss": "0.1.17",
+    "@prospective.co/procss": "0.1.18",
     "@perspective-dev/esbuild-plugin": "",
     "@perspective-dev/test": "",
     "@types/chroma-js": "^3.1.2",

package/src/less/regular_table.less

@@ -128,10 +128,20 @@ perspective-viewer {
     border-color: var(--selected-row--background-color, #ea7319) !important;
 }
 
+regular-table.flat-group-rollup-mode.vertical-row-headers
+    th.psp-tree-label:not(:last-of-type) {
+    writing-mode: vertical-lr;
+}
+
 .psp-row-selected.psp-tree-label:not(:hover):before {
     color: white;
 }
 
+regular-table:not(.flat-group-rollup-mode)
+    .psp-row-selected.psp-tree-label:not(:hover):before {
+    color: white;
+}
+
 .psp-row-subselected,
 :hover .psp-row-subselected,
 :hover th.psp-tree-leaf.psp-row-subselected,
@@ -254,29 +264,36 @@ tbody th:empty {
     max-width: 20px;
     pointer-events: none;
 }
-.psp-tree-label {
-    max-width: 0px;
-    min-width: 0px;
-}
-.psp-tree-label:before {
-    color: var(--icon--color);
-    font-family: var(--button--font-family, inherit);
-    padding-right: 11px;
-}
-.psp-tree-label-expand:before {
-    content: var(--tree-label-expand--content, "+");
-}
-.psp-tree-label-collapse:before {
-    content: var(--tree-label-collapse--content, "-");
-}
-.psp-tree-label-expand,
-.psp-tree-label-collapse {
-    cursor: pointer;
-}
 
-.psp-tree-label:hover:before {
-    color: var(--active--color);
-    text-shadow: 0px 0px 5px var(--active--color);
+regular-table:not(.flat-group-rollup-mode) {
+    .psp-tree-label {
+        max-width: 0px;
+        min-width: 0px;
+    }
+
+    .psp-tree-label:before {
+        color: var(--icon--color);
+        font-family: var(--button--font-family, inherit);
+        padding-right: 11px;
+    }
+
+    .psp-tree-label-expand:before {
+        content: var(--tree-label-expand--content, "+");
+    }
+
+    .psp-tree-label-collapse:before {
+        content: var(--tree-label-collapse--content, "-");
+    }
+
+    .psp-tree-label-expand,
+    .psp-tree-label-collapse {
+        cursor: pointer;
+    }
+
+    .psp-tree-label:hover:before {
+        color: var(--active--color);
+        text-shadow: 0px 0px 5px var(--active--color);
+    }
 }
 
 .psp-tree-leaf {

package/src/ts/color_utils.ts

@@ -57,7 +57,6 @@ export function make_color_record(color: string): ColorRecord {
     const chroma_neg = chroma(color);
     const _neg_grad = make_gradient(chroma_neg);
     const rgb = chroma_neg.rgb();
-
     return [
         color,
         rgb[0],

package/src/ts/custom_elements/datagrid.ts

@@ -133,6 +133,10 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return ["Columns"];
     }
 
+    get group_rollups(): string[] {
+        return ["rollup", "flat", "total"];
+    }
+
     /**
      * Give the Datagrid a higher priority so it is loaded
      * over the default charts by default.
@@ -179,6 +183,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
             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) {

package/src/ts/data_listener/format_tree_header.ts

@@ -52,6 +52,22 @@ export function* format_tree_header_row_path(
     }
 }
 
+export function* format_flat_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) {
+        yield path.map((part, i) =>
+            format_cell.call(this, row_headers[i], part, plugins, true),
+        ) as RowHeaderCell[];
+    }
+}
+
 /**
  * Format a single cell of the `group_by` tree header.
  */

package/src/ts/data_listener/index.ts

@@ -13,6 +13,7 @@
 import { PRIVATE_PLUGIN_SYMBOL } from "../types.js";
 import { format_cell } from "./format_cell.js";
 import {
+    format_flat_header_row_path,
     format_tree_header,
     format_tree_header_row_path,
 } from "./format_tree_header.js";
@@ -23,7 +24,7 @@ import type {
     Schema,
 } from "../types.js";
 import type { CellScalar, DataResponse } from "regular-table/dist/esm/types.js";
-import { ViewWindow } from "@perspective-dev/client";
+import { ViewConfig, ViewWindow } from "@perspective-dev/client";
 
 interface ColumnData {
     __ROW_PATH__?: unknown[][];
@@ -191,8 +192,10 @@ export function createDataListener(
             column_paths.push(path);
         }
 
+        const is_dim_call = x1 - x0 > 0 && y1 - y0 > 0;
+
         // Only update the last state if this is not a "phantom" call.
-        if (x1 - x0 > 0 && y1 - y0 > 0) {
+        if (is_dim_call) {
             this.last_column_paths = last_column_paths;
             this.last_meta = last_meta;
             this.last_ids = last_ids;
@@ -207,9 +210,12 @@ export function createDataListener(
         }
 
         const is_row_path = columns.__ROW_PATH__ !== undefined;
+        const is_flat = this._config.group_rollup_mode === "flat";
         const row_headers = Array.from(
             (is_row_path
-                ? format_tree_header_row_path
+                ? is_flat
+                    ? format_flat_header_row_path
+                    : format_tree_header_row_path
                 : format_tree_header
             ).call(
                 this,
@@ -219,7 +225,9 @@ export function createDataListener(
             ),
         ) as (string | HTMLElement)[][];
 
-        const num_row_headers = row_headers[0]?.length;
+        const num_row_headers = !is_dim_call
+            ? row_header_depth(this._config)
+            : row_headers[0]?.length;
 
         const result: DataResponse = {
             num_column_headers:
@@ -240,3 +248,15 @@ export function createDataListener(
         return result;
     };
 }
+
+function row_header_depth(config: ViewConfig) {
+    if (config.group_rollup_mode === "flat") {
+        return config.group_by.length;
+    } else if (config.group_rollup_mode === "total") {
+        return 0;
+    } else if (config.group_by.length === 0) {
+        return 0;
+    } else {
+        return config.group_by.length + 1;
+    }
+}

package/src/ts/event_handlers/click/edit_click.ts

@@ -10,10 +10,12 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type {
-    RegularTable,
-    DatagridModel,
-    PerspectiveViewerElement,
+import { CellMetadataBody } from "regular-table/dist/esm/types.js";
+import {
+    type RegularTable,
+    type DatagridModel,
+    type PerspectiveViewerElement,
+    get_psp_type,
 } from "../../types.js";
 
 export function write_cell(
@@ -21,13 +23,13 @@ export function write_cell(
     model: DatagridModel,
     active_cell: HTMLElement,
 ): boolean {
-    const meta = table.getMeta(active_cell);
+    const meta = table.getMeta(active_cell) as CellMetadataBody;
     if (!meta) {
         return false;
     }
-    const type = model._schema[model._column_paths[meta.x]];
+    const type = model._schema[model._column_paths[meta.x!]];
     let text: string | number | boolean | null = active_cell.textContent || "";
-    const id = model._ids[meta.y - meta.y0][0];
+    const id = model._ids[meta.y! - meta.y0][0];
     if (type === "float" || type === "integer") {
         const parsed = parseFloat(text.replace(/,/g, ""));
         if (isNaN(parsed)) {
@@ -59,13 +61,14 @@ export function clickListener(
     _viewer: PerspectiveViewerElement,
     event: MouseEvent,
 ): void {
-    const meta = table.getMeta(event.target as Element);
-    if (typeof meta?.x !== "undefined") {
+    const meta = table.getMeta(event.target as HTMLElement);
+    if (meta?.type === "body" || meta?.type === "column_header") {
         const is_editable2 = this._is_editable[meta.x];
-        const is_bool = this.get_psp_type(meta) === "boolean";
+        const is_bool = get_psp_type(this, meta) === "boolean";
         const is_null = (event.target as Element).classList.contains(
             "psp-null",
         );
+
         if (is_editable2 && is_bool && !is_null) {
             write_cell(table, this, event.target as HTMLElement);
         }

package/src/ts/event_handlers/dispatch_click.ts

@@ -24,12 +24,10 @@ export async function dispatch_click_listener(
     viewer: PerspectiveViewerElement,
     event: MouseEvent,
 ): Promise<void> {
-    const meta = table.getMeta(event.target as Element);
-    if (!meta) return;
+    const meta = table.getMeta(event.target as HTMLElement);
+    if (!meta || meta.type !== "body") return;
     const { x, y } = meta;
-
     const { row, column_names, config } = await getCellConfig(this, y, x);
-
     viewer.dispatchEvent(
         new CustomEvent<PerspectiveClickDetail>("perspective-click", {
             bubbles: true,

package/src/ts/event_handlers/expand_collapse.ts

@@ -17,12 +17,12 @@ export async function expandCollapseHandler(
     regularTable: RegularTable,
     event: MouseEvent,
 ): Promise<void> {
-    const meta = regularTable.getMeta(event.target as Element);
-    if (!meta?.row_header) return;
-
+    const meta = regularTable.getMeta(event.target as HTMLElement);
+    if (!meta || meta.type !== "row_header") return;
     const is_collapse = (event.target as Element).classList.contains(
         "psp-tree-label-collapse",
     );
+
     if (event.shiftKey && is_collapse) {
         this._view.set_depth(
             (meta.row_header as unknown[]).filter((x) => x !== undefined)
@@ -38,6 +38,7 @@ export async function expandCollapseHandler(
     } else {
         this._view.expand(meta.y);
     }
+
     this._num_rows = await this._view.num_rows();
     this._num_columns = await this._view.num_columns();
     regularTable.draw();

package/src/ts/event_handlers/focus.ts

@@ -52,7 +52,7 @@ export function focusinListener(
 ): void {
     const target = event.target as HTMLElement;
     const meta = table.getMeta(target);
-    if (meta) {
+    if (meta?.type === "body") {
         const new_state: SelectedPosition = {
             x: meta.x,
             y: meta.y,

package/src/ts/event_handlers/header_click.ts

@@ -50,7 +50,7 @@ export async function mousedown_listener(
     if (target.classList.contains("psp-menu-enabled")) {
         const meta = regularTable.getMeta(target);
         const column_name = meta?.column_header?.[this._config.split_by.length];
-        await viewer.toggleColumnSettings(column_name);
+        await viewer.toggleColumnSettings(`${column_name}`);
     } else if (target.classList.contains("psp-sort-enabled")) {
         sortHandler.call(this, regularTable, viewer, event, target);
     }

package/src/ts/event_handlers/keydown/edit_keydown.ts

@@ -76,7 +76,7 @@ const moveSelection = lock(async function (
     dy: number,
 ): Promise<void> {
     const meta = table.getMeta(active_cell);
-    if (!meta) return;
+    if (!meta || meta.type !== "body") return;
     const num_columns = this._column_paths.length;
     const num_rows = this._num_rows;
     const selected_position = selected_position_map.get(table);
@@ -118,7 +118,7 @@ function isLastCell(
     target: HTMLElement,
 ): boolean {
     const meta = table.getMeta(target);
-    return meta !== undefined && meta.y === model._num_rows - 1;
+    return meta?.type === "body" && meta.y === model._num_rows - 1;
 }
 
 export function keydownListener(

package/src/ts/event_handlers/row_select_click.ts

@@ -11,11 +11,11 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import getCellConfig from "../get_cell_config.js";
-import type {
-    RegularTable,
-    DatagridModel,
-    PerspectiveViewerElement,
-    HandledMouseEvent,
+import {
+    type RegularTable,
+    type DatagridModel,
+    type PerspectiveViewerElement,
+    type HandledMouseEvent,
     PerspectiveSelectDetail,
 } from "../types.js";
 
@@ -28,21 +28,22 @@ export async function selectionListener(
     selected_rows_map: SelectedRowsMap,
     event: HandledMouseEvent,
 ): Promise<void> {
-    const meta = regularTable.getMeta(event.target as Element);
+    const meta = regularTable.getMeta(event.target as HTMLElement);
     if (!viewer.hasAttribute("selectable")) return;
     if (event.handled) return;
     if (event.shiftKey) return;
     if (event.button !== 0) {
         return;
     }
+
     event.stopImmediatePropagation();
 
     if (!meta) {
         return;
     }
 
-    const id = this._ids?.[meta.y - meta.y0];
-    if (meta && meta.y >= 0) {
+    if ((meta.type === "body" || meta.type === "row_header") && meta.y >= 0) {
+        const id = this._ids?.[meta.y - meta.y0];
         const selected = selected_rows_map.get(regularTable);
         const key_match =
             !!selected &&
@@ -51,27 +52,31 @@ export async function selectionListener(
         const is_deselect =
             !!selected && id.length === selected.length && key_match;
 
-        let detail: PerspectiveSelectDetail = {
-            selected: !is_deselect,
-            row: {},
-            config: { filter: [] },
-        };
         const { row, column_names, config } = await getCellConfig(
             this,
             meta.y,
-            meta.x,
+            meta.type === "body" ? meta.x : 0,
         );
 
+        let detail: PerspectiveSelectDetail;
         if (is_deselect) {
             selected_rows_map.delete(regularTable);
-            detail = {
-                ...detail,
+            detail = new PerspectiveSelectDetail(
+                false,
                 row,
-                config: { filter: structuredClone(this._config.filter) },
-            };
+                [],
+                [],
+                [{ filter: structuredClone(this._config.filter) }],
+            );
         } else {
             selected_rows_map.set(regularTable, id);
-            detail = { ...detail, row, column_names, config };
+            detail = new PerspectiveSelectDetail(
+                true,
+                row,
+                column_names,
+                [],
+                [config],
+            );
         }
 
         await regularTable.draw({ preserve_width: true });

package/src/ts/event_handlers/select_region.ts

@@ -75,8 +75,12 @@ const getMousedownListener =
                 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) {
+            const meta = table.getMeta(mouseEvent.target as HTMLElement);
+            if (
+                meta?.type === "body" &&
+                meta.x !== undefined &&
+                meta.y !== undefined
+            ) {
                 datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES =
                     {
                         x: meta.x,
@@ -129,8 +133,12 @@ const getMouseoverListener =
                 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 meta = table.getMeta(mouseEvent.target as HTMLElement);
+                if (
+                    meta?.type === "body" &&
+                    meta.x !== undefined &&
+                    meta.y !== undefined
+                ) {
                     const potentialSelection: SelectionArea = {
                         x0: Math.min(
                             meta.x,
@@ -183,7 +191,7 @@ const getMouseupListener =
             datagrid.model!._edit_mode === "SELECT_ROW" ||
             datagrid.model!._edit_mode === "SELECT_COLUMN"
         ) {
-            const meta = table.getMeta(mouseEvent.target as Element);
+            const meta = table.getMeta(mouseEvent.target as HTMLElement);
             if (!meta) return;
 
             if (
@@ -195,6 +203,7 @@ const getMouseupListener =
                 if (
                     selected.x0 === selected.x1 &&
                     selected.y0 === selected.y1 &&
+                    meta?.type === "body" &&
                     selected.x0 === meta.x &&
                     selected.y0 === meta.y
                 ) {
@@ -216,6 +225,7 @@ const getMouseupListener =
                     .CURRENT_MOUSEDOWN_COORDINATES &&
                 datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES
                     .x !== undefined &&
+                meta?.type === "body" &&
                 meta.x !== undefined &&
                 meta.y !== undefined
             ) {
@@ -338,8 +348,8 @@ const applyMouseAreaSelection = (
         const tds = table.querySelectorAll("tbody td");
 
         for (const td of tds) {
-            const meta = table.getMeta(td);
-            if (!meta) continue;
+            const meta = table.getMeta(td as HTMLElement);
+            if (!meta || meta.type !== "body") continue;
             let rendered = false;
             for (const { x0, x1, y0, y1 } of selected) {
                 if (
@@ -372,7 +382,7 @@ const applyMouseAreaSelection = (
         const tds = table.querySelectorAll("tbody td");
 
         for (const td of tds) {
-            const meta = table.getMeta(td);
+            const meta = table.getMeta(td as HTMLElement);
             if (!meta) continue;
             let rendered = false;
             for (const { x0, x1, y0, y1 } of selected) {
@@ -380,7 +390,8 @@ const applyMouseAreaSelection = (
                     x0 !== undefined &&
                     y0 !== undefined &&
                     x1 !== undefined &&
-                    y1 !== undefined
+                    y1 !== undefined &&
+                    meta?.type === "body"
                 ) {
                     if (y0 <= meta.y && meta.y <= y1) {
                         datagrid.model!._selection_state.dirty = true;
@@ -401,7 +412,7 @@ const applyMouseAreaSelection = (
         const tds = table.querySelectorAll("tbody td");
 
         for (const td of tds) {
-            const meta = table.getMeta(td);
+            const meta = table.getMeta(td as HTMLElement);
             if (!meta) continue;
             let rendered = false;
             for (const { x0, x1, y0, y1 } of selected) {
@@ -409,7 +420,8 @@ const applyMouseAreaSelection = (
                     x0 !== undefined &&
                     y0 !== undefined &&
                     x1 !== undefined &&
-                    y1 !== undefined
+                    y1 !== undefined &&
+                    meta?.type === "body"
                 ) {
                     if (x0 <= meta.x && meta.x <= x1) {
                         datagrid.model!._selection_state.dirty = true;