ng-zorro-antd
ng-zorro-antd copied to clipboard
Make "noDateVirtualHeight" an input and fix spelling
Reproduction link
https://stackblitz.com/edit/ng-zorro-antd-ivy-ykibfg?file=src%2Fapp%2Fapp.component.ts
Steps to reproduce
- When using nz-table as a virtual table, set the
[nzData]
to an empty array (replicating no data). - Notice that the
nzNoResult
template is being shown inside a scrollable container.
What is expected?
-
noDateVirtualHeight
should be an@Input()
so we can customize the height based on the no data template we use. -
noDateVirtualHeight
should be renamed tonoDataVirtualHeight
.
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;
}
}
}