Represents the instance of the parent GridType that contains this column.
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>
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>
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>
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>
Sets/gets the children columns.
let columnChildren = this.column.children;
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>
Column index from which the field is starting.
<igx-column-layout>
<igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>
Sets/gets the data type of the column values.
Default value is string.
let columnDataType = this.column.dataType;
<igx-column [dataType] = "'number'"></igx-column>
Gets whether the hiding is disabled.
let isHidingDisabled = this.column.disableHiding;
Gets whether the pinning is disabled.
let isPinningDisabled = this.column.disablePinning;
Sets/gets whether the column is filterable.
Default value is true.
let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>
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>
Applies display format to cell values in the column. Does not modify the underlying data.
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.
columnInit(column: IgxColumnComponent) {
if (column.field == "Salary") {
column.formatter = (salary => this.format(salary));
}
}
format(value: number) : string {
return formatCurrency(value, "en-us", "$");
}
const column = this.grid.getColumnByName('Address');
const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
column.formatter = addressFormatter;
IgxColumnComponent
Represents the instance of the parent GridType that contains this column.
Sets/gets the header value.
let columnHeader = this.column.header;
<igx-column [header] = "'ID'"></igx-column>
Sets/gets the class selector of the column header.
let columnHeaderClass = this.column.headerClasses;
<igx-column [headerClasses] = "'column-header'"></igx-column>
Sets/gets the class selector of the column group header.
let columnHeaderClass = this.column.headerGroupClasses;
<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>
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>
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>
Sets/gets the maximum width of the column.
let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'150px'"></igx-column>
Sets/gets the parent column.
let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
Sets/gets whether the column is resizable.
Default value is false.
let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
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>
Row index from which the field is starting.
<igx-column-layout>
<igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
Sets/gets whether the column is searchable.
Default value is true.
let isSearchable = this.column.searchable';
<igx-column [searchable] = "false"></igx-column>
Sets/gets whether the column is sortable.
Default value is false.
let isSortable = this.column.sortable;
<igx-column [sortable] = "true"></igx-column>
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>
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;
}
Sets/gets the title value.
let title = this.column.title;
<igx-column [title] = "'Some column tooltip'"></igx-column>
Returns a reference to the bodyTemplate.
let bodyTemplate = this.column.bodyTemplate;
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;
A list containing all the child columns under this column (if any). Empty without children or if this column is not Group or Layout.
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
Returns a boolean indicating if the column is a ColumnGroup.
let columnGroup = this.column.columnGroup;
Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
let columnGroup = this.column.columnGroup;
Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.
let columnLayoutChild = this.column.columnLayoutChild;
Gets whether the column is editable.
Default value is false.
let isEditable = this.column.editable;
Sets whether the column is editable.
this.column.editable = true;
<igx-column [editable] = "true"></igx-column>
Returns a reference to the validation error template.
let errorTemplate = this.column.errorTemplate;
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;
Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded
Sets/gets the field value.
let columnField = this.column.field;
<igx-column [field] = "'ID'"></igx-column>
Returns a reference to the filterCellTemplate.
let filterCellTemplate = this.column.filterCellTemplate;
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;
Returns the filteringExpressionsTree of the column.
let tree = this.column.filteringExpressionsTree;
Gets the column filters.
let columnFilters = this.column.filters'
Sets the column filters.
this.column.filters = IgxBooleanFilteringOperand.instance().
Sets/gets whether the column is groupable.
Default value is false.
let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
Indicates whether a column can be put in a group. If the value is true, the column can be put in a group
Gets the function that compares values for grouping.
let groupingComparer = this.column.groupingComparer'
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; }
Gets a value indicating whether the summary for the column is enabled.
let hasSummary = this.column.hasSummary;
Sets a value indicating whether the summary for the column is enabled.
Default value is false.
<igx-column [hasSummary] = "true"></igx-column>
Returns a reference to the header template.
let headerTemplate = this.column.headerTemplate;
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;
Gets whether the column is hidden.
let isHidden = this.column.hidden;
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>
Gets the column index.
let columnIndex = this.column.index;
Returns a reference to the inline editor template.
let inlineEditorTemplate = this.column.inlineEditorTemplate;
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;
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;
Sets/gets the minimum width of the column.
Default value is 88;
let columnMinWidth = this.column.minWidth;
<igx-column [minWidth] = "'100px'"></igx-column>
Gets whether the column is pinned.
let isPinned = this.column.pinned;
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>
Pass optional parameters for DatePipe and/or DecimalPipe to format the display value for date and numeric columns.
Accepts an IColumnPipeArgs object with any of the format, timezone and digitsInfo properties.
For more details see https://angular.io/api/common/DatePipe and https://angular.io/api/common/DecimalPipe
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>
IgxColumnComponent
Returns if the column is selectable.
let columnSelectable = this.column.selectable;
Sets if the column is selectable.
Default value is true.
<igx-column [selectable] = "false"></igx-column>
Returns if the column is selected.
let isSelected = this.column.selected;
Select/deselect a column.
Default value is false.
this.column.selected = true;
Gets the column sortStrategy.
let sortStrategy = this.column.sortStrategy
Sets the column sortStrategy.
this.column.sortStrategy = new CustomSortingStrategy().
class CustomSortingStrategy extends SortingStrategy {...}
Gets the column summaries.
let columnSummaries = this.column.summaries;
Sets the column summaries.
this.column.summaries = IgxNumberSummaryOperand;
Returns a reference to the summaryTemplate.
let summaryTemplate = this.column.summaryTemplate;
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;
Returns a reference to the top level parent column.
let topLevelParent = this.column.topLevelParent;
Gets the column visible index.
If the column is not visible, returns -1.
let visibleColumnIndex = this.column.visibleIndex;
Indicates whether the column will be visible when its parent is collapsed.
<igx-column-group>
<igx-column [visibleWhenCollapsed]="true"></igx-column>
</igx-column-group>
Gets the width of the column.
let columnWidth = this.column.width;
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>
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();
Set if column should be autosized based only on the header content.
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.
Pins the column at the provided index in the 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:
let success = this.column.pin();
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:
let success = this.column.unpin();
Ignite UI for Angular Column - Documentation
The Ignite UI Column is used within an
igx-gridelement 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 usingng-templatewhich will be used for all cells within the column.Igx Parent
IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, IgxRowIslandComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent