A list containing all the child columns under this column (if any). Empty without children or if this column is not Group or Layout.
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;
Returns the filteringExpressionsTree of the column.
let tree = this.column.filteringExpressionsTree;
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;
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;
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();
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>
Returns a reference to the bodyTemplate.
let bodyTemplate = this.column.bodyTemplate;
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>
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>
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 hiding is disabled.
let isHidingDisabled = this.column.disableHiding;
Gets whether the pinning is disabled.
let isPinningDisabled = this.column.disablePinning;
Gets whether the column is editable.
Default value is false.
let isEditable = this.column.editable;
Pass optional properties for the default column editors.
Returns a reference to the validation error template.
let errorTemplate = this.column.errorTemplate;
Sets/gets the field value.
let columnField = this.column.field;
<igx-column [field] = "'ID'"></igx-column>
Sets/gets whether the column is filterable.
Default value is true.
let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>
Returns a reference to the filterCellTemplate.
let filterCellTemplate = this.column.filterCellTemplate;
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>
Gets the column filters.
let columnFilters = this.column.filters'
Applies display format to cell values in the column. Does not modify the underlying data.
Sets/gets whether the column is groupable.
Default value is false.
let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
Gets a value indicating whether the summary for the column is enabled.
let hasSummary = this.column.hasSummary;
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>
Returns a reference to the header template.
let headerTemplate = this.column.headerTemplate;
Gets whether the column is hidden.
let isHidden = this.column.hidden;
Returns a reference to the inline editor template.
let inlineEditorTemplate = this.column.inlineEditorTemplate;
Sets/gets the maximum width of the column.
let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'150px'"></igx-column>
Sets/gets the minimum width of the column.
Default value is 88;
let columnMinWidth = this.column.minWidth;
<igx-column [minWidth] = "'100px'"></igx-column>
Sets/gets the parent column.
let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
Gets whether the column is pinned.
let isPinned = this.column.pinned;
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>
Returns if the column is selectable.
let columnSelectable = this.column.selectable;
Returns if the column is selected.
let isSelected = this.column.selected;
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>
Gets the column sortStrategy.
let sortStrategy = this.column.sortStrategy
Gets the column summaries.
let columnSummaries = this.column.summaries;
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;
}
Returns a reference to the summaryTemplate.
let summaryTemplate = this.column.summaryTemplate;
Sets/gets the title value.
let title = this.column.title;
<igx-column [title] = "'Some column tooltip'"></igx-column>
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;
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.