From c2db4100a927d1c2300aac8c828a1dea855a4d97 Mon Sep 17 00:00:00 2001 From: vato007 Date: Thu, 24 Apr 2025 22:19:52 +0930 Subject: [PATCH] Use flexible scroll height on table to fill view --- bun.lock | 50 +++++++++---------- package.json | 6 +-- src/app/file-viewer/file-viewer.component.css | 1 + src/app/file-viewer/file-viewer.component.ts | 5 +- src/styles.scss | 7 +++ 5 files changed, 38 insertions(+), 31 deletions(-) diff --git a/bun.lock b/bun.lock index 47b71ce..b1de2d5 100644 --- a/bun.lock +++ b/bun.lock @@ -4,40 +4,40 @@ "": { "name": "ingey-eager", "dependencies": { - "@angular/animations": "^19.1.0", - "@angular/common": "^19.1.0", - "@angular/compiler": "^19.1.0", - "@angular/core": "^19.1.0", - "@angular/forms": "^19.1.0", - "@angular/platform-browser": "^19.1.0", - "@angular/platform-browser-dynamic": "^19.1.0", - "@angular/router": "^19.1.0", + "@angular/animations": "^19.2.6", + "@angular/common": "^19.2.6", + "@angular/compiler": "^19.2.6", + "@angular/core": "^19.2.6", + "@angular/forms": "^19.2.6", + "@angular/platform-browser": "^19.2.6", + "@angular/platform-browser-dynamic": "^19.2.6", + "@angular/router": "^19.2.6", "@duckdb/duckdb-wasm": "^1.29.0", - "@primeng/themes": "^19.0.10", - "@tailwindcss/postcss": "^4.0.15", + "@primeng/themes": "19.1.0", + "@tailwindcss/postcss": "^4.1.3", "postcss": "^8.5.3", "prettier": "^3.5.3", "primeicons": "^7.0.0", - "primeng": "^19.0.10", - "rxjs": "~7.8.0", - "tailwindcss": "^4.0.15", - "tailwindcss-primeui": "^0.5.1", - "tslib": "^2.3.0", + "primeng": "19.1.0", + "rxjs": "~7.8.2", + "tailwindcss": "^4.1.3", + "tailwindcss-primeui": "0.6.1", + "tslib": "^2.8.1", "zod": "^3.24.2", "zone.js": "~0.15.0", }, "devDependencies": { - "@angular-devkit/build-angular": "^19.1.8", - "@angular/cli": "^19.1.8", - "@angular/compiler-cli": "^19.1.0", - "@types/jasmine": "~5.1.0", + "@angular-devkit/build-angular": "^19.2.7", + "@angular/cli": "^19.2.7", + "@angular/compiler-cli": "^19.2.6", + "@types/jasmine": "~5.1.7", "jasmine-core": "~5.5.0", - "karma": "~6.4.0", + "karma": "~6.4.4", "karma-chrome-launcher": "~3.2.0", - "karma-coverage": "~2.2.0", + "karma-coverage": "~2.2.1", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", - "typescript": "~5.7.2", + "typescript": "~5.7.3", }, }, }, @@ -486,7 +486,7 @@ "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="], - "@primeng/themes": ["@primeng/themes@19.0.10", "", { "dependencies": { "@primeuix/styled": "^0.3.2" } }, "sha512-2sQsl46q3720lbropItBh8WjK98itFlG4clBO36B/QDxv9Ic/7DLGxJCvKdMQP0bcVSX/y+99HwPu0JNNNkkoA=="], + "@primeng/themes": ["@primeng/themes@19.1.0", "", { "dependencies": { "@primeuix/styled": "^0.3.2" } }, "sha512-nY1jNjYD0jotgVIo6tRHrqdtcRSmfhw7O0odPCDV72XoDEmx7yR2m0dceL6KPO6NiR6dpXVceiwRwV7GwomkVA=="], "@primeuix/styled": ["@primeuix/styled@0.3.2", "", { "dependencies": { "@primeuix/utils": "^0.3.2" } }, "sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw=="], @@ -1446,7 +1446,7 @@ "primeicons": ["primeicons@7.0.0", "", {}, "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="], - "primeng": ["primeng@19.0.10", "", { "dependencies": { "@primeuix/styled": "^0.3.2", "@primeuix/utils": "^0.3.2", "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^19.0.0", "@angular/cdk": "^19.0.0", "@angular/common": "^19.0.0", "@angular/core": "^19.0.0", "@angular/forms": "^19.0.0", "@angular/platform-browser": "^19.0.0", "@angular/router": "^19.0.0", "rxjs": "^6.0.0 || ^7.8.1" } }, "sha512-pVvywU6WoDtS6cwyGm5wyHp/RPqsqtTL3Z6eNgwsP7wMRpNYxVQB2W5ewF64byP8bqFqRQMWY2ZPj0lDeTQ/sA=="], + "primeng": ["primeng@19.1.0", "", { "dependencies": { "@primeuix/styled": "^0.3.2", "@primeuix/utils": "^0.3.2", "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^19.0.0", "@angular/cdk": "19.2.3", "@angular/common": "^19.0.0", "@angular/core": "^19.0.0", "@angular/forms": "^19.0.0", "@angular/platform-browser": "^19.0.0", "@angular/router": "^19.0.0", "rxjs": "^6.0.0 || ^7.8.1" } }, "sha512-xzPOvq6m0nyD3HQpqIgXmfTFqWiI4P9AIraRKjMdfwOruGzpimxf0iYJDgNNvJJvH32DwLZD6OnFTh3PaiP5Fg=="], "proc-log": ["proc-log@5.0.0", "", {}, "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ=="], @@ -1640,7 +1640,7 @@ "tailwindcss": ["tailwindcss@4.1.3", "", {}, "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g=="], - "tailwindcss-primeui": ["tailwindcss-primeui@0.5.1", "", { "peerDependencies": { "tailwindcss": ">=3.1.0" } }, "sha512-zNqp62N4c+pwBVkVJd8ByvujepVKAMxZBdYy5MzIDi/Zb2p8wTGo4RrQaqLQazm3teOWVmttzZYPH/GlOB3lgw=="], + "tailwindcss-primeui": ["tailwindcss-primeui@0.6.1", "", { "peerDependencies": { "tailwindcss": ">=3.1.0" } }, "sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A=="], "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="], diff --git a/package.json b/package.json index 69868e6..f9b10d0 100644 --- a/package.json +++ b/package.json @@ -19,15 +19,15 @@ "@angular/platform-browser-dynamic": "^19.2.6", "@angular/router": "^19.2.6", "@duckdb/duckdb-wasm": "^1.29.0", - "@primeng/themes": "^19.0.10", + "@primeng/themes": "19.1.0", "@tailwindcss/postcss": "^4.1.3", "postcss": "^8.5.3", "prettier": "^3.5.3", "primeicons": "^7.0.0", - "primeng": "^19.0.10", + "primeng": "19.1.0", "rxjs": "~7.8.2", "tailwindcss": "^4.1.3", - "tailwindcss-primeui": "^0.5.1", + "tailwindcss-primeui": "0.6.1", "tslib": "^2.8.1", "zod": "^3.24.2", "zone.js": "~0.15.0" diff --git a/src/app/file-viewer/file-viewer.component.css b/src/app/file-viewer/file-viewer.component.css index 5d4e87f..478abc9 100644 --- a/src/app/file-viewer/file-viewer.component.css +++ b/src/app/file-viewer/file-viewer.component.css @@ -1,3 +1,4 @@ :host { display: block; + height: 100%; } diff --git a/src/app/file-viewer/file-viewer.component.ts b/src/app/file-viewer/file-viewer.component.ts index fa53f1a..cbef9f5 100644 --- a/src/app/file-viewer/file-viewer.component.ts +++ b/src/app/file-viewer/file-viewer.component.ts @@ -11,7 +11,6 @@ import { } from '@angular/core'; import { Skeleton } from 'primeng/skeleton'; import { Table, TableLazyLoadEvent, TableModule } from 'primeng/table'; -import * as duckdb from '@duckdb/duckdb-wasm'; import { Column, DuckdbService } from '../duckdb.service'; @Component({ @@ -28,7 +27,7 @@ import { Column, DuckdbService } from '../duckdb.service'; [value]="currentValue()" showGridlines [scrollable]="true" - scrollHeight="400px" + scrollHeight="flex" [rows]="100" [virtualScroll]="true" [virtualScrollItemSize]="46" @@ -38,7 +37,7 @@ import { Column, DuckdbService } from '../duckdb.service'; @for (col of columns; track $index) { - + {{ col.name }} } diff --git a/src/styles.scss b/src/styles.scss index 14b4ef9..b1d5ad9 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,3 +4,10 @@ html { font-size: 14px; } + +// https://github.com/primefaces/primeng/issues/17824 +// table won't show up when using scrooheight = flex and virtualscroll = true +// Latest release doesn't fix it even though there was a commit to address the issue +p-scroller { + height: 100%; +}