Skip to content

Commit d1fb678

Browse files
skrustevskrustev
authored
feat(pivot-grid): Improve visually when there's no data or has empty area at the bottom. (#15376)
1 parent 6f4185b commit d1fb678

File tree

7 files changed

+78
-43
lines changed

7 files changed

+78
-43
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3500,6 +3500,17 @@
35003500
}
35013501
}
35023502

3503+
.igx-pivot-grid-row-filler__wrapper {
3504+
.igx-grid-thead__wrapper {
3505+
height: 100%;
3506+
border-bottom: initial;
3507+
3508+
.igx-grid-th {
3509+
height: 100%;
3510+
}
3511+
}
3512+
}
3513+
35033514
%igx-grid__tbody-pivot-mrl-dimension {
35043515
.igx-grid-th {
35053516
border-bottom: none;

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@
157157
[width]="rowDimensionWidthToPixels(dim)">
158158
</igx-pivot-row-dimension-content>
159159
</ng-template>
160+
<ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(dim) }"></ng-container>
160161
</div>
161162
}
162163
</ng-template>
@@ -175,20 +176,22 @@
175176
<igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>
176177
</ng-template>
177178
}
179+
<ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: pivotRowWidths }"></ng-container>
178180
</div>
179181
</ng-template>
180182

181183
<ng-template #emptyRowDimensionsTemplate>
182-
@if (columnDimensions.length > 0 || values.length > 0) {
183-
<div tabindex="0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
184+
<div tabindex="0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
185+
@if ((columnDimensions.length > 0 || values.length > 0) && data.length > 0) {
184186
<igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
185187
[dimension]="emptyRowDimension"
186188
[rootDimension]="emptyRowDimension"
187189
[rowIndex]="0" [rowData]="dataView[0]"
188190
[width]="rowDimensionWidthToPixels(emptyRowDimension)">
189191
</igx-pivot-row-dimension-content>
190-
</div>
191-
}
192+
}
193+
<ng-container *ngTemplateOutlet="emptyRowDimensionFill; context: { $implicit: this, widthPx: rowDimensionWidthToPixels(emptyRowDimension) }"></ng-container>
194+
</div>
192195
</ng-template>
193196

194197
<ng-template #emptyPivotGridTemplate>
@@ -197,6 +200,17 @@
197200
</span>
198201
</ng-template>
199202

203+
<ng-template #emptyRowDimensionFill let-width="widthPx">
204+
@if (emptyBottomSize > 0) {
205+
<div class="igx-pivot-grid-row-filler__wrapper" [style.height.px]="emptyBottomSize" [style.width.px]="width">
206+
<!-- Reuse header styles to keep visuals consistent -->
207+
<div class="igx-grid-thead__wrapper">
208+
<div class="igx-grid-th"></div>
209+
</div>
210+
</div>
211+
}
212+
</ng-template>
213+
200214
<div [hidden]="true">
201215
<igx-grid-excel-style-filtering [maxHeight]="excelStyleFilterMaxHeight" [minHeight]="excelStyleFilterMinHeight">
202216
<div igxExcelStyleColumnOperations [hidden]="true"></div>

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1148,6 +1148,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11481148
return false;
11491149
}
11501150

1151+
protected get emptyBottomSize() {
1152+
return this.totalHeight - (<any>this.verticalScroll).scrollComponent.size;
1153+
}
1154+
11511155
/** @hidden @internal */
11521156
public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) {
11531157
options.outlet = this.outlet;
@@ -1286,8 +1290,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
12861290

12871291
/** @hidden @internal */
12881292
public get pivotContentCalcWidth() {
1289-
const totalDimWidth = this.rowDimensions.length > 0 ?
1290-
this.rowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
1293+
if (!this.visibleRowDimensions.length) {
1294+
return Math.max(0, this.calcWidth - this.pivotRowWidths);
1295+
}
1296+
1297+
const totalDimWidth = this.visibleRowDimensions.length > 0 ?
1298+
this.visibleRowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
12911299
0;
12921300
return this.calcWidth - totalDimWidth;
12931301
}

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@
247247
</div>
248248
}
249249

