IgxColumnComponent

Ignite UI for Angular Column - Documentation

The Ignite UI Column is used within an igx-grid element to define what data the column will show. Features such as sorting, filtering & editing are enabled at the column level. You can also provide a template containing custom content inside the column using ng-template which will be used for all cells within the column.

Constructors

new IgxColumnComponent(): IgxColumnComponent

Returns IgxColumnComponent

Properties

additionalTemplateContext

Sets/gets custom properties provided in additional template context.

<igx-column [additionalTemplateContext]="contextObject">
  <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
     {{ props }}
  </ng-template>
</igx-column>

additionalTemplateContext: any

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:878

autosizeHeader

Sets/gets whether the column header is included in autosize logic. Useful when template for a column header is sized based on parent, for example a default div. Default value is false.

let isResizable = this.column.resizable;

<igx-column [resizable] = "true"></igx-column>

autosizeHeader: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:299

cellClasses

Sets a conditional class selector of the column cells. Accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean, like so:

callback = (rowData, columnKey, cellValue, rowIndex) => { return rowData[columnKey] > 6; }
cellClasses = { 'className' : this.callback };

<igx-column [cellClasses] = "cellClasses"></igx-column>
<igx-column [cellClasses] = "{'class1' : true }"></igx-column>

cellClasses: any

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:647

cellStyles

Sets conditional style properties on the column cells. Similar to ngStyle it accepts an object literal where the keys are the style properties and the value is the expression to be evaluated. As with cellClasses it accepts a callback function.

styles = {
 background: 'royalblue',
 color: (rowData, columnKey, cellValue, rowIndex) => value.startsWith('Important') ? 'red': 'inherit'
}

<igx-column [cellStyles]="styles"></igx-column>

cellStyles: any = null

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:670

children

Sets/gets the children columns.

let columnChildren = this.column.children;

children: QueryList<IgxColumnComponent>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1820

colEnd

Column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field

<igx-column-layout>
  <igx-column [colEnd]="3" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>

colEnd: number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:836

colStart

Column index from which the field is starting.

<igx-column-layout>
  <igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>

colStart: number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:862

dataType

Sets/gets the data type of the column values. Default value is string.

let columnDataType = this.column.dataType;

<igx-column [dataType] = "'number'"></igx-column>

dataType: GridColumnDataType = GridColumnDataType.String

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:804

disableHiding

Gets whether the hiding is disabled.

let isHidingDisabled =  this.column.disableHiding;

disableHiding: boolean = false

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:456

disablePinning

Gets whether the pinning is disabled.

let isPinningDisabled =  this.column.disablePinning;

disablePinning: boolean = false

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:468

expandedChange

Emitted when the column expanded or collapsed.

<igx-column (expandedChange)="expandedChange($event)">
</igx-column>

expandedChange: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:431

filterable

Sets/gets whether the column is filterable. Default value is true.

let isFilterable = this.column.filterable;

<igx-column [filterable] = "false"></igx-column>

filterable: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:267

filteringIgnoreCase

Sets/gets whether the column filtering should be case sensitive. Default value is true.

let filteringIgnoreCase = this.column.filteringIgnoreCase;

<igx-column [filteringIgnoreCase] = "false"></igx-column>

filteringIgnoreCase: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:759

formatter

Applies display format to cell values in the column. Does not modify the underlying data.

formatter: object

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:710

Remarks

Note: As the formatter is used in places like the Excel style filtering dialog, in certain scenarios (remote filtering for example), the row data argument can be undefined.

In this example, we check to see if the column name is Salary, and then provide a method as the column formatter to format the value into a currency string.

Example

columnInit(column: IgxColumnComponent) {
  if (column.field == "Salary") {
    column.formatter = (salary => this.format(salary));
  }
}

format(value: number) : string {
  return formatCurrency(value, "en-us", "$");
}

grid

Represents the instance of the parent GridType that contains this column.

grid: GridType

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:59

Sets/gets the header value.

let columnHeader = this.column.header;

<igx-column [header] = "'ID'"></igx-column>

header: string = ''

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:131

headerClasses

Sets/gets the class selector of the column header.

let columnHeaderClass = this.column.headerClasses;

<igx-column [headerClasses] = "'column-header'"></igx-column>

headerClasses: string = ''

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:566

headerGroupClasses

Sets/gets the class selector of the column group header.

let columnHeaderClass = this.column.headerGroupClasses;

<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>

headerGroupClasses: string = ''

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:603

headerGroupStyles

Sets conditional style properties on the column header group wrapper. Similar to ngStyle it accepts an object literal where the keys are the style properties and the value is the expression to be evaluated.

styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}

<igx-column [headerGroupStyles]="styles"></igx-column>

headerGroupStyles: any = null

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:624

headerStyles

Sets conditional style properties on the column header. Similar to ngStyle it accepts an object literal where the keys are the style properties and the value is the expression to be evaluated.

styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}

<igx-column [headerStyles]="styles"></igx-column>

headerStyles: any = null

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:587

hiddenChange

Emitted when the column is hidden or shown.

<igx-column (hiddenChange)="hiddenChange($event)">
</igx-column>

hiddenChange: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:419

parent

Sets/gets the parent column.

let parentColumn = this.column.parent;

this.column.parent = higherLevelColumn;

parent: ColumnType = null

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1809

pinnedChange

Emitted when the column is pinned/unpinned.

<igx-column (pinnedChange)="pinnedChange($event)">
</igx-column>

pinnedChange: EventEmitter<boolean>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:902

resizable

Sets/gets whether the column is resizable. Default value is false.

let isResizable = this.column.resizable;

<igx-column [resizable] = "true"></igx-column>

resizable: boolean = false

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:282

rowEnd

Row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field

<igx-column-layout>
  <igx-column [rowEnd]="2" [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>

rowEnd: number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:822

rowStart

Row index from which the field is starting.

<igx-column-layout>
  <igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>

rowStart: number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:849

searchable

Sets/gets whether the column is searchable. Default value is true.

let isSearchable =  this.column.searchable';

<igx-column [searchable] = "false"></igx-column>

searchable: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:790

sortable

Sets/gets whether the column is sortable. Default value is false.

let isSortable = this.column.sortable;

<igx-column [sortable] = "true"></igx-column>

sortable: boolean = false

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:161

sortingIgnoreCase

Sets/gets whether the column sorting should be case sensitive. Default value is true.

let sortingIgnoreCase = this.column.sortingIgnoreCase;

<igx-column [sortingIgnoreCase] = "false"></igx-column>

sortingIgnoreCase: boolean = true

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:774

summaryFormatter

The summaryFormatter is used to format the display of the column summaries.

In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.

columnInit(column: IgxColumnComponent) {
  if (column.field == "OrderDate") {
    column.summaryFormatter = this.summaryFormat;
  }
}

summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
  const result = summary.summaryResult;
  if(summaryResult.key !== 'count' && result !== null && result !== undefined) {
     const pipe = new DatePipe('fr-FR');
     return pipe.transform(result,'mediumDate');
  }
  return result;
}

summaryFormatter: object

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:743

title

Sets/gets the title value.

let title = this.column.title;

<igx-column [title] = "'Some column tooltip'"></igx-column>

title: string = ''

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:146

widthChange

Emitted when the column width changes.

<igx-column (widthChange)="widthChange($event)">
</igx-column>

widthChange: EventEmitter<string>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:890

Accessors

bodyTemplate

Returns a reference to the bodyTemplate.

let bodyTemplate = this.column.bodyTemplate;

get bodyTemplate(): TemplateRef<IgxCellTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1341

Returns TemplateRef<IgxCellTemplateContext>

Sets the body template.

<ng-template #bodyTemplate igxCell let-val>
   <div style = "background-color: yellowgreen" (click) = "changeColor(val)">
      <span> {{val}} </span>
   </div>
</ng-template>

@ViewChild("'bodyTemplate'", {read: TemplateRef })
public bodyTemplate: TemplateRef<any>;
this.column.bodyTemplate = this.bodyTemplate;

set bodyTemplate(template: TemplateRef<IgxCellTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1361

Parameters

template: TemplateRef<IgxCellTemplateContext>

Returns void

childColumns

A list containing all the child columns under this column (if any). Empty without children or if this column is not Group or Layout.

get childColumns(): ColumnType[]

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1607

Returns ColumnType[]

collapsible

Optional Indicated whether the column can be collapsed. If the value is true, the column can be collapsed It is used in tree grid and for navigation

get collapsible(): any

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1746

Optional Indicated whether the column can be collapsed. If the value is true, the column can be collapsed It is used in tree grid and for navigation

set collapsible(_value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1746

Parameters

_value: boolean

Returns void

columnGroup

Returns a boolean indicating if the column is a ColumnGroup.

let columnGroup =  this.column.columnGroup;

get columnGroup(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1574

Returns boolean

columnLayout

Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.

let columnGroup =  this.column.columnGroup;

get columnLayout(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1587

Returns boolean

columnLayoutChild

Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.

let columnLayoutChild =  this.column.columnLayoutChild;

get columnLayoutChild(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1599

Returns boolean

disabledSummaries

Sets/gets the summary operands to exclude from display. Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc.

let disabledSummaries = this.column.disabledSummaries;

<igx-column [disabledSummaries]="['min', 'max', 'average']"></igx-column>

get disabledSummaries(): string[]

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1165

Returns string[]

set disabledSummaries(value: string[]): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1169

Parameters

value: string[]

Returns void

editable

Gets whether the column is editable. Default value is false.

let isEditable = this.column.editable;

get editable(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:222

Returns boolean

Sets whether the column is editable.

this.column.editable = true;

<igx-column [editable] = "true"></igx-column>

set editable(editable: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:249

Parameters

editable: boolean

Returns void

editorOptions

Sets properties on the default column editors

get editorOptions(): IColumnEditorOptions

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1735

Returns IColumnEditorOptions

Pass optional properties for the default column editors.

set editorOptions(value: IColumnEditorOptions): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1732

Example

const editorOptions: IColumnEditorOptions = {
     dateTimeFormat: 'MM/dd/YYYY',
}

<igx-column dataType="date" [editorOptions]="editorOptions"></igx-column>

Parameters

value: IColumnEditorOptions

Returns void

errorTemplate

Returns a reference to the validation error template.

let errorTemplate = this.column.errorTemplate;

get errorTemplate(): TemplateRef<IgxCellTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1441

Returns TemplateRef<IgxCellTemplateContext>

Sets the error template.

<ng-template igxCellValidationError let-cell="cell" #errorTemplate >
    <div *ngIf="cell.validation.errors?.['forbiddenName']">
     This name is forbidden.
    </div>
</ng-template>

@ViewChild("'errorTemplate'", {read: TemplateRef })
public errorTemplate: TemplateRef<any>;
this.column.errorTemplate = this.errorTemplate;

set errorTemplate(template: TemplateRef<IgxCellTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1459

Parameters

template: TemplateRef<IgxCellTemplateContext>

Returns void

expanded

Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded

get expanded(): any

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1755

Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded

set expanded(_value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1755

Parameters

_value: boolean

Returns void

field

The internal field name, used in expressions and queries.

get field(): string

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:82

Returns string

Sets/gets the field value.

let columnField = this.column.field;

<igx-column [field] = "'ID'"></igx-column>

set field(value: string): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:78

Parameters

value: string

Returns void

filterCellTemplate

Returns a reference to the filterCellTemplate.

let filterCellTemplate = this.column.filterCellTemplate;

get filterCellTemplate(): TemplateRef<IgxColumnTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1474

Returns TemplateRef<IgxColumnTemplateContext>

Sets the quick filter template.

<ng-template #filterCellTemplate IgxFilterCellTemplate let-column="column">
   <input (input)="onInput()">
</ng-template>

@ViewChild("'filterCellTemplate'", {read: TemplateRef })
public filterCellTemplate: TemplateRef<any>;
this.column.filterCellTemplate = this.filterCellTemplate;

set filterCellTemplate(template: TemplateRef<IgxColumnTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1492

Parameters

template: TemplateRef<IgxColumnTemplateContext>

Returns void

filteringExpressionsTree

Returns the filteringExpressionsTree of the column.

let tree =  this.column.filteringExpressionsTree;

get filteringExpressionsTree(): FilteringExpressionsTree

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1793

Returns FilteringExpressionsTree

filters

Gets the column filters.

let columnFilters = this.column.filters'

get filters(): IgxFilteringOperand

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1190

Returns IgxFilteringOperand

Sets the column filters.

this.column.filters = IgxBooleanFilteringOperand.instance().

set filters(instance: IgxFilteringOperand): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1201

Parameters

instance: IgxFilteringOperand

Returns void

groupable

Sets/gets whether the column is groupable. Default value is false.

let isGroupable = this.column.groupable;

<igx-column [groupable] = "true"></igx-column>

get groupable(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:204

Returns boolean

Indicates whether a column can be put in a group. If the value is true, the column can be put in a group

set groupable(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:207

Parameters

value: boolean

Returns void

groupingComparer

Gets the function that compares values for grouping.

let groupingComparer = this.column.groupingComparer'

get groupingComparer(): object

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1263

Returns object

Sets a custom function to compare values for grouping. Subsequent values in the sorted data that the function returns 0 for are grouped.

this.column.groupingComparer = (a: any, b: any, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; }

set groupingComparer(funcRef: object): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1277

Parameters

funcRef: object

Returns void

hasSummary

Gets a value indicating whether the summary for the column is enabled.

let hasSummary = this.column.hasSummary;

get hasSummary(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:312

Returns boolean

Sets a value indicating whether the summary for the column is enabled. Default value is false.

<igx-column [hasSummary] = "true"></igx-column>

set hasSummary(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:324

Parameters

value: boolean

Returns void

headerTemplate

Returns a reference to the header template.

let headerTemplate = this.column.headerTemplate;

get headerTemplate(): TemplateRef<IgxColumnTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1375

Returns TemplateRef<IgxColumnTemplateContext>

Sets the header template. Note that the column header height is fixed and any content bigger than it will be cut off.

<ng-template #headerTemplate>
  <div style = "background-color:black" (click) = "changeColor(val)">
      <span style="color:red" >{{column.field}}</span>
  </div>
</ng-template>

@ViewChild("'headerTemplate'", {read: TemplateRef })
public headerTemplate: TemplateRef<any>;
this.column.headerTemplate = this.headerTemplate;

set headerTemplate(template: TemplateRef<IgxColumnTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1396

Parameters

template: TemplateRef<IgxColumnTemplateContext>

Returns void

hidden

Gets whether the column is hidden.

let isHidden = this.column.hidden;

get hidden(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:342

Returns boolean

Sets the column hidden property. Default value is false.

<igx-column [hidden] = "true"></igx-column>

Two-way data binding.

<igx-column [(hidden)] = "model.isHidden"></igx-column>

set hidden(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:359

Parameters

value: boolean

Returns void

index

Gets the column index.

let columnIndex = this.column.index;

get index(): number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1041

Returns number

inlineEditorTemplate

Returns a reference to the inline editor template.

let inlineEditorTemplate = this.column.inlineEditorTemplate;

get inlineEditorTemplate(): TemplateRef<IgxCellTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1410

Returns TemplateRef<IgxCellTemplateContext>

Sets the inline editor template.

<ng-template #inlineEditorTemplate igxCellEditor let-cell="cell">
    <input type="string" [(ngModel)]="cell.value"/>
</ng-template>

@ViewChild("'inlineEditorTemplate'", {read: TemplateRef })
public inlineEditorTemplate: TemplateRef<any>;
this.column.inlineEditorTemplate = this.inlineEditorTemplate;

set inlineEditorTemplate(template: TemplateRef<IgxCellTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1428

Parameters

template: TemplateRef<IgxCellTemplateContext>

Returns void

level

Returns the level of the column in a column group. Returns 0 if the column doesn't have a parent.

let columnLevel =  this.column.level;

get level(): number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1624

Returns number

maxWidth

get maxWidth(): string

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:549

Returns string

Sets/gets the maximum width of the column.

let columnMaxWidth = this.column.width;

<igx-column [maxWidth] = "'150px'"></igx-column>

set maxWidth(value: string): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:544

Parameters

value: string

Returns void

merge

Sets/gets whether to merge cells in this column.

<igx-column [merge]="true"></igx-column>

get merge(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:94

Returns boolean

set merge(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:98

Parameters

value: boolean

Returns void

mergingComparer

Gets the function that compares values for merging.

let mergingComparer = this.column.mergingComparer'

get mergingComparer(): object

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1237

Returns object

Sets a custom function to compare values for merging.

this.column.mergingComparer = (prevRecord: any, record: any, field: string) => { return prevRecord[field] === record[field]; }

set mergingComparer(funcRef: object): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1248

Parameters

funcRef: object

Returns void

minWidth

get minWidth(): string

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1020

Returns string

Sets/gets the minimum width of the column. Default value is 88;

let columnMinWidth = this.column.minWidth;

<igx-column [minWidth] = "'100px'"></igx-column>

set minWidth(value: string): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1012

Parameters

value: string

Returns void

pinned

Gets whether the column is pinned.

let isPinned = this.column.pinned;

get pinned(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1078

Returns boolean

Sets whether the column is pinned. Default value is false.

<igx-column [pinned] = "true"></igx-column>

Two-way data binding.

<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>

set pinned(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1095

Parameters

value: boolean

Returns void

pinningPosition

Gets the pinning position of the column.

let pinningPosition = this.column.pinningPosition;

get pinningPosition(): ColumnPinningPosition

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1053

Returns ColumnPinningPosition

Sets the pinning position of the column.

<igx-column [pinningPosition]="1"></igx-column>

set pinningPosition(value: ColumnPinningPosition): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1064

Parameters

value: ColumnPinningPosition

Returns void

pipeArgs

Optional arguments for any pipe applied to the field.

get pipeArgs(): IColumnPipeArgs

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1710

Returns IColumnPipeArgs

set pipeArgs(value: IColumnPipeArgs): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1704

Example

const pipeArgs: IColumnPipeArgs = {
     format: 'longDate',
     timezone: 'UTC',
     digitsInfo: '1.1-2'
}

<igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column>
<igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column>

Parameters

value: IColumnPipeArgs

Returns void

selectable

Returns if the column is selectable.

let columnSelectable = this.column.selectable;

get selectable(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:172

Returns boolean

Sets if the column is selectable. Default value is true.

<igx-column [selectable] = "false"></igx-column>

set selectable(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:185

Parameters

value: boolean

Returns void

selected

Returns if the column is selected.

let isSelected = this.column.selected;

get selected(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:385

Returns boolean

Select/deselect a column. Default value is false.

this.column.selected = true;

set selected(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:398

Parameters

value: boolean

Returns void

sortStrategy

Gets the column sortStrategy.

let sortStrategy = this.column.sortStrategy

get sortStrategy(): ISortingStrategy

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1213

Returns ISortingStrategy

Sets the column sortStrategy.

this.column.sortStrategy = new CustomSortingStrategy().
class CustomSortingStrategy extends SortingStrategy {...}

set sortStrategy(classRef: ISortingStrategy): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1225

Parameters

classRef: ISortingStrategy

Returns void

summaries

Gets the column summaries.

let columnSummaries = this.column.summaries;

get summaries(): any

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1126

Returns any

Sets the column summaries.

this.column.summaries = IgxNumberSummaryOperand;

set summaries(classRef: any): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1139

Parameters

classRef: any

Returns void

summaryTemplate

Returns a reference to the summaryTemplate.

let summaryTemplate = this.column.summaryTemplate;

get summaryTemplate(): TemplateRef<IgxSummaryTemplateContext>

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1307

Returns TemplateRef<IgxSummaryTemplateContext>

Sets the summary template.

<ng-template #summaryTemplate igxSummary let-summaryResults>
   <p>{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</p>
   <p>{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}</p>
</ng-template>

@ViewChild("'summaryTemplate'", {read: TemplateRef })
public summaryTemplate: TemplateRef<any>;
this.column.summaryTemplate = this.summaryTemplate;

set summaryTemplate(template: TemplateRef<IgxSummaryTemplateContext>): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1326

Parameters

template: TemplateRef<IgxSummaryTemplateContext>

Returns void

topLevelParent

Returns a reference to the top level parent column.

let topLevelParent =  this.column.topLevelParent;

get topLevelParent(): ColumnType

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2504

Returns ColumnType

visibleIndex

Gets the column visible index. If the column is not visible, returns -1.

let visibleColumnIndex =  this.column.visibleIndex;

get visibleIndex(): number

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1531

Returns number

visibleWhenCollapsed

get visibleWhenCollapsed(): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1677

Returns boolean

Indicates whether the column will be visible when its parent is collapsed.

<igx-column-group>
  <igx-column [visibleWhenCollapsed]="true"></igx-column>
</igx-column-group>

set visibleWhenCollapsed(value: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:1668

Parameters

value: boolean

Returns void

width

Gets the width of the column.

let columnWidth = this.column.width;

get width(): string

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:481

Returns string

Sets the width of the column.

<igx-column [width] = "'25%'"></igx-column>

Two-way data binding.

<igx-column [(width)]="model.columns[0].width"></igx-column>

set width(value: string): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:507

Parameters

value: string

Returns void

Methods

autosize

Autosize the column to the longest currently visible cell value, including the header cell.

@ViewChild('grid') grid: IgxGridComponent;
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();

autosize(byHeaderOnly: boolean): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2544

Parameters

byHeaderOnly: boolean
Set if column should be autosized based only on the header content.

Returns void

move

Moves a column to the specified visible index. If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed. If passed index would move the column to a different column group. moving is not performed.

move(index: number): void

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2435

Parameters

index: number

Returns void

Example

column.move(index);

Pins the column in the specified position at the provided index in that pinned area. Defaults to index 0 if not provided, or to the initial index in the pinned area. Returns true if the column is successfully pinned. Returns false if the column cannot be pinned. Column cannot be pinned if:

Is already pinned
index argument is out of range

let success = this.column.pin();

pin(index: number, pinningPosition: ColumnPinningPosition): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2240

Parameters

index: number
pinningPosition: ColumnPinningPosition

Returns boolean

unpin

Unpins the column and place it at the provided index in the unpinned area. Defaults to index 0 if not provided, or to the initial index in the unpinned area. Returns true if the column is successfully unpinned. Returns false if the column cannot be unpinned. Column cannot be unpinned if:

Is already unpinned
index argument is out of range

let success = this.column.unpin();

unpin(index: number): boolean

Defined in projects/igniteui-angular/grids/core/src/columns/column.component.ts:2350

Parameters

index: number