NG-ZORRO/ng-zorro-antd

Make "noDateVirtualHeight" an input and fix spelling

Closed this issue · 4 comments

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-ykibfg?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

  1. When using nz-table as a virtual table, set the [nzData] to an empty array (replicating no data).
  2. Notice that the nzNoResult template is being shown inside a scrollable container.

What is expected?

  1. noDateVirtualHeight should be an @Input() so we can customize the height based on the no data template we use.
  2. noDateVirtualHeight should be renamed to noDataVirtualHeight.

What is actually happening?

If using a custom [nzNoResult] template, the height is limited by the 182px given by noDateVirtualHeight variable inside table-inner-scroll.component.ts.
This causes the template to not be disaplayed completely, and is instead shown inside a scroll container.

Environment Info
ng-zorro-antd 16.2.2
Browser All

Dear @SaurabhHealum,

We appreciate your diligence in identifying and documenting the mentioned issues. A pull request has been initiated to address and resolve both concerns effectively.
PR #8457

Facing the same issue as @SaurabhHealum mentioned, not able to find any workaround for it.

Please let us know if there are any quick fixes available.

Hi @ParsaArvanehPA.
Maybe it would also be a better idea to initialise the noDataVirtualHeight to the scrollY value by default (instead of using 182px)?
When we have tables with fixed height, the height remains the same regardless of if there is any data or not. Setting the height to scrollY will ensure this.
Of course, if a user wants to alter this behaviour, the @Input() enables them to change it.

Facing the same issue as @SaurabhHealum mentioned, not able to find any workaround for it.

Please let us know if there are any quick fixes available.

In the meantime you can manually set the height; like this:

.my-table-class-name {
  nz-table-inner-scroll {
    cdk-virtual-scroll-viewport {
      height: 550px !important;
    }
  }
}