htmlcssangularng-zorro-antd

ng zorro table column is not fixed even if there is nzLeft

I am using Angular to build a project. Inside a component i have a table with some data. This table comes from ng-zorro table module.

My problem is that even after setting a table column or head with the property nzLeft the column doesn't stay fixed therefore the nzLeft doesn't work.

I have tried to do it on an angular 14 project like this in stackblitz and there it works: https://stackblitz.com/edit/angular-bmcpmo?file=src%2Fapp%2Fapp.component.ts

Here is my package.json

{
  "name": "ore-commesse-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/core": "14.1.0",
    "@angular/forms": "14.1.0",
    "@angular/common": "14.1.0",
    "@angular/router": "14.1.0",
    "@angular/compiler": "14.1.0",
    "@angular/animations": "14.1.0",
    "@angular/platform-browser": "14.1.0",
    "@angular/platform-browser-dynamic": "14.1.0",
    "@angular/cdk": "14.1.0",
    "@ant-design/icons": "^4.7.0",
    "@ant-design/icons-angular": "^13.1.0",
    "@auth0/angular-jwt": "^5.0.2",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@popperjs/core": "^2.10.2",
    "bootstrap": "^4.6.1",
    "ng-zorro-antd": "^13.4.0",
    "ngx-toastr": "^15.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "typescript": "^4.7.4",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.2",
    "@angular/cli": "^14.0.2",
    "@angular/compiler-cli": "^14.0.3",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0"
  }
}

And here is my table html component registration-statistic-component.html:

<nz-table #fixedTable [nzData]="listOfData" [nzScroll]="{ x: '1150px', y: '240px' }">
  <thead>
    <tr>
      <th nzWidth="200px" nzLeft>Full Name</th>
      <th nzLeft>Age</th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th nzRight>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzLeft>{{ data.name }}</td>
      <td nzLeft>{{ data.age }}</td>
      <td>{{ data.address }}</td>
      <td>{{ data.address }}</td>
      <td>{{ data.address }}</td>
      <td>{{ data.address }}</td>
      <td>{{ data.address }}</td>
      <td>{{ data.address }}</td>
      <td>{{ data.address }}</td>
      <td>{{ data.address }}</td>
      <td nzRight>
        <a>action</a>
      </td>
    </tr>
  </tbody>
</nz-table>

And this is my registration-statistic.module.ts

import { NzTableModule } from 'ng-zorro-antd/table';
import { RegistrationStatisticRoutingModule } from './registration-statistic-routing.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegistrationStatisticComponent } from './pages/registration-statistic.component';



@NgModule({
  declarations: [
    RegistrationStatisticComponent
  ],
  imports: [
    CommonModule,
    RegistrationStatisticRoutingModule,
    NzTableModule
  ]
})
export class RegistrationStatisticModule { }

In the StackBlitz example everything works as expected: the first two column and the last one are fixed as they should be. In my example the column isn't fixed and i am basically scrolling over it like this:

My table example

Does anyone knows the possible solution to this problem?

Solution

  • Well after a little bit i discovered what the problem was:

    Specifically i had this, removing it fixed the issue:

    .ant-table-measure-now {
  display: none;
}