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.

IgxColumnComponent

new IgxColumnComponent(): IgxColumnComponent

Returns IgxColumnComponent

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

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

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

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

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

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

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

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

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

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

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

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

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

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", "$");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

bodyTemplate: TemplateRef<IgxCellTemplateContext>

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

disabledSummaries: string[]

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

Indicated whether the column can be edited. If the value is true, the column can be edited

editable: boolean

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

Sets properties on the default column editors

editorOptions: IColumnEditorOptions

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

errorTemplate: TemplateRef<IgxCellTemplateContext>

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

The internal field name, used in expressions and queries.

field: string

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

Represents a custom template for filtering It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

filterCellTemplate: TemplateRef<IgxColumnTemplateContext>

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

Optional filtering operands that apply to this field.

filters: IgxFilteringOperand

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

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

groupable: boolean

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

Represents a method with custom grouping comparator to determine the members of the group.

groupingComparer: object

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

hasSummary: boolean

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

The template reference for the custom header of the column It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

headerTemplate: TemplateRef<IgxColumnTemplateContext>

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

Indicates whether a column is currently hidden (not visible). If the value is true, the column is not visible

hidden: boolean

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

The template reference for the custom inline editor of the column It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

inlineEditorTemplate: TemplateRef<IgxCellTemplateContext>

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

maxWidth: string

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

merge: boolean

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

mergingComparer: object

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

minWidth: string

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

Indicates if the column is currently pinned. If the value is true, the column is pinned

pinned: boolean

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

pinningPosition: ColumnPinningPosition

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

Optional arguments for any pipe applied to the field.

pipeArgs: IColumnPipeArgs

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

Indicates if the column can be selected. If the value is true, the column can be selected

selectable: boolean

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

Indicates if the column is currently selected. If the value is true, the column is selected

selected: boolean

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

The sorting strategy used for sorting this column. The interface contains a method sort that sorts the provided data based on the given sorting expressions

sortStrategy: ISortingStrategy

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

summaries: any

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

The template reference for a summary of the column It is of type TemplateRef, which represents an embedded template, used to instantiate embedded views

summaryTemplate: TemplateRef<IgxSummaryTemplateContext>

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

visibleWhenCollapsed: boolean

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

width: string

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

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[]

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

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

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

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

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

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

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

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

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

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

Returns boolean

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

Returns boolean