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
Section titled "Constructors"IgxColumnComponent
new IgxColumnComponent(): IgxColumnComponent Returns IgxColumnComponent
Properties
Section titled "Properties"additionalTemplateContext
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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", "$");
} 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
header
Section titled "header"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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
Section titled "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
bodyTemplate
Section titled "bodyTemplate"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
Section titled "disabledSummaries"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
editable
Section titled "editable"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
editorOptions
Section titled "editorOptions"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
Section titled "errorTemplate"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
field
Section titled "field"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
filterCellTemplate
Section titled "filterCellTemplate"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
filters
Section titled "filters"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
groupable
Section titled "groupable"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
groupingComparer
Section titled "groupingComparer"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
Section titled "hasSummary"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
headerTemplate
Section titled "headerTemplate"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
hidden
Section titled "hidden"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
inlineEditorTemplate
Section titled "inlineEditorTemplate"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
Section titled "maxWidth"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
Section titled "merge"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
Section titled "mergingComparer"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
Section titled "minWidth"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
pinned
Section titled "pinned"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
Section titled "pinningPosition"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
pipeArgs
Section titled "pipeArgs"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
selectable
Section titled "selectable"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
selected
Section titled "selected"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
sortStrategy
Section titled "sortStrategy"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
Section titled "summaries"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
summaryTemplate
Section titled "summaryTemplate"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
Section titled "visibleWhenCollapsed"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
Section titled "width"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
Accessors
Section titled "Accessors"childColumns
Section titled "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[]
columnGroup
Section titled "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
Section titled "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
Section titled "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
filteringExpressionsTree
Section titled "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
index
Section titled "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
level
Section titled "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
topLevelParent
Section titled "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
Section titled "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
Methods
Section titled "Methods"autosize
Section titled "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:
booleanSet 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
- index:
number - pinningPosition:
ColumnPinningPosition
Returns boolean
unpin
Section titled "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