@perspective-dev/viewer-datagrid 4.2.0 → 4.4.0

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

@@ -1,20 +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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-// Scrollbar styling
+/* Scrollbar styling */
 regular-table {
     outline: none;
 
-    // webkit (chrome, safari, etc) scrollbar styling
+    /* webkit (chrome, safari, etc) scrollbar styling */
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-corner {
         background-color: transparent;
@@ -24,8 +25,8 @@ regular-table {
 
     &::-webkit-scrollbar-thumb {
         background-clip: content-box;
-        background: var(--icon--color);
-        border: 5.5px solid var(--plugin--background);
+        background: var(--psp--color);
+        border: 5.5px solid var(--psp--background-color);
         max-height: 50%;
         max-width: 50%;
         min-width: 10%;

package/src/{less/sub-cell-scroll.less → css/sub-cell-scroll.css}

@@ -1,17 +1,18 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-// Handles sub-cell scrolling via CSS transform offset by variables set during
-// rendering.
+/* Handles sub-cell scrolling via CSS transform offset by variables set during */
+/* rendering. */
 perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table,
 :host(:not(.sub-cell-scroll-disabled)) regular-table table {
     tbody td,

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

@@ -1,14 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     position: relative;
@@ -42,9 +43,9 @@
 
     &:hover {
         box-shadow:
-            -4px 0 0 var(--icon--color),
-            4px 0 0 var(--icon--color);
-        background-color: var(--icon--color);
+            -4px 0 0 var(--psp--color),
+            4px 0 0 var(--psp--color);
+        background-color: var(--psp--color);
     }
 }
 
@@ -54,11 +55,11 @@
 }
 
 #scroll_lock.lock-scroll:before {
-    -webkit-mask-image: var(--toolbar-scroll-lock-active--content);
+    -webkit-mask-image: var(--psp-toolbar-scroll-lock-active--content);
 }
 
 #scroll_lock:before {
-    -webkit-mask-image: var(--toolbar-scroll-lock--content);
+    -webkit-mask-image: var(--psp-toolbar-scroll-lock--content);
 }
 
 #select_mode:before {
@@ -70,69 +71,75 @@
 }
 
 #edit_mode[data-edit-mode="READ_ONLY"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--read-only--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content);
 }
 
 #edit_mode[data-edit-mode="EDIT"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--edit--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-edit--content);
 }
 
 :host(.aggregated) #toolbar #edit_mode[data-edit-mode="EDIT"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--read-only--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-read-only--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_ROW"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-row--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_COLUMN"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-column--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-column--content);
 }
 
 #edit_mode[data-edit-mode="SELECT_REGION"]:before {
-    -webkit-mask-image: var(--toolbar-edit-mode--select-region--content);
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-region--content);
 }
 
-// #edit_mode span:before {
-//     content: var(--edit-mode-toggle--content, "N/A");
-// }
+/* #edit_mode span:before { */
+/*     content: var(--edit-mode-toggle--content, "N/A"); */
+/* } */
 
 #edit_mode[data-edit-mode="READ_ONLY"] span:before {
-    content: var(--edit-mode--read-only--content, "Read Only");
+    content: var(--psp-label--edit-mode-read-only--content, "Read Only");
 }
 
 #edit_mode[data-edit-mode="EDIT"] span:before {
-    content: var(--edit-mode--edit--content, "Editable");
+    content: var(--psp-label--edit-mode-edit--content, "Editable");
 }
 
 #edit_mode[data-edit-mode="SELECT_ROW"] span:before {
-    content: var(--edit-mode--select-row--content, "Row Select");
+    content: var(--psp-label--edit-mode-select-row--content, "Row Select");
 }
 
 #edit_mode[data-edit-mode="SELECT_COLUMN"] span:before {
-    content: var(--edit-mode--select-column--content, "Column Select");
+    content: var(
+        --psp-label--edit-mode-select-column--content,
+        "Column Select"
+    );
 }
 
 #edit_mode[data-edit-mode="SELECT_REGION"] span:before {
