Skip to content

Commit f659724

Browse files
dkamburovdkamburov
committed
feat(grid-pinning): Implement basic right pinning #6676 
1 parent 46bfd17 commit f659724

File tree

10 files changed

+98
-18
lines changed

10 files changed

+98
-18
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,10 @@
245245
@extend %grid-cell--pinned-last !optional;
246246
}
247247

248+
@include e(th, $m: pinned-first) {
249+
@extend %grid-cell--pinned-first !optional;
250+
}
251+
248252
@include e(th, $m: fw) {
249253
@extend %grid-cell--fixed-width !optional;
250254
}
@@ -327,6 +331,11 @@
327331
@extend %grid-cell--pinned-last !optional;
328332
}
329333

334+
@include e(td, $m: pinned-first) {
335+
@extend %grid-cell--pinned !optional;
336+
@extend %grid-cell--pinned-first !optional;
337+
}
338+
330339
@include e(td, $m: pinned-end) {
331340
@extend %grid-cell-pinned--end !optional;
332341
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1296,6 +1296,15 @@
12961296
}
12971297
}
12981298

1299+
%grid-cell--pinned-first {
1300+
border-#{$left}: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;
1301+
1302+
&%grid-cell--editing {
1303+
border-#{$left}: map-get($cell-pin, 'style') --var($theme, 'cell-selected-background') !important;
1304+
}
1305+
}
1306+
1307+
12991308
%grid-cell-header {
13001309
flex-flow: row nowrap;
13011310
justify-content: space-between;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,14 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
330330
@HostBinding('class.igx-grid__td--pinned-last')
331331
lastPinned = false;
332332

333+
/**
334+
* @hidden
335+
* @internal
336+
*/
337+
@Input()
338+
@HostBinding('class.igx-grid__td--pinned-first')
339+
firstPinned = false;
340+
333341
/**
334342
* Returns whether the cell is in edit mode.
335343
*/

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import {
4444
IgxFilterCellTemplateDirective
4545
} from './templates.directive';
4646
import { MRLResizeColumnInfo, MRLColumnSizeInfo } from './interfaces';
47+
import { ColumnPinningPosition } from '../common/enums';
4748

4849
/**
4950
* **Ignite UI for Angular Column** -
@@ -916,9 +917,16 @@ export class IgxColumnComponent implements AfterContentInit {
916917

917918
if (!this.pinned) {
918919
const indexInCollection = unpinnedColumns.indexOf(col);
919-
vIndex = indexInCollection === -1 ? -1 : pinnedColumns.length + indexInCollection;
920+
vIndex = indexInCollection === -1 ?
921+
-1 :
922+
(this.grid.isPinningToStart ?
923+
pinnedColumns.length + indexInCollection :
924+
indexInCollection);
920925
} else {
921-
vIndex = pinnedColumns.indexOf(col);
926+
const indexInCollection = pinnedColumns.indexOf(col);
927+
vIndex = this.grid.isPinningToStart ?
928+
indexInCollection :
929+
unpinnedColumns.length + indexInCollection;
922930
}
923931
this._vIndex = vIndex;
924932
return vIndex;
@@ -986,8 +994,20 @@ export class IgxColumnComponent implements AfterContentInit {
986994
}
987995

988996
get isLastPinned(): boolean {
989-
return this.grid.pinnedColumns[this.grid.pinnedColumns.length - 1] === this;
997+
return this.grid.isPinningToStart &&
998+
this.grid.pinnedColumns[this.grid.pinnedColumns.length - 1] === this;
990999
}
1000+
1001+
get isFirstPinned(): boolean {
1002+
return !this.grid.isPinningToStart && this.grid.pinnedColumns[0] === this;
1003+
}
1004+
1005+
get rightPinnedOffset(): string {
1006+
return this.pinned ?
1007+
- this.grid.pinnedWidth + 'px' :
1008+
null;
1009+
}
1010+
9911011
get gridRowSpan(): number {
9921012
return this.rowEnd && this.rowStart ? this.rowEnd - this.rowStart : 1;
9931013
}

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1939,6 +1939,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
19391939
@ContentChildren(IgxHeadSelectorDirective, { read: IgxHeadSelectorDirective, descendants: false })
19401940
public headSelectorsTemplates: QueryList<IgxHeadSelectorDirective>;
19411941

1942+
/**
1943+
* @hidden
1944+
* @internal
1945+
*/
1946+
get isPinningToStart() {
1947+
return this.pinning.columns !== ColumnPinningPosition.End;
1948+
}
1949+
19421950
/**
19431951
* @hidden
19441952
* @internal

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,19 @@
1616
</ng-container>
1717

1818
<ng-container *ngIf="!grid.hasColumnLayouts">
19-
<ng-container *ngIf="pinnedColumns.length > 0">
19+
<ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
2020
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxNotGrouped">
2121
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
2222
</ng-template>
2323
</ng-container>
2424
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='"calcPixelWidth"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
2525
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
2626
</ng-template>
27+
<ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
28+
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxNotGrouped">
29+
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
30+
</ng-template>
31+
</ng-container>
2732
</ng-container>
2833

2934
<ng-container *ngIf="grid.hasColumnLayouts">
@@ -81,11 +86,13 @@
8186
[formatter]="col.formatter"
8287
[row]="this"
8388
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
89+
[firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
8490
[style.min-height.px]="grid.rowHeight || 32"
8591
[rowData]="rowData"
8692
[style.min-width]="col.width"
8793
[style.max-width]="col.width"
8894
[style.flex-basis]="col.width"
95+
[style.left]="col.rightPinnedOffset"
8996
[width]="col.getCellWidth()"
9097
[visibleColumnIndex]="col.visibleIndex"
9198
[value]="rowData[col.field]"

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
</ng-template>
7171
</div>
7272
</ng-container>
73-
<ng-container *ngIf="pinnedColumns.length > 0">
73+
<ng-container *ngIf="pinnedColumns.length > 0 && isPinningToStart">
7474
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
7575
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
7676
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
@@ -83,6 +83,12 @@
8383
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
8484
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
8585
</ng-template>
86+
<ng-container *ngIf="pinnedColumns.length > 0 && !isPinningToStart">
87+
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
88+
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
89+
[style.flex-basis]="getHeaderGroupWidth(col)" [style.left]="col.rightPinnedOffset"></igx-grid-header-group>
90+
</ng-template>
91+
</ng-container>
8692
</div>
8793
<igx-grid-filtering-row #filteringRow [style.width.px]='calcWidth' *ngIf="filteringService.isFilterRowVisible"
8894
[column]="filteringService.filteredColumn"></igx-grid-filtering-row>
@@ -182,11 +188,12 @@
182188
</div>
183189

184190
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
185-
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
191+
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || !isPinningToStart"></div>
186192
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
187193
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>
188194
</ng-template>
189195
</div>
196+
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
190197
</div>
191198

192199
<div class="igx-grid__footer" #footer>

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
122122
const classList = {
123123
'igx-grid__th--pinned': this.isPinned,
124124
'igx-grid__th--pinned-last': this.isLastPinned,
125+
'igx-grid__th--pinned-first': this.isFirstPinned,
125126
'igx-grid__drag-col-header': this.isHeaderDragged,
126127
'igx-grid__th--filtering': this.isFiltered
127128
};
@@ -169,6 +170,14 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
169170
return !this.grid.hasColumnLayouts ? this.column.isLastPinned : false;
170171
}
171172

173+
/**
174+
* Gets whether the header group is stored in the first column of the right pinned area.
175+
* @memberof IgxGridHeaderGroupComponent
176+
*/
177+
get isFirstPinned(): boolean {
178+
return !this.grid.hasColumnLayouts ? this.column.isFirstPinned : false;
179+
}
180+
172181
@HostBinding('style.display')
173182
get groupDisplayStyle(): string {
174183
return this.grid.hasColumnLayouts && this.column.children && !isIE() ? 'flex' : '';

‎src/app/grid-column-pinning/grid-column-pinning.sample.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</app-page-header>
55
<div class="sample-content">
66
<div class="sample-column">
7-
<igx-grid #grid1 [data]="data" [width]="'1200px'" [height]="'800px'" [rowSelectable]="true">
7+
<igx-grid [pinning]="pinningConfig" #grid1 [data]="data" [width]="'800px'" [height]="'800px'" [rowSelectable]="true">
88
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned'
99
[hidden]='c.hidden'>
1010
</igx-column>

‎src/app/grid-column-pinning/grid-column-pinning.sample.ts‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { IgxGridComponent } from 'igniteui-angular';
2+
import { IgxGridComponent, ColumnPinningPosition } from 'igniteui-angular';
3+
import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
34

45
@Component({
56
providers: [],
@@ -10,6 +11,8 @@ import { IgxGridComponent } from 'igniteui-angular';
1011

1112
export class GridColumnPinningSampleComponent implements OnInit {
1213

14+
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
15+
1316
@ViewChild('grid1', { static: true })
1417
grid1: IgxGridComponent;
1518

@@ -18,16 +21,16 @@ export class GridColumnPinningSampleComponent implements OnInit {
1821

1922
ngOnInit(): void {
2023
this.columns = [
21-
{ field: 'ID', width: '5%', hidden: false },
22-
{ field: 'CompanyName', width: '5%' },
23-
{ field: 'ContactName', width: '5%', pinned: false },
24-
{ field: 'ContactTitle', width: '25%', pinned: false },
25-
{ field: 'Address', width: '10%' },
26-
{ field: 'City', width: '10%' },
27-
{ field: 'Region', width: '10%' },
28-
{ field: 'PostalCode', width: '10%' },
29-
{ field: 'Phone', width: '10%' },
30-
{ field: 'Fax', width: '10%' }
24+
{ field: 'ID', width: '200px', hidden: false },
25+
{ field: 'CompanyName', width: '200px' },
26+
{ field: 'ContactName', width: '200px', pinned: false },
27+
{ field: 'ContactTitle', width: '300px', pinned: false },
28+
{ field: 'Address', width: '250px' },
29+
{ field: 'City', width: '200px' },
30+
{ field: 'Region', width: '300px' },
31+
{ field: 'PostalCode', width: '150px' },
32+
{ field: 'Phone', width: '200px' },
33+
{ field: 'Fax', width: '200px' }
3134
];
3235

3336
this.data = [

0 commit comments

Comments
 (0)