dreamfactorysoftware · nicdavidson · Feb 1, 2026 · Feb 1, 2026
diff --git a/dist/1212.7583676fba10ff85.js b/dist/1212.7583676fba10ff85.js
diff --git a/dist/3280.71583138a61ae1b1.js → dist/3280.d58a7538ae6dd56f.js b/dist/3280.71583138a61ae1b1.js → dist/3280.d58a7538ae6dd56f.js
diff --git a/dist/8876.e018d519f7446d4f.js b/dist/8876.e018d519f7446d4f.js
diff --git a/dist/assets/i18n/dataExplorer/en.json b/dist/assets/i18n/dataExplorer/en.json
@@ -21,5 +21,14 @@
   "database": "Database",
   "table": "Table",
   "readOnly": "Read-only",
-  "rowsPerPage": "Rows per page"
+  "rowsPerPage": "Rows per page",
+  "schemaInfo": "Schema Info",
+  "columns": "Columns",
+  "relationships": "Relationships",
+  "filterPlaceholder": "Filter...",
+  "clearFilters": "Clear all filters",
+  "recordDetail": "Record Detail",
+  "nullValue": "NULL",
+  "showApiCall": "Show API Call",
+  "quickSearch": "Search rows..."
 }
diff --git a/dist/common.9829fb1aef36ddb7.js → dist/common.2ea0eeef6c2f795b.js b/dist/common.9829fb1aef36ddb7.js → dist/common.2ea0eeef6c2f795b.js
diff --git a/dist/index.html b/dist/index.html
@@ -10,5 +10,5 @@
   <body class="mat-typography">
     <df-root></df-root>
     <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
-  <script src="runtime.d36f837f4bcb03fa.js" type="module"></script><script src="polyfills.cb64ea9d35bc0a9e.js" type="module"></script><script src="main.d01c7c1c97600661.js" type="module"></script></body>
+  <script src="runtime.88f333db19f023f3.js" type="module"></script><script src="polyfills.cb64ea9d35bc0a9e.js" type="module"></script><script src="main.a54e1010cb4191bc.js" type="module"></script></body>
 </html>
diff --git a/dist/main.a54e1010cb4191bc.js b/dist/main.a54e1010cb4191bc.js
diff --git a/dist/main.d01c7c1c97600661.js b/dist/main.d01c7c1c97600661.js
diff --git a/dist/runtime.88f333db19f023f3.js b/dist/runtime.88f333db19f023f3.js
diff --git a/dist/runtime.d36f837f4bcb03fa.js b/dist/runtime.d36f837f4bcb03fa.js
diff --git a/src/app/adf-data-explorer/df-data-explorer.component.html b/src/app/adf-data-explorer/df-data-explorer.component.html
@@ -44,7 +44,9 @@ <h2>{{ t('dataExplorer.title') }}</h2>
       <ng-container *ngIf="selectedTable && selectedDb">
         <df-data-grid
           [serviceName]="selectedDb.name"
-          [tableName]="selectedTable.name">
+          [tableName]="selectedTable.name"
+          [initialFilter]="pendingFilter"
+          (tableNavigated)="onTableNavigated($event)">
         </df-data-grid>
       </ng-container>
     </mat-sidenav-content>

