White space after filter is applied.
Tzvetelin88 opened this issue · 4 comments
Describe the bug
White space appear on the Datagrid component after applying filter to recude the items.
How to reproduce
Code sample:
<clr-dg-column [clrDgField]="'domainType'">
<ng-container *clrDgHideableColumn="{ hidden: false }">
Domain Type
</ng-container>
</clr-dg-column>
<clr-dg-column [clrDgField]="'productType'">
<ng-container *clrDgHideableColumn="{ hidden: false }">
Product Type
</ng-container>
</clr-dg-column>
<clr-dg-column [clrDgField]="'productAddress'">
<ng-container *clrDgHideableColumn="{ hidden: false }">
Product Address
</ng-container>
</clr-dg-column>
<clr-dg-column [clrDgField]="'productVersion'">
<ng-container *clrDgHideableColumn="{ hidden: false }">
Product Version
</ng-container>
</clr-dg-column>
<clr-dg-row
*clrDgItems="let domain of wld.domains.data"
[clrDgItem]="domain"
>
<clr-dg-cell>{{ domain.domainType }}</clr-dg-cell>
<clr-dg-cell>{{ domain.productType }}</clr-dg-cell>
<clr-dg-cell>{{ domain.productAddress }}</clr-dg-cell>
<clr-dg-cell>{{ domain.productVersion }}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
<clr-dg-pagination #pagination [clrDgPageSize]="10">
<clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50]"
>Items per page</clr-dg-page-size
>
{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
{{ pagination.totalItems }} items
</clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
Steps to reproduce the behavior:
- Load Datagrid component with 20 items. Example from test env:
- Apply filter which will reduce the number of displayed items. Example after filter:
- White space will appear on the bottom.
Expected behavior:
Datagrid to compact white space and do not appear.
Versions
Clarity project:
- Clarity Core
- Clarity Angular/UI
Clarity version:
- v3.x
- v4.x
- v5.x
Framework:
- Angular
- React
- Vue
- Other:
Framework version:
Angular 13
Device:
- Type: MacBook
- OS: iOS
- Browser Chrome, Firefox
- Version 98.0.4758.102
Additional notes
Add any other notes about the problem here.
Hello @Tzvetelin88 - If I understand correctly the concern here is that when there are fewer rows than the height of the datagrid there is white space below the rows. Please let me know if I am mistaken.
This is working as intended. When a datagrid has pagination declared we can't know how many rows there will be on the last page. A UX choice was made to fix the height of the datagrid so that UI's avoided a vertical jumping effect on the page content when the number of rows was less than the rows / page value and there is pagination enabled. In the case above, this also applies when a user filters the data set.
I'm going to close this as no fix needed b/c I believe the datagrid is working as intended.
Hello @hippee-lee , yes this is right - when there are fewer rows than the height of the datagrid there is white space below the rows.
Is there a way to by-pass fixed height and eliminate white space - based on the rows(like the example above), even if we sacrifice jumping effect?
Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.