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>
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>
Allows you to define a custom template for expand/collapse indicator
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", "$");
}
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 group is searchable
.
Default value is true
.
let isSearchable = this.columnGroup.searchable;
<igx-column-group [searchable] = "false"></igx-column-group>
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>
A list containing all the child columns under this column (if any). Empty without children or if this column is not Group or Layout.
Set if the column group is collapsible.
Default value is false
<igx-column-group [collapsible] = "true"></igx-column-group>
Returns a boolean indicating if the column is a ColumnGroup
.
let isColumnGroup = this.columnGroup.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;
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>
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>
Sets properties on the default column editors
Pass optional properties for the default column editors.
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>
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 group filters
.
let columnGroupFilters = this.columnGroup.filters;
Sets the column group filters
.
this.columnGroup.filters = IgxStringFilteringOperand;
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 group is hidden.
let isHidden = this.columnGroup.hidden;
Sets the column group hidden property.
<igx-column [hidden] = "true"></igx-column>
Two-way data binding
<igx-column [(hidden)] = "model.columns[0].isHidden"></igx-column>
Gets the column index.
let columnIndex = this.column.index;
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
Returns if the column group is selectable
let columnGroupSelectable = this.columnGroup.selectable;
Returns if the column group is selected.
let isSelected = this.columnGroup.selected;
Select/deselect the column group.
this.columnGroup.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 group summaries
.
let columnGroupSummaries = this.columnGroup.summaries;
Sets the column group summaries
.
this.columnGroup.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 group.
let columnGroupWidth = this.columnGroup.width;
Gets the width
of the column.
let columnWidth = this.column.width;
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 Group
Igx Parent
IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent