diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index f17b7ad8fb8..132d2b55169 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts @@ -274,7 +274,6 @@ export var registerConfig = [ { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, - { name: "defaultHeaderGroupMinWidth" }, { name: "columns" }, { name: "pinnedColumns" }, { name: "pinnedStartColumns" }, @@ -571,7 +570,6 @@ export var registerConfig = [ { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, - { name: "defaultHeaderGroupMinWidth" }, { name: "columns" }, { name: "pinnedColumns" }, { name: "pinnedStartColumns" }, @@ -755,7 +753,6 @@ export var registerConfig = [ { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, - { name: "defaultHeaderGroupMinWidth" }, { name: "columns" }, { name: "pinnedStartColumns" }, { name: "pinnedEndColumns" }, @@ -882,7 +879,6 @@ export var registerConfig = [ { name: "cdr" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, - { name: "defaultHeaderGroupMinWidth" }, { name: "columns" }, { name: "pinnedStartColumns" }, { name: "pinnedEndColumns" }, @@ -1034,7 +1030,6 @@ export var registerConfig = [ { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, - { name: "defaultHeaderGroupMinWidth" }, { name: "columns" }, { name: "pinnedColumns" }, { name: "pinnedStartColumns" }, diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 4fb8fe5859b..c8689d53e78 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -939,8 +939,6 @@ export interface GridType extends IGridDataBindable { /** The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling */ rowHeight: number; multiRowLayoutRowSize: number; - /** Minimal width for headers */ - defaultHeaderGroupMinWidth: any; maxLevelHeaderDepth: number; defaultRowHeight: number; /** The default font size, calculated for each element */ diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts index a2b08705437..7d4497d6847 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts @@ -76,6 +76,21 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC public expressionsList: ExpressionUI[]; public moreFiltersCount = 0; + @HostBinding('class.igx-grid-th--pinned') + public get pinnedCss() { + return this.column.pinned; + } + + @HostBinding('class.igx-grid-th--pinned-last') + public get pinnedLastCss() { + return !this.column.grid.hasColumnLayouts ? this.column.isLastPinned : false; + } + + @HostBinding('class.igx-grid-th--pinned-first') + public get pinnedFirstCSS() { + return !this.column.grid.hasColumnLayouts ? this.column.isFirstPinned : false;; + } + private baseClass = 'igx-grid__filtering-cell-indicator'; constructor( diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 1f62ef8aa99..fdd88ba2794 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -4560,24 +4560,6 @@ export abstract class IgxGridBaseDirective implements GridType, } } - /** - * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width. - * - * @remarks - * Used internally for restricting header group component width. - * The values below depend on the header cell default right/left padding values. - */ - public get defaultHeaderGroupMinWidth(): number { - switch (this.gridSize) { - case Size.Medium: - return 32; - case Size.Small: - return 24; - default: - return 48; - } - } - /** @hidden @internal */ public get pinnedStartWidth() { if (!isNaN(this._pinnedStartWidth)) { @@ -4617,17 +4599,13 @@ export abstract class IgxGridBaseDirective implements GridType, public getHeaderCellWidth(element: HTMLElement): ISizeInfo { const range = this.document.createRange(); const headerWidth = this.platform.getNodeSizeViaRange(range, - element, - element.parentElement); + element, element); const headerStyle = this.document.defaultView.getComputedStyle(element); const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) + parseFloat(headerStyle.borderRightWidth); - // Take into consideration the header group element, since column pinning applies borders to it if its not a columnGroup. - const headerGroupStyle = this.document.defaultView.getComputedStyle(element.parentElement); - const borderSize = parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth); - return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) }; + return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding) }; } /** @@ -4743,7 +4721,7 @@ export abstract class IgxGridBaseDirective implements GridType, public getHeaderGroupWidth(column: IgxColumnComponent): string { return this.hasColumnLayouts ? '' - : `${Math.max(parseFloat(column.calcWidth), this.defaultHeaderGroupMinWidth)}px`; + : `${parseFloat(column.calcWidth)}px`; } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 45273b7deae..7fb076ad2af 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -861,9 +861,9 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50); expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49); - expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48); + expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(49); expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50); - expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48); + expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(49); }); it('should size headers correctly when column width is in %.', () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts index 591b01000ed..294740a4186 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts @@ -259,7 +259,7 @@ describe('IgxGrid - Column properties #grid', () => { expect(item.width).toEqual('200px'); }); const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS)); - expect(headers[0].nativeElement.style['min-width']).toEqual('200px'); + expect(headers[0].nativeElement.clientWidth).toEqual(200); }); it('headers and cells classes should be correct after scroll horizontal', async () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 5e25e4e9274..f254c062bd5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -1888,9 +1888,12 @@ describe('IgxGrid Component Tests #grid', () => { expect(hScroll.nativeElement.hidden).toBe(true); for (let i = 0; i < grid.columnList.length; i++) { - const header = fix.debugElement.queryAll(By.css('igx-grid-header-group'))[i]; + const header = fix.debugElement.queryAll(By.css('igx-grid-header'))[i]; const cell = fix.debugElement.queryAll(By.css('igx-grid-cell'))[i]; - expect(header.nativeElement.offsetWidth).toEqual(cell.nativeElement.offsetWidth); + const headerStyle = document.defaultView.getComputedStyle(header.nativeElement); + const paddingsAndBorders = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) + + parseFloat(headerStyle.borderRightWidth); + expect(header.nativeElement.offsetWidth).toEqual(Math.max(cell.nativeElement.offsetWidth, paddingsAndBorders)); expect(Number.isInteger(header.nativeElement.offsetWidth)).toBe(true); } }); diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html index 1a6c65419ff..88e66e7512f 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html @@ -65,6 +65,8 @@ (click)="groupClicked($event)" (pointerenter)="onPinterEnter()" (pointerleave)="onPointerLeave()" + [style.max-width]="column.resolvedWidth" + [style.flex-basis]="column.resolvedWidth" > @if (column.collapsible) {
@@ -83,9 +85,7 @@ + [column]="child"> } } @@ -111,12 +111,13 @@ [ghostHost]="grid.outlet.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" + [style.width]="column.resolvedWidth" [igxColumnMovingDrop]="column" [column]="column" > @if (grid.allowFiltering && grid.filterMode === 'quickFilter') { - + } @if (!column.columnGroup && column.resizable) { + [column]="column"> } } @@ -85,9 +83,7 @@ + [column]="column"> @@ -98,8 +94,6 @@ [ngClass]="column.headerGroupClasses" [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column" - [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" - [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" [style.left]="column.rightPinnedOffset"> } diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts index 480e72b768b..6bc670cc319 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts @@ -19,7 +19,7 @@ import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering- import { IgxGridFilteringRowComponent } from '../filtering/base/grid-filtering-row.component'; import { IgxGridHeaderGroupComponent } from './grid-header-group.component'; import { IgxGridHeaderComponent } from './grid-header.component'; -import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from './pipes'; +import { IgxHeaderGroupStylePipe } from './pipes'; import { IgxGridTopLevelColumns } from '../common/pipes'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive'; @@ -37,7 +37,7 @@ import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', templateUrl: './grid-header-row.component.html', - imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe] + imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupStylePipe] }) export class IgxGridHeaderRowComponent implements DoCheck { diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index f9b319eeab4..02ce129a63b 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -55,6 +55,43 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { @ViewChild('sortIconContainer', { read: ElementRef }) protected sortIconContainer: ElementRef; + @HostBinding('class.igx-grid-th--pinned') + public get pinnedCss() { + return this.isPinned; + } + + @HostBinding('class.igx-grid-th--pinned-last') + public get pinnedLastCss() { + return this.isLastPinned; + } + + @HostBinding('class.igx-grid-th--pinned-first') + public get pinnedFirstCSS() { + return this.isFirstPinned; + } + + /** + * Gets whether the header group is stored in the last column in the pinned area. + */ + public get isLastPinned(): boolean { + return !this.grid.hasColumnLayouts ? this.column.isLastPinned : false; + } + + /** + * Gets whether the header group is stored in the first column of the right pinned area. + */ + public get isFirstPinned(): boolean { + return !this.grid.hasColumnLayouts ? this.column.isFirstPinned : false; + } + + /** + * Gets whether the header group is stored in a pinned column. + * + * @memberof IgxGridHeaderGroupComponent + */ + public get isPinned(): boolean { + return this.column.pinned; + } /** * @hidden */ @@ -76,7 +113,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { @HostBinding('attr.aria-sort') public get ariaSort() { return this.sortDirection === SortingDirection.Asc ? 'ascending' - : this.sortDirection === SortingDirection.Desc ? 'descending' : null; + : this.sortDirection === SortingDirection.Desc ? 'descending' : null; } /** @@ -300,7 +337,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { } protected isAdvancedFilterApplied() { - if(!this.grid.advancedFilteringExpressionsTree) { + if (!this.grid.advancedFilteringExpressionsTree) { return false; } return !!ExpressionsTreeUtil.find(this.grid.advancedFilteringExpressionsTree, this.column.field); diff --git a/projects/igniteui-angular/src/lib/grids/headers/pipes.ts b/projects/igniteui-angular/src/lib/grids/headers/pipes.ts index 7ba05b3e046..f779dd390f7 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/pipes.ts @@ -14,19 +14,6 @@ export class SortingIndexPipe implements PipeTransform { } } -@Pipe({ - name: 'igxHeaderGroupWidth', - standalone: true -}) -export class IgxHeaderGroupWidthPipe implements PipeTransform { - - public transform(width: any, minWidth: any, hasLayout: boolean) { - const isFitContent = width === 'fit-content'; - return hasLayout ? '' : isFitContent ? width : `${Math.max(parseFloat(width), minWidth)}px`; - } -} - - @Pipe({ name: 'igxHeaderGroupStyle', standalone: true diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html index 5d507b28fba..577a0f122e9 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html @@ -254,8 +254,8 @@ } @@ -287,8 +287,8 @@ @@ -303,8 +303,8 @@ @for (column of pinnedEndColumnCollection | igxTopLevel; track column) { } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts index 6fd9016f8f6..5f289234260 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts @@ -26,7 +26,7 @@ import { DropPosition } from '../moving/moving.service'; import { IPivotAggregator, IPivotDimension, IPivotValue, PivotDimensionType } from './pivot-grid.interface'; import { PivotUtil } from './pivot-util'; import { IgxGridTopLevelColumns } from '../common/pipes'; -import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from '../headers/pipes'; +import { IgxHeaderGroupStylePipe } from '../headers/pipes'; import { IgxExcelStyleSearchComponent } from '../filtering/excel-style/excel-style-search.component'; import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective } from '../filtering/excel-style/excel-style-filtering.component'; import { IgxDropDownItemComponent } from '../../drop-down/drop-down-item.component'; @@ -56,7 +56,7 @@ import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.compon NgTemplateOutlet, IgxGridHeaderGroupComponent, NgClass, NgStyle, IgxGridForOfDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, - IgxExcelStyleSearchComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns, + IgxExcelStyleSearchComponent, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns, IgxPivotRowHeaderGroupComponent] }) export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implements OnChanges { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html index f1ff0f00e2c..44b857d76dd 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html @@ -3,9 +3,6 @@
@if (!column.columnGroup && column.resizable) { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts index b665f9b0056..13cf4335fb1 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts @@ -146,6 +146,14 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup }; } + + protected getHeaderWidthFromDimension() { + if (this.grid.hasHorizontalLayout) { + return this.parent.width === -1 ? 'fit-content' : this.width; + } + return this.grid.rowDimensionWidth(this.parent.rootDimension); + } + private findRootDimension(field: string): IPivotDimension { const rows = this.grid.rowDimensions; let tempRow; diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts index a1838ab37bb..f3baf7b4a9f 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts @@ -157,4 +157,11 @@ export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent public override get selectable(): boolean { return false; } + + protected getHeaderWidthFromDimension() { + if (this.grid.hasHorizontalLayout) { + return this.dimWidth === -1 ? 'fit-content' : this.width; + } + return this.grid.rowDimensionWidth(this.parent.rootDimension); + } } diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html index 569372a8c9f..3bc02248080 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html @@ -1,22 +1,23 @@
- - + + - + - + {{val | date:'dd/MM/yyyy'}} - - + + + -
diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss b/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss index 7c04a23abac..8d311316b69 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.scss @@ -7,3 +7,12 @@ igx-card { text-transform: uppercase; margin: 0.7rem 0 0.3rem; } + +::ng-deep igx-grid-cell { + border-right: 1px solid lightgray; + padding: 0 7px !important; + } + + ::ng-deep igx-grid-header { + padding: 0 7px !important; +} diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts b/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts index 4f6c0632681..c5e43ff3b19 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts @@ -9,7 +9,8 @@ import { IColumnPipeArgs, IgxButtonDirective, IgxCardComponent, IgxCardContentDi providers: [], selector: 'app-grid-percantge-widths.sample', templateUrl: 'grid-percantge-widths.sample.html', - imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSelectComponent, IgxSelectItemComponent, IgxButtonDirective, CurrencyPipe, DatePipe] + styleUrls: ['grid-percantge-widths.sample.scss'], + imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSelectComponent, IgxSelectItemComponent, IgxButtonDirective, CurrencyPipe, DatePipe] }) export class GridColumnPercentageWidthsSampleComponent implements OnInit { @ViewChild('grid1', { read: IgxGridComponent, static: true })