update

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

@@ -768,7 +768,7 @@ export class DeesTable<T> extends DeesElement {
         ${effectiveColumns
           .filter((c) => !c.hidden)
           .map((col) => {
-            const isSortable = !!col.sortable;
+            const isSortable = col.sortable !== false;
             const ariaSort = this.getAriaSort(col);
             return html`
               <th
@@ -1053,14 +1053,23 @@ export class DeesTable<T> extends DeesElement {
       }
     }
 
-    // Active when the table top is above the stick line and the table bottom
-    // hasn't yet scrolled past it.
-    const shouldBeActive =
-      tableRect.top < stick.top && tableRect.bottom > stick.top + Math.min(headerHeight, 1);
+    // Active when the table top is above the stick line and any pixel of the
+    // table still sits below it. As the table's bottom edge approaches the
+    // stick line we shrink the floating container and slide the cloned header
+    // up inside it, so the header appears to scroll off with the table
+    // instead of snapping away in one frame.
+    const distance = tableRect.bottom - stick.top;
+    const shouldBeActive = tableRect.top < stick.top && distance > 0;
 
     if (shouldBeActive !== this.__floatingActive) {
       this.__floatingActive = shouldBeActive;
       fh.classList.toggle('active', shouldBeActive);
+      if (!shouldBeActive) {
+        // Reset inline geometry so the next activation starts clean.
+        fh.style.height = '';
+        const ft = this.__floatingTableEl;
+        if (ft) ft.style.transform = '';
+      }
       if (shouldBeActive) {
         // Clone subtree doesn't exist yet — wait for the next render to
         // materialize it, then complete geometry sync.
@@ -1100,10 +1109,19 @@ export class DeesTable<T> extends DeesElement {
     fh.style.left = `${clipLeft}px`;
     fh.style.width = `${clipWidth}px`;
 
+    // Exit animation: when the table's bottom edge is within `headerHeight`
+    // pixels of the stick line, shrink the container and translate the
+    // inner table up by the same amount. overflow:hidden on .floatingHeader
+    // clips the overflow, producing a scroll-off effect.
+    const visibleHeight = Math.min(headerHeight, distance);
+    const exitOffset = headerHeight - visibleHeight;
+    fh.style.height = `${visibleHeight}px`;
+
     // The inner table is positioned so the visible region matches the real
     // table's left edge — shift it left when we clipped to the container.
     floatTable.style.width = `${tableRect.width}px`;
     floatTable.style.marginLeft = `${tableRect.left - clipLeft}px`;
+    floatTable.style.transform = exitOffset > 0 ? `translateY(-${exitOffset}px)` : '';
   }
 
   public async disconnectedCallback() {
@@ -1496,7 +1514,7 @@ export class DeesTable<T> extends DeesElement {
     // Maximum exposed slot: one beyond the current cascade, capped at the
     // number of sortable columns. If the column is already in the cascade we
     // never need to grow the slot count.
-    const sortableColumnCount = effectiveColumns.filter((c) => !!c.sortable).length;
+    const sortableColumnCount = effectiveColumns.filter((c) => c.sortable !== false).length;
     const maxSlot = Math.min(
       Math.max(cascadeLen + (existing ? 0 : 1), 1),
       Math.max(sortableColumnCount, 1)
@@ -1602,6 +1620,17 @@ export class DeesTable<T> extends DeesElement {
       });
     }
 
+    items.push({ divider: true });
+    items.push({
+      name: this.showColumnFilters ? 'Hide column filters' : 'Show column filters',
+      iconName: this.showColumnFilters ? 'lucide:filterX' : 'lucide:filter',
+      action: async () => {
+        this.showColumnFilters = !this.showColumnFilters;
+        this.requestUpdate();
+        return null;
+      },
+    });
+
     return items;
   }