Use flexible scroll height on table to fill view
All checks were successful
build / build (push) Successful in 1m31s
All checks were successful
build / build (push) Successful in 1m31s
This commit is contained in:
50
bun.lock
50
bun.lock
@@ -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=="],
|
||||||
|
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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%;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user