Table column is not fixed even if there is nzLeft

[thanhtung1010]

Reproduction link

https://stackblitz.com/edit/angular-zqzusm-m74ef5?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

use nz-virtual-scroll vs nzleft for more than 2 column at the same time

What is expected?

The column is fixed

What is actually happening?

css property is alway 0px

Environment	Info
ng-zorro-antd	11.4.2
Browser	chrome, microsoft edge

[yor1g]

https://stackblitz.com/edit/angular-zqzusm-bxrucq?file=src%2Fapp%2Fapp.component.ts

[thanhtung1010]

https://stackblitz.com/edit/angular-zqzusm-bxrucq?file=src%2Fapp%2Fapp.component.ts

Hi @yor1g, thanks for your solution, but my order managerment screen using dynamic table, column can show/hide... So if i apply your solution, my project will have big impact and if i want update table in the future, it spend to much time and error-prone

[ttakennn]

hi @vthinkxie ,
I also have the same issue. Please help me to fix this.

[BaoSkyFall]

Hi @vthinkxie I have same issue in here. And I found that we have an array which have zero width in listOfTdElement. I just apply the code if(!data.every(item=>!item)) in filetr-measure.component.ts of line 79 and 81. I know it just a temporary solutions but I hope it help for someone when they have same issue in here.
Here is my PR Link for fix this issue. You can check it
Please check the code result below

//tr-measure.component.ts
ngAfterViewInit(): void {
    this.listOfTdElement.changes
      .pipe(startWith(this.listOfTdElement))
      .pipe(
        switchMap(
          list =>
            combineLatest(
              list.toArray().map((item: ElementRef) =>
                this.nzResizeObserver.observe(item).pipe(
                  map(([entry]) => {
                    const { width } = entry.target.getBoundingClientRect();
                    return Math.floor(width);
                  })
                )
              )
            ) as Observable<number[]>
        ),
        debounceTime(16),
        takeUntil(this.destroy$)
      )
      .subscribe(data => {
        if (this.ngZone instanceof NgZone && NgZone.isInAngularZone()) {
         --> Add this code: if(!data.every(item=>!item))
          this.listOfAutoWidth.next(data);
        } else {
         --> Add this code: if(!data.every(item=>!item))
          this.ngZone.run(() => this.listOfAutoWidth.next(data));
        }
      });
  }

[VuongKhai02]

Solution to fixed more than 2 columns of nz-table (use nzLeft)
https://stackblitz.com/edit/angular-afahjy?file=src%2Fapp%2Fapp.component.ts

[sylux6]

Solution to fixed more than 2 columns of nz-table (use nzLeft) https://stackblitz.com/edit/angular-afahjy?file=src%2Fapp%2Fapp.component.

Your solution doesn't use a virtual scroll table 😞

[BaoSkyFall]

Solution to fixed more than 2 columns of nz-table (use nzLeft) stackblitz.com/edit/angular-afahjy?file=src%2Fapp%2Fapp.component.

Your solution doesn't use a virtual scroll table 😞

Solution to fixed more than 2 columns of nz-table (use nzLeft) stackblitz.com/edit/angular-afahjy?file=src%2Fapp%2Fapp.component.ts

I will suggest my solution to fix it during author waiting to review my PR. Here is following step:

1. Pull the repository which match your current version of Ng-Zorro
2. Add the code in my solution above (Just add little code) Code here
3. Build it (You can read the package.json of library to find command build)
4. Push it into your source code management (Gitlab, Github, Bitbucket, etc ...)
5. In your project package.json, change "ng-zorro-antd": "your-gitlab.com/your-repository-library/your-branch-have-file-build",

-> Problem will be resolved. I have fixed it by using this solution
P/s: The concept is that we will customize Ng-Zorro and use it like our library