-    content: var(--edit-mode--select-region--content, "Region Select");
+    content: var(
+        --psp-label--edit-mode-select-region--content,
+        "Region Select"
+    );
 }
 
 #scroll_lock span:before {
-    content: var(--scroll-lock-toggle--content, "Free Scroll");
+    content: var(--psp-label--scroll-lock-toggle--content, "Free Scroll");
 }
 
 #scroll_lock.lock-scroll span:before {
-    content: var(--scroll-lock-alt-toggle--content, "Align Scroll");
+    content: var(--psp-label--scroll-lock-alt-toggle--content, "Align Scroll");
 }
 
-// The icon.
+/* The icon. */
 .button:before {
     width: 21px;
     height: 21px;
     content: "";
     -webkit-mask-size: cover;
     mask-size: cover;
-    background-color: var(--icon--color);
+    background-color: var(--psp--color);
 }
 
 .button.editable:before,
@@ -167,8 +174,8 @@
 .hover-target:focus-within .button,
 .hover-target:hover .button {
     position: relative;
-    background-color: var(--icon--color);
-    color: var(--plugin--background);
+    background-color: var(--psp--color);
+    color: var(--psp--background-color);
     opacity: 1;
     display: flex;
     align-items: center;
@@ -177,10 +184,10 @@
 
 .hover-target:focus-within .button:before,
 .hover-target:hover .button:before {
-    background-color: var(--plugin--background);
+    background-color: var(--psp--background-color);
 }
 
-// The label.
+/* The label. */
 .hover-target:focus-within .button > span,
 .hover-target:hover .button > span {
     display: block;
@@ -194,7 +201,7 @@
     white-space: pre-wrap;
     line-height: 1;
     font-size: 9px;
-    background-color: var(--icon--color);
+    background-color: var(--psp--color);
     width: 35px;
     text-align: center;
     border-radius: 0 0 3px 3px;

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/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";
 
@@ -52,28 +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.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/sort.ts

@@ -28,13 +28,13 @@ const ROW_SORT_ORDER: SortRotationOrder = {
 
 const ROW_COL_SORT_ORDER: SortRotationOrder = {
     desc: "asc",
-    asc: "col desc",
+    asc: undefined,
     "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,
+    "asc abs": undefined,
+    // "col desc": "col asc",
+    // "col asc": undefined,
+    // "col desc abs": "col asc abs",
+    // "col asc abs": undefined,
 };
 
 export async function sortHandler(
@@ -49,7 +49,7 @@ export async function sortHandler(
     const column_name = meta.column_header[this._config.split_by.length];
     const sort_method =
         event.ctrlKey ||
-        (event as MouseEvent & { metaKet?: boolean }).metaKet ||
+        (event as MouseEvent & { metaKey?: boolean }).metaKey ||
         event.altKey
             ? append_sort
             : override_sort;
@@ -97,6 +97,7 @@ export function override_sort(
             return sort ? [sort] : [];
         }
     }
+
     return [[column_name, abs ? "desc abs" : "desc"]];
 }
 
@@ -111,8 +112,10 @@ export function create_sort(
     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/model/create.ts

@@ -87,21 +87,21 @@ export async function createModel(
         }
 
         let split_by_changed = old.split_by.length !== config.split_by.length;
-        if (split_by_changed) {
+        if (!split_by_changed) {
             for (const lvl in old.split_by) {
                 split_by_changed ||= config.split_by[lvl] !== old.split_by[lvl];
             }
         }
 
         let columns_changed = old.columns.length !== config.columns.length;
-        if (columns_changed) {
+        if (!columns_changed) {
             for (const lvl in old.columns) {
                 columns_changed ||= config.columns[lvl] !== old.columns[lvl];
             }
         }
 
         let filter_changed = old.filter.length !== config.filter.length;
-        if (filter_changed) {
+        if (!filter_changed) {
             for (const lvl in old.filter) {
                 for (const i in config.filter[lvl]) {
                     filter_changed ||=
@@ -112,7 +112,7 @@ export async function createModel(
         }
 
         let sort_changed = old.sort.length !== config.sort.length;
-        if (sort_changed) {
+        if (!sort_changed) {
             for (const lvl in old.sort) {
                 for (const i in config.sort[lvl]) {
                     sort_changed ||=
@@ -122,6 +122,9 @@ export async function createModel(
             }
         }
 
+        const group_rollup_mode_changed =
+            old.group_rollup_mode !== config.group_rollup_mode;
+
         this._reset_scroll_top = group_by_changed;
         this._reset_scroll_left = split_by_changed;
         this._reset_select =
@@ -132,6 +135,7 @@ export async function createModel(
             columns_changed;
 
         this._reset_column_size =
+            group_rollup_mode_changed ||
             split_by_changed ||
             group_by_changed ||
             columns_changed ||
@@ -148,15 +152,15 @@ export async function createModel(
         ]);
 
     const _plugin_background = chroma(
-        get_rule(regular, "--plugin--background", "#FFFFFF"),
+        get_rule(regular, "--psp--background-color", "#FFFFFF"),
     ).rgb();
 
     const _pos_fg_color = make_color_record(
-        get_rule(regular, "--rt-pos-cell--color", "#338DCD"),
+        get_rule(regular, "--psp-datagrid--pos-cell--color", "#338DCD"),
     );
 
     const _neg_fg_color = make_color_record(
-        get_rule(regular, "--rt-neg-cell--color", "#FF5942"),
+        get_rule(regular, "--psp-datagrid--neg-cell--color", "#FF5942"),
     );
 
     const _pos_bg_color = make_color_record(
@@ -168,7 +172,7 @@ export async function createModel(
     );
 
     const _color = make_color_record(
-        get_rule(regular, "--active--color", "#ff0000"),
+        get_rule(regular, "--psp-active--color", "#ff0000"),
     );
 
     const _schema: Schema = {

package/src/ts/plugin/draw.ts

@@ -37,6 +37,7 @@ export async function draw(
     const drawPromise = this.regular_table.draw({
         invalid_columns: true,
     } as any);
+
     if (this._reset_scroll_top) {
         this.regular_table.scrollTop = 0;
         this._reset_scroll_top = false;

package/src/ts/style_handlers/body.ts

@@ -49,6 +49,11 @@ export function applyBodyCellStyles(
     const hasSelected = selectedRowsMap.has(regularTable);
     const selected = selectedRowsMap.get(regularTable);
 
+    regularTable.classList.toggle(
+        "flat-group-rollup-mode",
+        this._config.group_rollup_mode === "flat",
+    );
+
     for (const { element: td, metadata, isHeader } of cells) {
         const column_name =
             metadata.column_header?.[this._config.split_by.length];
@@ -60,18 +65,20 @@ export function applyBodyCellStyles(
 
         // Calculate aggregate depth visibility
         // @ts-ignore
-        metadata._is_hidden_by_aggregate_depth = ((x?: number) =>
-            x === 0 || x === undefined
-                ? false
-                : x - 1 <
-                  Math.min(
-                      this._config.group_by.length,
-                      plugin?.aggregate_depth || 0,
-                  ))(
-            (metadata.row_header as unknown[] | undefined)?.filter(
-                (x) => x !== undefined,
-            )?.length,
-        );
+        metadata._is_hidden_by_aggregate_depth =
+            this._config.group_rollup_mode === "rollup" &&
+            ((x?: number) =>
+                x === 0 || x === undefined
+                    ? false
+                    : x - 1 <
+                      Math.min(
+                          this._config.group_by.length,
+                          plugin?.aggregate_depth || 0,
+                      ))(
+                (metadata.row_header as unknown[] | undefined)?.filter(
+                    (x) => x !== undefined,
+                )?.length,
+            );
 
         // Apply type-specific cell styling
         if (is_numeric) {
@@ -87,7 +94,7 @@ export function applyBodyCellStyles(
         } else if (type === "string") {
             cell_style_string.call(this, plugin as any, td, metadata as any);
         } else if (type === "date" || type === "datetime") {
-            cell_style_datetime.call(this, plugin as any, td, metadata as any);
+            cell_style_datetime.call(this, plugin as any, td, metadata);
         } else {
             td.style.backgroundColor = "";
             td.style.color = "";