Use flexible scroll height on table to fill view
All checks were successful
build / build (push) Successful in 1m31s

This commit is contained in:
2025-04-24 22:19:52 +09:30
parent 5d8bd10e92
commit c2db4100a9
5 changed files with 38 additions and 31 deletions

View File

@@ -4,40 +4,40 @@
"": { "": {
"name": "ingey-eager", "name": "ingey-eager",
"dependencies": { "dependencies": {
"@angular/animations": "^19.1.0", "@angular/animations": "^19.2.6",
"@angular/common": "^19.1.0", "@angular/common": "^19.2.6",
"@angular/compiler": "^19.1.0", "@angular/compiler": "^19.2.6",
"@angular/core": "^19.1.0", "@angular/core": "^19.2.6",
"@angular/forms": "^19.1.0", "@angular/forms": "^19.2.6",
"@angular/platform-browser": "^19.1.0", "@angular/platform-browser": "^19.2.6",
"@angular/platform-browser-dynamic": "^19.1.0", "@angular/platform-browser-dynamic": "^19.2.6",
"@angular/router": "^19.1.0", "@angular/router": "^19.2.6",
"@duckdb/duckdb-wasm": "^1.29.0", "@duckdb/duckdb-wasm": "^1.29.0",
"@primeng/themes": "^19.0.10", "@primeng/themes": "19.1.0",
"@tailwindcss/postcss": "^4.0.15", "@tailwindcss/postcss": "^4.1.3",
"postcss": "^8.5.3", "postcss": "^8.5.3",
"prettier": "^3.5.3", "prettier": "^3.5.3",
"primeicons": "^7.0.0", "primeicons": "^7.0.0",
"primeng": "^19.0.10", "primeng": "19.1.0",
"rxjs": "~7.8.0", "rxjs": "~7.8.2",
"tailwindcss": "^4.0.15", "tailwindcss": "^4.1.3",
"tailwindcss-primeui": "^0.5.1", "tailwindcss-primeui": "0.6.1",
"tslib": "^2.3.0", "tslib": "^2.8.1",
"zod": "^3.24.2", "zod": "^3.24.2",
"zone.js": "~0.15.0", "zone.js": "~0.15.0",
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^19.1.8", "@angular-devkit/build-angular": "^19.2.7",
"@angular/cli": "^19.1.8", "@angular/cli": "^19.2.7",
"@angular/compiler-cli": "^19.1.0", "@angular/compiler-cli": "^19.2.6",
"@types/jasmine": "~5.1.0", "@types/jasmine": "~5.1.7",
"jasmine-core": "~5.5.0", "jasmine-core": "~5.5.0",
"karma": "~6.4.0", "karma": "~6.4.4",
"karma-chrome-launcher": "~3.2.0", "karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0", "karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0", "karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.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=="], "@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=="], "@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=="], "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=="], "proc-log": ["proc-log@5.0.0", "", {}, "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ=="],
@@ -1640,7 +1640,7 @@
"tailwindcss": ["tailwindcss@4.1.3", "", {}, "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g=="], "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=="], "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],

View File

@@ -19,15 +19,15 @@
"@angular/platform-browser-dynamic": "^19.2.6", "@angular/platform-browser-dynamic": "^19.2.6",
"@angular/router": "^19.2.6", "@angular/router": "^19.2.6",
"@duckdb/duckdb-wasm": "^1.29.0", "@duckdb/duckdb-wasm": "^1.29.0",
"@primeng/themes": "^19.0.10", "@primeng/themes": "19.1.0",
"@tailwindcss/postcss": "^4.1.3", "@tailwindcss/postcss": "^4.1.3",
"postcss": "^8.5.3", "postcss": "^8.5.3",
"prettier": "^3.5.3", "prettier": "^3.5.3",
"primeicons": "^7.0.0", "primeicons": "^7.0.0",
"primeng": "^19.0.10", "primeng": "19.1.0",
"rxjs": "~7.8.2", "rxjs": "~7.8.2",
"tailwindcss": "^4.1.3", "tailwindcss": "^4.1.3",
"tailwindcss-primeui": "^0.5.1", "tailwindcss-primeui": "0.6.1",
"tslib": "^2.8.1", "tslib": "^2.8.1",
"zod": "^3.24.2", "zod": "^3.24.2",
"zone.js": "~0.15.0" "zone.js": "~0.15.0"

View File

@@ -1,3 +1,4 @@
:host { :host {
display: block; display: block;
height: 100%;
} }

View File

@@ -11,7 +11,6 @@ import {
} from '@angular/core'; } from '@angular/core';
import { Skeleton } from 'primeng/skeleton'; import { Skeleton } from 'primeng/skeleton';
import { Table, TableLazyLoadEvent, TableModule } from 'primeng/table'; import { Table, TableLazyLoadEvent, TableModule } from 'primeng/table';
import * as duckdb from '@duckdb/duckdb-wasm';
import { Column, DuckdbService } from '../duckdb.service'; import { Column, DuckdbService } from '../duckdb.service';
@Component({ @Component({
@@ -28,7 +27,7 @@ import { Column, DuckdbService } from '../duckdb.service';
[value]="currentValue()" [value]="currentValue()"
showGridlines showGridlines
[scrollable]="true" [scrollable]="true"
scrollHeight="400px" scrollHeight="flex"
[rows]="100" [rows]="100"
[virtualScroll]="true" [virtualScroll]="true"
[virtualScrollItemSize]="46" [virtualScrollItemSize]="46"
@@ -38,7 +37,7 @@ import { Column, DuckdbService } from '../duckdb.service';
<ng-template #header let-columns> <ng-template #header let-columns>
<tr> <tr>
@for (col of columns; track $index) { @for (col of columns; track $index) {
<th style="width: 20%" pReorderableColumn pResizableColumn> <th pReorderableColumn pResizableColumn>
{{ col.name }} {{ col.name }}
</th> </th>
} }

View File

@@ -4,3 +4,10 @@
html { html {
font-size: 14px; 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%;
}