feat: add per-column filtering and sticky header support to DeesTable component

ts_web/elements/dees-table/styles.ts

@@ -108,6 +108,14 @@ export const tableStyles: CSSResult[] = [
         border-bottom-width: 0px;
       }
 
+      .tableScroll {
+        /* no overflow by default to preserve current layout */
+      }
+      :host([sticky-header]) .tableScroll {
+        max-height: var(--table-max-height, 360px);
+        overflow: auto;
+      }
+
       table {
         width: 100%;
         caption-side: bottom;
@@ -126,6 +134,11 @@ export const tableStyles: CSSResult[] = [
         background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
         border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
+      :host([sticky-header]) thead th {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+      }
       
       tbody tr {
         transition: background-color 0.15s ease;
@@ -282,6 +295,21 @@ export const tableStyles: CSSResult[] = [
         outline-offset: 2px;
         box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.2)', 'hsl(217.2 91.2% 59.8% / 0.2)')};
       }
+
+      /* filter row */
+      thead tr.filtersRow th {
+        padding: 8px 12px 12px 12px;
+      }
+      thead tr.filtersRow th input[type='text'] {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 6px 8px;
+        font-size: 13px;
+        border-radius: 6px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+      }
       .actionsContainer {
         display: flex;
         flex-direction: row;
@@ -359,4 +387,3 @@ export const tableStyles: CSSResult[] = [
       }
   `,
 ];
-