@design.estate/dees-catalog 3.61.2 → 3.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.61.2",
+  "version": "3.63.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.61.2',
+  version: '3.63.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-dataview/dees-table/data.ts

@@ -1,4 +1,4 @@
-import type { Column, TDisplayFunction } from './types.js';
+import type { Column, ISortDescriptor, TDisplayFunction } from './types.js';
 
 export function computeColumnsFromDisplayFunction<T>(
   displayFunction: TDisplayFunction<T>,
@@ -36,11 +36,31 @@ export function getCellValue<T>(row: T, col: Column<T>, displayFunction?: TDispl
   return col.value ? col.value(row) : (row as any)[col.key as any];
 }
 
+/**
+ * Compares two cell values in ascending order. Returns -1, 0, or 1.
+ * Null/undefined values sort before defined values. Numbers compare numerically;
+ * everything else compares as case-insensitive strings.
+ */
+export function compareCellValues(va: any, vb: any): number {
+  if (va == null && vb == null) return 0;
+  if (va == null) return -1;
+  if (vb == null) return 1;
+  if (typeof va === 'number' && typeof vb === 'number') {
+    if (va < vb) return -1;
+    if (va > vb) return 1;
+    return 0;
+  }
+  const sa = String(va).toLowerCase();
+  const sb = String(vb).toLowerCase();
+  if (sa < sb) return -1;
+  if (sa > sb) return 1;
+  return 0;
+}
+
 export function getViewData<T>(
   data: T[],
   effectiveColumns: Column<T>[],
-  sortKey?: string,
-  sortDir?: 'asc' | 'desc' | null,
+  sortBy: ISortDescriptor[],
   filterText?: string,
   columnFilters?: Record<string, string>,
   filterMode: 'table' | 'data' = 'table',
@@ -94,21 +114,17 @@ export function getViewData<T>(
       return true;
     });
   }
-  if (!sortKey || !sortDir) return arr;
-  const col = effectiveColumns.find((c) => String(c.key) === sortKey);
-  if (!col) return arr;
-  const dir = sortDir === 'asc' ? 1 : -1;
+  if (!sortBy || sortBy.length === 0) return arr;
+  // Pre-resolve descriptors -> columns once for performance.
+  const resolved = sortBy
+    .map((desc) => ({ desc, col: effectiveColumns.find((c) => String(c.key) === desc.key) }))
+    .filter((entry): entry is { desc: ISortDescriptor; col: Column<T> } => !!entry.col);
+  if (resolved.length === 0) return arr;
   arr.sort((a, b) => {
-    const va = getCellValue(a, col);
-    const vb = getCellValue(b, col);
-    if (va == null && vb == null) return 0;
-    if (va == null) return -1 * dir;
-    if (vb == null) return 1 * dir;
-    if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
-    const sa = String(va).toLowerCase();
-    const sb = String(vb).toLowerCase();
-    if (sa < sb) return -1 * dir;
-    if (sa > sb) return 1 * dir;
+    for (const { desc, col } of resolved) {
+      const cmp = compareCellValues(getCellValue(a, col), getCellValue(b, col));
+      if (cmp !== 0) return desc.dir === 'asc' ? cmp : -cmp;
+    }
     return 0;
   });
   return arr;

package/ts_web/elements/00group-dataview/dees-table/dees-table.demo.ts

@@ -580,6 +580,44 @@ export const demoFunc = () => html`
         ></dees-table>
       </div>
 
+      <div class="demo-section">
+        <h2 class="demo-title">Multi-Column Sort</h2>
+        <p class="demo-description">
+          Click any column header for a single-column sort. Hold Shift while clicking to add the
+          column to a multi-sort cascade (or cycle its direction). Right-click any sortable header
+          to open a menu where you can pin a column to a specific priority slot, remove it, or
+          clear the cascade.
+        </p>
+        <dees-table
+          heading1="People Directory"
+          heading2="Pre-seeded with department ▲ 1, name ▲ 2"
+          .sortBy=${[
+            { key: 'department', dir: 'asc' },
+            { key: 'name', dir: 'asc' },
+          ]}
+          .columns=${[
+            { key: 'department', header: 'Department', sortable: true },
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'role', header: 'Role', sortable: true },
+            { key: 'createdAt', header: 'Created', sortable: true },
+            { key: 'location', header: 'Location', sortable: true },
+            { key: 'status', header: 'Status', sortable: true },
+          ]}
+          .data=${[
+            { department: 'R&D', name: 'Alice Johnson', role: 'Engineer', createdAt: '2023-01-12', location: 'Berlin', status: 'Active' },
+            { department: 'R&D', name: 'Diana Martinez', role: 'Engineer', createdAt: '2020-06-30', location: 'Madrid', status: 'Active' },
+            { department: 'R&D', name: 'Mark Lee', role: 'Engineer', createdAt: '2024-03-04', location: 'Berlin', status: 'Active' },
+            { department: 'Design', name: 'Bob Smith', role: 'Designer', createdAt: '2022-11-05', location: 'Paris', status: 'Active' },
+            { department: 'Design', name: 'Sara Kim', role: 'Designer', createdAt: '2021-08-19', location: 'Paris', status: 'On Leave' },
+            { department: 'Ops', name: 'Charlie Davis', role: 'Manager', createdAt: '2021-04-21', location: 'London', status: 'On Leave' },
+            { department: 'Ops', name: 'Helena Voss', role: 'SRE', createdAt: '2023-07-22', location: 'London', status: 'Active' },
+            { department: 'QA', name: 'Fiona Clark', role: 'QA', createdAt: '2022-03-14', location: 'Vienna', status: 'Active' },
+            { department: 'QA', name: 'Tomás Rivera', role: 'QA', createdAt: '2024-01-09', location: 'Madrid', status: 'Active' },
+            { department: 'CS', name: 'Ethan Brown', role: 'Support', createdAt: '2019-09-18', location: 'Rome', status: 'Inactive' },
+          ]}
+        ></dees-table>
+      </div>
+
       <div class="demo-section">
         <h2 class="demo-title">Wide Properties + Many Actions</h2>
         <p class="demo-description">A table with many columns and rich actions to stress test layout and sticky Actions.</p>