From 353619ad843c02a54ae9935659e508bdbdbc7655 Mon Sep 17 00:00:00 2001 From: Maximilian Koeller Date: Wed, 19 Nov 2025 14:17:15 +0100 Subject: [PATCH] refactor: use signals for dimensions --- ...ection--click-selection-chromium-linux.png | 4 +-- ...i-selection--using-ctrl-chromium-linux.png | 4 +-- ...-selection--using-shift-chromium-linux.png | 4 +-- ...--disable-row-selection-chromium-linux.png | 4 +-- ...--row-selection-initial-chromium-linux.png | 4 +-- .../lib/components/datatable.component.html | 6 ++-- .../src/lib/components/datatable.component.ts | 31 +++++++++---------- 7 files changed, 28 insertions(+), 29 deletions(-) diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-selection--click-selection-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-selection--click-selection-chromium-linux.png index cdfdfb201..381789cb5 100644 --- a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-selection--click-selection-chromium-linux.png +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-selection--click-selection-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f95e8f61d1d2f6da47f111d11f1a112af6c97adf6f88f95aa4fc325ada9793e4 -size 39426 +oid sha256:6ff1a3dba87a4a95216796b1e72ca583c92e092c25de25eafe7d7145936c2de7 +size 39192 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-ctrl-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-ctrl-chromium-linux.png index 72fa5c06d..1eaeccad3 100644 --- a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-ctrl-chromium-linux.png +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-ctrl-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f96cb5b2d9a5a9ac6085b932a8bb17852c34ab8bed889d881d7c99e5fc3d1c53 -size 40216 +oid sha256:54c9cf509b3a7e07fe5831a3378a1ef5e0bc44592af41956a4035a7489fd4cc8 +size 39934 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-shift-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-shift-chromium-linux.png index 8b93db619..b1c102df0 100644 --- a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-shift-chromium-linux.png +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-shift-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:281adf4c03227a52457e14f4e640440ec0c261e1d72b3b2a465364d4685385f5 -size 44330 +oid sha256:fe3d24c7991bc954c5e6a16cebcd2c8dcf17ba5b8f6bb6cb0fced872136f0770 +size 44372 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multidisable-selection--disable-row-selection-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multidisable-selection--disable-row-selection-chromium-linux.png index 38b18f669..79cd71104 100644 --- a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multidisable-selection--disable-row-selection-chromium-linux.png +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multidisable-selection--disable-row-selection-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b3e39c4804e0cd5b21db94830185405b2ca8377a894f79b48b19d2d82533a687 -size 37301 +oid sha256:e559e343bad2547b5c9f23383295681c80914d31183bce7efe825ce93a1a4746 +size 37083 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/single-selection--row-selection-initial-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/single-selection--row-selection-initial-chromium-linux.png index 71ebe01d0..5cfa8cff6 100644 --- a/playwright/snapshots/e2e/selection.spec.ts-snapshots/single-selection--row-selection-initial-chromium-linux.png +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/single-selection--row-selection-initial-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:620ff7737088bfc0b2aa67ffd16d4669ee76a6652d86941db39c41a9f1e9a86d -size 39830 +oid sha256:3b1a3cfd230af27ff9598318c584d847fbb8e2727efaac5cf1d31e18702d8967 +size 39708 diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html index 1e80f4255..71a2c5ccd 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.html +++ b/projects/ngx-datatable/src/lib/components/datatable.component.html @@ -6,7 +6,7 @@ [sorts]="sorts()" [sortType]="sortType()" [scrollbarH]="scrollbarH()" - [innerWidth]="_innerWidth" + [innerWidth]="_innerWidth()" [offsetX]="_offsetX" [dealsWithGroup]="_internalGroupedRows() !== undefined" [columns]="_internalColumns()" @@ -50,8 +50,8 @@ [offsetX]="_offsetX" [rowDetail]="rowDetail" [groupHeader]="groupHeader" - [innerWidth]="_innerWidth" - [bodyHeight]="bodyHeight" + [innerWidth]="_innerWidth()" + [bodyHeight]="bodyHeight()" [selectionType]="selectionType()" [rowIdentity]="rowIdentity" [rowClass]="rowClass()" diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts index 6b45237fd..fee202a07 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.ts +++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts @@ -655,9 +655,18 @@ export class DatatableComponent } element = inject>(ElementRef).nativeElement; - _innerWidth!: number; + readonly _innerWidth = computed(() => this.dimensions().width); pageSize!: number; - bodyHeight!: number; + readonly bodyHeight = computed(() => { + if (this.scrollbarV()) { + let height = this.dimensions().height; + if (this.headerElement) { + height = height - this.headerElement.nativeElement.getBoundingClientRect().height; + } + return height - this.footerHeight(); + } + return 0; + }); rowCount = 0; rowDiffer: IterableDiffer = inject(IterableDiffers).find([]).create(); /** This counter is increased, when the rowDiffer detects a change. This will cause an update of _internalRows. */ @@ -745,6 +754,7 @@ export class DatatableComponent // this makes horizontal scroll to appear on load even if columns can fit in view // this will be set to true once rows are available and rendered on UI private readonly _rowInitDone = signal(false); + private readonly dimensions = signal>({ height: 0, width: 0 }); constructor() { // TODO: This should be a computed signal. @@ -906,7 +916,7 @@ export class DatatableComponent forceIdx = -1, allowBleed: boolean = this.scrollbarH() ): TableColumnInternal[] { - let width = this._innerWidth; + let width = this._innerWidth(); if (!width) { return []; } @@ -941,18 +951,7 @@ export class DatatableComponent */ recalculateDims(): void { const dims = this.element.getBoundingClientRect(); - this._innerWidth = Math.floor(dims.width); - - if (this.scrollbarV()) { - let height = dims.height; - if (this.headerElement) { - height = height - this.headerElement.nativeElement.getBoundingClientRect().height; - } - if (this.footerHeight()) { - height = height - this.footerHeight(); - } - this.bodyHeight = height; - } + this.dimensions.set(dims); this.recalculatePages(); } @@ -1028,7 +1027,7 @@ export class DatatableComponent // This is because an expanded row is still considered to be a child of // the original row. Hence calculation would use rowHeight only. if (this.scrollbarV() && this.virtualization()) { - const size = Math.ceil(this.bodyHeight / (this.rowHeight() as number)); + const size = Math.ceil(this.bodyHeight() / (this.rowHeight() as number)); return Math.max(size, 0); }