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>
IgxColumnComponent
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>
IgxColumnComponent
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>
IgxColumnComponent
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>
IgxColumnComponent
Sets/gets the children columns.
let columnChildren = this.column.children;
this.column.children = childrenColumns;
IgxColumnComponent
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>
IgxColumnComponent
Column index from which the field is starting.
<igx-column-layout>
<igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>
IgxColumnComponent
Allows you to define a custom template for expand/collapse indicator
IgxColumnGroupComponent
Sets/gets the data type of the column values.
Default value is string.
let columnDataType = this.column.dataType;
<igx-column [dataType] = "'number'"></igx-column>
IgxColumnComponent
hidden
Gets whether the hiding is disabled.
let isHidingDisabled = this.column.disableHiding;
IgxColumnComponent
Gets whether the pinning is disabled.
let isPinningDisabled = this.column.disablePinning;
IgxColumnComponent
Sets/gets whether the column is filterable.
Default value is true.
let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>
IgxColumnComponent
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>
IgxColumnComponent
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
Sets/gets whether the column is groupable.
Default value is false.
let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
IgxColumnComponent
Sets/gets the header value.
let columnHeader = this.column.header;
<igx-column [header] = "'ID'"></igx-column>
IgxColumnComponent
Sets/gets the class selector of the column header.
let columnHeaderClass = this.column.headerClasses;
<igx-column [headerClasses] = "'column-header'"></igx-column>
IgxColumnComponent
Sets/gets the class selector of the column group header.
let columnHeaderClass = this.column.headerGroupClasses;
<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>
IgxColumnComponent
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>
IgxColumnComponent
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>
IgxColumnComponent
Sets/gets the maximum width of the column.
let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'150px'"></igx-column>
IgxColumnComponent
in version 13.1.0. Use IgxGridComponent.moving instead.
Sets/gets whether the column is movable.
Default value is false.
let isMovable = this.column.movable;
<igx-column [movable] = "true"></igx-column>
IgxColumnComponent
Sets/gets the parent column.
let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
IgxColumnComponent
Sets/gets whether the column is resizable.
Default value is false.
let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
IgxColumnComponent
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>
IgxColumnComponent
Row index from which the field is starting.
<igx-column-layout>
<igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
IgxColumnComponent
Sets/gets whether the column group is searchable.
Default value is true.
let isSearchable = this.columnGroup.searchable;
<igx-column-group [searchable] = "false"></igx-column-group>
IgxColumnGroupComponent
Sets/gets whether the column is sortable.
Default value is false.
let isSortable = this.column.sortable;
<igx-column [sortable] = "true"></igx-column>
IgxColumnComponent
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>
IgxColumnComponent
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;
}
IgxColumnComponent
Sets/gets the title value.
let title = this.column.title;
<igx-column [title] = "'Some column tooltip'"></igx-column>
IgxColumnComponent
hidden
Returns the children columns collection.
let columns = this.columnGroup.allChildren;
IgxColumnGroupComponent
Returns a reference to the body template.
let bodyTemplate = this.columnGroup.bodyTemplate;
IgxColumnGroupComponent
Set if the column group is collapsible.
Default value is false
<igx-column-group [collapsible] = "true"></igx-column-group>
IgxColumnGroupComponent
Returns a boolean indicating if the column is a ColumnGroup.
let isColumnGroup = this.columnGroup.columnGroup
IgxColumnGroupComponent
Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
let columnGroup = this.column.columnGroup;
IgxColumnComponent
Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.
let columnLayoutChild = this.column.columnLayoutChild;
IgxColumnComponent
Gets the default minimum width of the column.
let defaultMinWidth = this.column.defaultMinWidth;
IgxColumnComponent
Gets whether the column is editable.
Default value is false.
let isEditable = this.column.editable;
IgxColumnComponent
Sets whether the column is editable.
this.column.editable = true;
<igx-column [editable] = "true"></igx-column>
IgxColumnComponent
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;
Set whether the group is expanded or collapsed initially.
Applied only if the collapsible property is set to true
Default value is true
const state = false
<igx-column-group [(expand)] = "state"></igx-column-group>
IgxColumnGroupComponent
Sets/gets the field value.
let columnField = this.column.field;
<igx-column [field] = "'ID'"></igx-column>
IgxColumnComponent
Returns a reference to the filter cell of the column.
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let filterell = column.filterell;
IgxColumnComponent
Returns a reference to the filterCellTemplate.
let filterCellTemplate = this.column.filterCellTemplate;
IgxColumnComponent
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;
IgxColumnComponent
Returns the filteringExpressionsTree of the column.
let tree = this.column.filteringExpressionsTree;
IgxColumnComponent
Gets the column group filters.
let columnGroupFilters = this.columnGroup.filters;
IgxColumnGroupComponent
Sets the column group filters.
this.columnGroup.filters = IgxStringFilteringOperand;
IgxColumnGroupComponent
Gets the function that compares values for grouping.
let groupingComparer = this.column.groupingComparer'
IgxColumnComponent
Gets the function that compares values for grouping.
let groupingComparer = this.column.groupingComparer'
IgxColumnComponent
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; }
IgxColumnComponent
Gets a value indicating whether the summary for the column is enabled.
let hasSummary = this.column.hasSummary;
IgxColumnComponent
Sets a value indicating whether the summary for the column is enabled.
Default value is false.
<igx-column [hasSummary] = "true"></igx-column>
IgxColumnComponent
Returns a reference to the header of the column.
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let headerCell = column.headerCell;
IgxColumnComponent
Returns a reference to the header group of the column.
IgxColumnComponent
Returns a reference to the header template.
let headerTemplate = this.column.headerTemplate;
IgxColumnComponent
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;
IgxColumnComponent
Gets whether the column group is hidden.
let isHidden = this.columnGroup.hidden;
IgxColumnGroupComponent
Sets the column layout hidden property.
<igx-column-layout [hidden] = "true"></igx-column->
IgxColumnGroupComponent
Gets the column index.
let columnIndex = this.column.index;
IgxColumnComponent
Returns a reference to the inline editor template.
let inlineEditorTemplate = this.columnGroup.inlineEditorTemplate;
IgxColumnGroupComponent
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;
IgxColumnComponent
Sets/gets the minimum width of the column.
Default value is 88;
let columnMinWidth = this.column.minWidth;
<igx-column [minWidth] = "'100px'"></igx-column>
IgxColumnComponent
Gets whether the column is pinned.
let isPinned = this.column.pinned;
IgxColumnComponent
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>
IgxColumnComponent
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 group is selectable
let columnGroupSelectable = this.columnGroup.selectable;
IgxColumnGroupComponent
Sets if the column is selectable.
Default value is true.
<igx-column [selectable] = "false"></igx-column>
IgxColumnComponent
Returns if the column group is selected.
let isSelected = this.columnGroup.selected;
IgxColumnGroupComponent
Select/deselect the column group.
this.columnGroup.selected = true;
IgxColumnGroupComponent
Gets the column sortStrategy.
let sortStrategy = this.column.sortStrategy
IgxColumnComponent
Sets the column sortStrategy.
this.column.sortStrategy = new CustomSortingStrategy().
class CustomSortingStrategy extends SortingStrategy {...}
IgxColumnComponent
Gets the column group summaries.
let columnGroupSummaries = this.columnGroup.summaries;
IgxColumnGroupComponent
Sets the column group summaries.
this.columnGroup.summaries = IgxNumberSummaryOperand;
IgxColumnGroupComponent
Returns a reference to the summaryTemplate.
let summaryTemplate = this.column.summaryTemplate;
IgxColumnComponent
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;
IgxColumnComponent
Returns a reference to the top level parent column.
let topLevelParent = this.column.topLevelParent;
IgxColumnComponent
Gets the column visible index.
If the column is not visible, returns -1.
let visibleColumnIndex = this.column.visibleIndex;
IgxColumnComponent
Indicates whether the column will be visible when its parent is collapsed.
<igx-column-group>
<igx-column [visibleWhenCollapsed]="true"></igx-column>
</igx-column-group>
IgxColumnComponent
Gets the width of the column layout.
let columnGroupWidth = this.columnGroup.width;
IgxColumnGroupComponent
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>
IgxColumnComponent
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();
IgxColumnComponent
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.
column.move(index);
IgxColumnComponent
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();
IgxColumnComponent
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();
IgxColumnComponent
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.