Column distribution fails when updating from ng18 to 19.

[sommmen]

I am running into an issue angular ng18 to 19.
Using package "@siemens/ngx-datatable": "^22.4.1",.

Not all tables are affected, this one works as-is:

<ngx-datatable #table class="material" [rows]="collectionResponseModel.items" [columnMode]="'force'" [headerHeight]="50"
  [footerHeight]="50" [externalPaging]="true" [count]="collectionResponseModel.totalCount" [offset]="tableInfo.offset"
  [limit]="tableInfo.limit" (sort)="onSort($event)" [loadingIndicator]="isLoading" (page)='setPage($event)'>

  <ngx-datatable-column name="" prop="" [flexGrow]="0.75">
    <ng-template let-row="row" let-value="value" let-expanded="expanded" ngx-datatable-cell-template>
      <fa-icon class="me-1" style="cursor:pointer;" [icon]="expanded ? iconCollapse : iconExpand"
        (click)="toggleExpandRow(row, expanded)"></fa-icon>
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="{{ 'coupon.code' | translate }}" prop="discountCode" [flexGrow]="1">
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      {{value}}
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="{{ 'general.amount' | translate }}" prop="total" [flexGrow]="1">
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      {{value}}
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="{{ 'general.domain' | translate }}" prop="domain.name" [flexGrow]="1">
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      {{value}}
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="{{ 'general.totalExclVat' | translate }}" prop="totalExclVat" [flexGrow]="1">
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      {{ value | currency: 'EUR' }}
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="{{ 'Vroegste besteldatum' }}" prop="earliestOrderDateTime" [flexGrow]="1" [minWidth]="100">
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        <span title="{{value}}" ngbTooltip="{{value | appDate: 'HH:mm'}}">{{value | appDate}}</span>
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="" prop="externalCouponId" [flexGrow]="1" [maxWidth]="80" [sortable]="false">
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      <a href="https://{{row.domain.name}}/wp-admin/post.php?post={{value}}&action=edit" class="btn btn-sm"
        target="_blank" title="View in WordPress">
        <fa-icon [icon]="iconEye"></fa-icon>
      </a>
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-row-detail>
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
      <app-backoffice-orders-table
          [showFilters]="false"
          [collectionRequestModel]="row.collectionHttpRequestOptions"></app-backoffice-orders-table>
    </ng-template>
  </ngx-datatable-row-detail>

</ngx-datatable>

Even more odd is the users table. This starts off by working normally, then i paginate, 1, 2, 3 and then back to 2. Now suddenly it becomes messed up:

It may have something to do with overflow looking at this table;

There is #137 which points to the 'force' mode as the culprit but this seems to happen with or without using 'force'.
This one uses 'flex':

<ngx-datatable #table class="material" [rows]="collectionResponseModel.items" [columnMode]="'flex'"
            [headerHeight]="50" [footerHeight]="50"  [externalPaging]="true"
            [count]="collectionResponseModel.totalCount" [offset]="tableInfo.offset"
            [limit]="tableInfo.limit" [loadingIndicator]="isLoading" (page)='setPage($event)'
            (sort)='onSort($event, true)' [sorts]="sorts" [summaryRow]="enableSummary && collectionResponseModel.items.length > 1"
            [summaryPosition]="summaryPosition" [scrollbarH]="true">

            <ngx-datatable-column name="" prop="" [flexGrow]="0.5" [minWidth]="50" [sortable]="false"
            [summaryTemplate]="detailSumTemplate">
                <ng-template let-row="row" let-value="value" let-expanded="expanded"
                    ngx-datatable-cell-template>
                    <fa-icon class="me-1" style="cursor:pointer;" [class.datatable-icon-right]="!expanded"
                        [class.datatable-icon-down]="expanded"
                        (click)="toggleExpandRow(row, expanded)"></fa-icon>
                </ng-template>

                <ng-template #detailSumTemplate>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="{{ 'Order' }}" prop="number" [flexGrow]="1" [minWidth]="100">
                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>

                    <span [title]="type" *ngIf="row.type as type" class="me-1">
                        @if(type === 1) {
                            <b>?</b>
                        } 
                        @else if(type === 2) {
                            <fa-icon [icon]="iconSorry" [ngbTooltip]="'Sorry kaart'"></fa-icon>
                        }
                        @else if(type === 3) {
                            <fa-icon [icon]="iconSample" [ngbTooltip]="'Sample Kaart'"></fa-icon>
                        }
                        @else if(type === 4 || type === 5) {
                            <fa-icon [icon]="iconManual" [ngbTooltip]="'Handmatige kaart'"></fa-icon>
                        }
                        @else {
                            {{type}}
                        }
                    </span>

                    <span [title]="value">{{value}}</span>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="{{ 'Locatie' }}" prop="city" [flexGrow]="1" [minWidth]="125">
                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                    <span [title]="row.country">{{ row.country | appFlag }} </span><span [title]="value">{{value}}</span>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="{{ 'Triggerdatum' }}" prop="triggerDateTime" [flexGrow]="1" [minWidth]="100">
                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                    <span title="{{value}}" ngbTooltip="{{value | appDate: 'HH:mm'}}">{{value | appDate}}</span>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="{{ 'Besteldatum' }}" prop="orderDateTime" [flexGrow]="1" [minWidth]="100">
                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                    <span title="{{value}}" ngbTooltip="{{value | appDate: 'HH:mm'}}">{{value | appDate}}</span>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="{{ 'Werknemer' }}" prop="employeeName" [flexGrow]="1" [minWidth]="100">
                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                    <span [title]="value">{{value}}</span>
                </ng-template>
            </ngx-datatable-column>

            <ngx-datatable-column name="{{ 'Kortingscode' }}" prop="couponCode" [flexGrow]="1" [minWidth]="125">
                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                    <span [title]="value">{{value}}</span>
                </ng-template>
            </ngx-datatable-column>
                      
            <!-- Row Detail Template -->
            <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow>
                <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>

                    <!-- Redacted -->
                </ng-template>
            </ngx-datatable-row-detail>

        </ngx-datatable>

[sommmen]

@spike-rabbit @chintankavathia hiya - having some issues when updating to ng19.
Quick question: Is your app already on ng19 and working as expected? trying to find out what causes this issue a bit more.

[spike-rabbit]

We have some rendering issues in the table which we are planning to solve. I don't know if this is related to those. It is weird that this is introduced by a new angular version.

Within Siemens we did not receive any reports yet related to the angular update.
You would help us a lot if you can setup a reproduction repository / stackblitz which we can use to reproduce the problem.

[sommmen]

We have some rendering issues in the table which we are planning to solve. I don't know if this is related to those. It is weird that this is introduced by a new angular version.

Within Siemens we did not receive any reports yet related to the angular update.
You would help us a lot if you can setup a reproduction repository / stackblitz which we can use to reproduce the problem.

I had to migrate a bunch of other packages and basically did an update of all packages cause updating fell behind a bit the last couple of months...

Aside from this we have some custom css also.

Anyways from your response it seems that the project should run fine on ng19.

I'll try and get a repro. I messed around with stackblitz and the ide but had issues running commands to get an app.component file - I'll try doing a GitHub repo instead when I have the time.

[sommmen]

note to self;

Isolating the package in a seperate repo does not give a reproducible project.
Stripping all custom css the 'bootstrap' variant looks better. 'material' seems to have a lot of issues where overflow causes the columns to be set apart - sometimes it also looks like all columns get flex auto and are pushed to the left.

Things to try would be to check with async loading in the repro. We can also strip all modules from the main project except a sample one which should give a better repro but even then its very hard to see where the issue could be.