250-
@if (grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0) {
250+
@if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {
251251
<div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="grid.pivotRowWidths - 1">
252252
@for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {
253253
@if (getRowDimensionColumn(dim); as dimCol) {
@@ -277,20 +277,20 @@
277277
</igx-grid-header-group>
278278
}
279279
}
280-
<div class="igx-grid-thead--virtualizationWrapper" [style.max-height.px]='maxContainerHeight' (click)="grid.navigation.focusOutRowHeader($event)">
280+
<div class="igx-grid-thead--virtualizationWrapper" [style.max-height.px]="maxContainerHeight" (click)="grid.navigation.focusOutRowHeader($event)">
281281
@for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {
282-
<div class="igx-grid-thead__group igx-grid-thead--virtualizationContainer" [style.height.px]='totalDepth > 1 ? grid.rowHeight : undefined' [style.width.px]='grid.unpinnedWidth'>
282+
<div class="igx-grid-thead__group igx-grid-thead--virtualizationContainer" [style.height.px]="totalDepth > 1 ? grid.rowHeight : undefined" [style.width.px]="grid.unpinnedWidth">
283283
<ng-template igxGridFor #headerVirtualContainer let-column
284-
[igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]="grid.parentVirtDir"
284+
[igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache]="true" [igxForScrollContainer]="grid.parentVirtDir"
285285
[igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
286286
[igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
287287
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
288-
[style.height.px]='totalDepth > 1 ? calcHeight(column, i) : undefined'
288+
[style.height.px]="totalDepth > 1 ? calcHeight(column, i) : undefined"
289289
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
290290
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
291291
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
292-
[class.igx-grid__tr-pivot--columnDimensionLeaf] = 'isDuplicateOfExistingParent(column, i)'
293-
[class.igx-grid__tr-pivot--columnMultiRowSpan] = 'isMultiRow(column, i)'
292+
[class.igx-grid__tr-pivot--columnDimensionLeaf]="isDuplicateOfExistingParent(column, i)"
293+
[class.igx-grid__tr-pivot--columnMultiRowSpan]="isMultiRow(column, i)"
294294
>
295295
</igx-grid-header-group>
296296
</ng-template>

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
6666
public filterDropdownDimensions: Set<any> = new Set<any>();
6767
public filterAreaDimensions: Set<any> = new Set<any>();
6868
private _dropPos = DropPosition.AfterDropTarget;
69-
private valueData: Map<string, IPivotAggregator[]>;
7069
private _subMenuPositionSettings: PositionSettings = {
7170
verticalStartPoint: VerticalAlignment.Bottom,
7271
closeAnimation: undefined
@@ -188,7 +187,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
188187
if (columnDimensions.length === 0) {
189188
return 1;
190189
}
191-
let totalDepth = columnDimensions.map(x => PivotUtil.getDimensionDepth(x) + 1).reduce((acc, val) => acc + val);
190+
let totalDepth = columnDimensions.map(x => this.grid.data.length > 0 ? PivotUtil.getDimensionDepth(x) + 1 : 0).reduce((acc, val) => acc + val);
192191
if (this.grid.hasMultipleValues) {
193192
totalDepth += 1;
194193
}

‎src/app/pivot-grid-state/pivot-grid-state.sample.html‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
<div class="sample-flex-row">
2-
<button igxButton="outlined" (click)="saveState()">SAVE STATE</button>
3-
<button igxButton="contained" (click)="restoreState()">RESTORE STATE</button>
4-
<button igxButton="contained" (click)="export()">EXPORT</button>
5-
<igx-switch [checked]="pivotUI.showRowHeaders" (change)="onShowHeadersToggle($event)">Show headers</igx-switch>
6-
<igx-switch [checked]="pivotUI.rowLayout === 'horizontal'" (change)="onLayoutToggle($event)">Horizontal layout</igx-switch>
7-
<div class="pivot-container">
82
<div>
9-
<igx-pivot-grid
10-
#grid1
11-
[igxGridState]="options"
12-
(valueInit)='onValueInit($event)'
13-
(dimensionInit)='onDimensionInit($event)'
14-
[data]="origData"
15-
[width]="'100%'"
16-
[height]="'800px'"
17-
[superCompactMode]="true"
18-
[defaultExpandState]="true"
19-
[pivotConfiguration]="pivotConfigHierarchy"
20-
[pivotUI]="pivotUI"
21-
[allowFiltering]="true"
22-
[filterMode]="'quickFilter'"
23-
[rowSelection]="'single'"
24-
>
25-
<ng-template igxPivotRowDimensionHeader let-col>
26-
<span>{{col.header}} 📐</span>
27-
</ng-template>
28-
</igx-pivot-grid>
3+
<button igxButton="outlined" (click)="saveState()">SAVE STATE</button>
4+
<button igxButton="contained" (click)="restoreState()">RESTORE STATE</button>
5+
<button igxButton="contained" (click)="export()">EXPORT</button>
6+
<igx-switch [checked]="pivotUI.showRowHeaders" (change)="onShowHeadersToggle($event)">Show headers</igx-switch>
7+
<igx-switch [checked]="pivotUI.rowLayout === 'horizontal'" (change)="onLayoutToggle($event)">Horizontal layout</igx-switch>
8+
</div>
9+
<div class="pivot-container">
10+
<div style="width: 100%;">
11+
<igx-pivot-grid
12+
#grid1
13+
[igxGridState]="options"
14+
(valueInit)='onValueInit($event)'
15+
(dimensionInit)='onDimensionInit($event)'
16+
[data]="origData"
17+
[width]="'100%'"
18+
[height]="'800px'"
19+
[superCompactMode]="true"
20+
[defaultExpandState]="true"
21+
[pivotConfiguration]="pivotConfigHierarchy"
22+
[pivotUI]="pivotUI"
23+
[allowFiltering]="true"
24+
[filterMode]="'quickFilter'"
25+
[rowSelection]="'single'"
26+
>
27+
<ng-template igxPivotRowDimensionHeader let-col>
28+
<span>{{col.header}} 📐</span>
29+
</ng-template>
30+
</igx-pivot-grid>
31+
</div>
32+
<igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
2933
</div>
30-
<igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
3134
</div>

‎src/app/pivot-grid-state/pivot-grid-state.sample.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ igx-pivot-grid {
1313
}
1414

1515
.sample-flex-row {
16-
align-items: center;
1716
display: flex;
17+
flex-direction: column;
1818
flex-wrap: wrap;
1919
gap: 16px;
2020
margin-bottom: 16px;

0 commit comments

Comments
 (0)