@design.estate/dees-catalog 3.61.2 → 3.63.0

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

@@ -114,29 +114,48 @@ export const tableStyles: CSSResult[] = [
         border-bottom-width: 0px;
       }
 
+      /* Default mode (Mode B, page sticky): horizontal scroll lives on
+         .tableScroll (so wide tables don't get clipped by an ancestor
+         overflow:hidden such as dees-tile). Vertical sticky is handled by
+         a JS-managed floating header (.floatingHeader, position:fixed),
+         which is unaffected by ancestor overflow. */
       .tableScroll {
-        /* enable horizontal scroll only when content exceeds width */
+        position: relative;
         overflow-x: auto;
-        /* prevent vertical scroll inside the table container */
-        overflow-y: hidden;
-        /* avoid reserving extra space for classic scrollbars where possible */
+        overflow-y: visible;
+        scrollbar-gutter: stable;
+      }
+      /* Mode A, internal scroll: opt-in via fixed-height attribute.
+         The table scrolls inside its own box and the header sticks via plain CSS sticky. */
+      :host([fixed-height]) .tableScroll {
+        max-height: var(--table-max-height, 360px);
+        overflow: auto;
         scrollbar-gutter: stable both-edges;
       }
-      /* Hide horizontal scrollbar entirely when not using sticky header */
-      :host(:not([sticky-header])) .tableScroll {
-        -ms-overflow-style: none; /* IE/Edge */
-        scrollbar-width: none;   /* Firefox (hides both axes) */
+      :host([fixed-height]) .tableScroll::-webkit-scrollbar:horizontal {
+        height: 0px;
       }
-      :host(:not([sticky-header])) .tableScroll::-webkit-scrollbar {
-        display: none; /* Chrome/Safari */
+
+      /* Floating header overlay (Mode B). Position is managed by JS so it
+         escapes any ancestor overflow:hidden (position:fixed is not clipped
+         by overflow ancestors). */
+      .floatingHeader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 100;
+        visibility: hidden;
+        overflow: hidden;
+        pointer-events: none;
       }
-      /* In sticky-header mode, hide only the horizontal scrollbar in WebKit/Blink */
-      :host([sticky-header]) .tableScroll::-webkit-scrollbar:horizontal {
-        height: 0px;
+      .floatingHeader.active {
+        visibility: visible;
       }
-      :host([sticky-header]) .tableScroll {
-        max-height: var(--table-max-height, 360px);
-        overflow: auto;
+      .floatingHeader table {
+        margin: 0;
+      }
+      .floatingHeader th {
+        pointer-events: auto;
       }
 
       table {
@@ -159,11 +178,20 @@ export const tableStyles: CSSResult[] = [
         background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
         border-bottom: 1px solid var(--dees-color-border-strong);
       }
-      :host([sticky-header]) thead th {
+      /* th needs its own background so sticky cells paint over scrolled rows
+         (browsers don't paint the <thead> box behind a sticky <th>). */
+      th {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
+      }
+      /* Mode A — internal scroll sticky */
+      :host([fixed-height]) thead th {
         position: sticky;
         top: 0;
         z-index: 2;
       }
+      :host([fixed-height]) thead tr.filtersRow th {
+        top: 36px; /* matches th { height: 36px } below */
+      }
       
       tbody tr {
         transition: background-color 0.15s ease;
@@ -276,6 +304,32 @@ export const tableStyles: CSSResult[] = [
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         letter-spacing: -0.01em;
       }
+
+      th[role='columnheader']:hover {
+        color: var(--dees-color-text-primary);
+      }
+
+      th .sortArrow {
+        display: inline-block;
+        margin-left: 6px;
+        font-size: 10px;
+        line-height: 1;
+        opacity: 0.7;
+        vertical-align: middle;
+      }
+
+      th .sortBadge {
+        display: inline-block;
+        margin-left: 3px;
+        padding: 1px 5px;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 1;
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 30%)', 'hsl(217.2 91.2% 75%)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.12)', 'hsl(217.2 91.2% 59.8% / 0.18)')};
+        border-radius: 999px;
+        vertical-align: middle;
+      }
       
       :host([show-vertical-lines]) th {
         border-right: 1px solid var(--dees-color-border-default);

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

@@ -26,4 +26,13 @@ export interface Column<T = any> {
   hidden?: boolean;
 }
 
+/**
+ * One entry in a multi-column sort cascade. Order in the array reflects priority:
+ * index 0 is the primary sort key, index 1 the secondary tiebreaker, and so on.
+ */
+export interface ISortDescriptor {
+  key: string;
+  dir: 'asc' | 'desc';
+}
+
 export type TDisplayFunction<T = any> = (itemArg: T) => Record<string, any>;