diff --git a/src/app/adf-data-explorer/df-data-explorer.component.scss b/src/app/adf-data-explorer/df-data-explorer.component.scss
@@ -1,17 +1,30 @@
 :host {
   display: block;
-  height: calc(100vh - 130px);
+  overflow: hidden;
+  // height is set dynamically via HostBinding based on actual viewport position
 }
 
 .data-explorer-container {
   height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
+// Use explicit height: 100% chain instead of flex, so mat-sidenav-container
+// propagates its height properly to children using height: 100%
 .explorer-sidenav-container {
-  flex: 1;
-  height: 100%;
+  height: 100% !important;
+  min-height: 0 !important;
+  max-height: 100% !important;
+  overflow: hidden !important;
+}
+
+// Also target via ::ng-deep to override Angular Material's own host styles
+::ng-deep mat-sidenav-container.explorer-sidenav-container {
+  height: 100% !important;
+  min-height: 0 !important;
+  max-height: 100% !important;
 }
 
 .explorer-sidenav {
@@ -32,13 +45,20 @@
 
 .explorer-content {
   background: #fff;
-  height: 100%;
 
   .dark-theme & {
     background: #424242;
   }
 }
 
+// Force mat-sidenav-content to have bounded height and act as positioned parent
+::ng-deep .mat-sidenav-content,
+::ng-deep .mat-drawer-content {
+  height: 100% !important;
+  overflow: hidden !important;
+  position: relative !important;
+}
+
 .empty-state {
   display: flex;
   flex-direction: column;

diff --git a/src/app/adf-data-explorer/df-data-explorer.component.ts b/src/app/adf-data-explorer/df-data-explorer.component.ts
@@ -1,4 +1,12 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  AfterViewInit,
+  ElementRef,
+  HostBinding,
+  NgZone,
+} from '@angular/core';
 import { NgIf, AsyncPipe } from '@angular/common';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -37,11 +45,13 @@ import { DfThemeService } from '../shared/services/df-theme.service';
     DfDataGridComponent,
   ],
 })
-export class DfDataExplorerComponent implements OnInit, OnDestroy {
+export class DfDataExplorerComponent implements OnInit, OnDestroy, AfterViewInit {
+  @HostBinding('style.height.px') hostHeight: number | null = null;
   databases: DatabaseService[] = [];
   tables: TableInfo[] = [];
   selectedDb: DatabaseService | null = null;
   selectedTable: TableInfo | null = null;
+  pendingFilter: string | undefined;
 
   loadingDbs = false;
   loadingSchema = false;
@@ -52,18 +62,49 @@ export class DfDataExplorerComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
 
+  private resizeObserver: ResizeObserver | null = null;
+  private resizeListener = () => this.calculateHeight();
+
   constructor(
     private dataExplorerService: DataExplorerService,
-    private themeService: DfThemeService
+    private themeService: DfThemeService,
+    private elementRef: ElementRef,
+    private ngZone: NgZone
   ) {}
 
   ngOnInit(): void {
     this.loadDatabases();
   }
 
+  ngAfterViewInit(): void {
+    // Measure actual available height from element position in viewport
+    this.calculateHeight();
+    window.addEventListener('resize', this.resizeListener);
+
+    // Watch for parent layout changes (e.g. sidebar collapse)
+    this.ngZone.runOutsideAngular(() => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.ngZone.run(() => this.calculateHeight());
+      });
+      const parent = this.elementRef.nativeElement.parentElement;
+      if (parent) {
+        this.resizeObserver.observe(parent);
+      }
+    });
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
+    window.removeEventListener('resize', this.resizeListener);
+    this.resizeObserver?.disconnect();
+  }
+
+  private calculateHeight(): void {
+    const el = this.elementRef.nativeElement as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    // Available height = viewport bottom - element top - small margin for safety
+    this.hostHeight = Math.floor(window.innerHeight - rect.top);
   }
 
   loadDatabases(): void {
@@ -110,12 +151,29 @@ export class DfDataExplorerComponent implements OnInit, OnDestroy {
   }
 
   onTableSelected(table: TableInfo): void {
+    this.pendingFilter = undefined;
     this.selectedTable = table;
   }
 
+  onTableNavigated(event: { tableName: string; filter?: string }): void {
+    // Find the table in the current schema list
+    const table = this.tables.find(t => t.name === event.tableName);
+    if (table) {
+      this.pendingFilter = event.filter;
+      // If navigating to the same table, briefly null to force ngOnChanges
+      if (this.selectedTable?.name === table.name) {
+        this.selectedTable = null;
+        setTimeout(() => (this.selectedTable = table));
+      } else {
+        this.selectedTable = table;
+      }
+    }
+  }
+
   onBackToDatabases(): void {
     this.selectedDb = null;
     this.selectedTable = null;
+    this.pendingFilter = undefined;
     this.tables = [];
   }
 }