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:903

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:324

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:672

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: GridStyleCSSProperty | null = null

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

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:1845

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:861

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:887

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:829

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:481

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:493

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:456

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:292

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:784

Optional 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:735

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:84

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:156

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:591

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:628

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: GridStyleCSSProperty | null = null

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

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: GridStyleCSSProperty | null = null

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

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:444

parent

Sets/gets the parent column.

let parentColumn = this.column.parent;

this.column.parent = higherLevelColumn;

parent: ColumnType | null = null

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

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:927

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:307

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:847

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:874

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:815

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:186

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:799

Optional 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:768

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:171

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:915

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:1366

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:1386

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:1632

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:1771

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:1771

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:1599

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:1612

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:1624

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:1190

Returns string[]

set disabledSummaries(value: string[]): void

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

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:247

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:274

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:1760

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:1757

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:1466

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:1484

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:1780

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:1780

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:107

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:103

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:1499

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:1517

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:1818

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:1215

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:1226

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:229

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:232

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:1288

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:1302

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:337

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:349

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:1400

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:1421

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:367

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:384

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:1066

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:1435

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:1453

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:1649

Returns number

maxWidth

get maxWidth(): string

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

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:569

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:119

Returns boolean

set merge(value: boolean): void

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

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:1262

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:1273

Parameters

funcRef: object

Returns void

minWidth

get minWidth(): string

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

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:1037

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:1103

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:1120

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:1078

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:1089

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:1735

Returns IColumnPipeArgs

set pipeArgs(value: IColumnPipeArgs): void

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

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:197

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:210

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:410

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:423

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:1238

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:1250

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:1151

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:1164

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:1332

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:1351

Parameters

template: TemplateRef<IgxSummaryTemplateContext>

Returns void

topLevelParent

Returns a reference to the top level parent column.

let topLevelParent =  this.column.topLevelParent;

get topLevelParent(): ColumnType | undefined

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

Returns ColumnType | undefined

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:1556

Returns number

visibleWhenCollapsed

get visibleWhenCollapsed(): boolean

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

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:1693

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:506

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:532

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:2569

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:2460

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:2265

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:2375

Parameters

index: number