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;this.column.children = childrenColumns;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>hidden
Gets whether the hiding is disabled.
let isHidingDisabled = this.column.disableHiding;Gets whether the pinning is disabled.
let isPinningDisabled = this.column.disablePinning;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>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>When autogenerating columns, the formatter is used to format the display of the column data without modifying the underlying bound values.
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.
onColumnInit(column: IgxColumnComponent) {
if (column.field == "Salary") {
column.formatter = (salary => this.format(salary));
}
}
format(value: number) : string {
return formatCurrency(value, "en-us", "$");
}Sets/gets whether the column is groupable.
Default value is false.
let isGroupable = this.column.groupable;<igx-column [groupable] = "true"></igx-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/gets the maximum width of the column.
let columnMaxWidth = this.column.width;<igx-column [maxWidth] = "'150px'"></igx-column>Sets/gets whether the column is movable.
Default value is false.
let isMovable = this.column.movable;<igx-column [movable] = "true"></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>Sets/gets the title value.
let title = this.column.title;<igx-column [title] = "'Some column tooltip'"></igx-column>hidden
Returns the children columns collection. Returns an empty array if the column does not contain children columns.
let childrenColumns = this.column.allChildren;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;Gets the cells of the column.
let columnCells = this.column.cells;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 the default minimum width of the column.
let defaultMinWidth = this.column.defaultMinWidth;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 filter cell of the column.
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let filterell = column.filterell;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().The reference to the igx-grid owner.
let gridComponent = this.column.grid;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) => { 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 of the column.
let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
let headerCell = column.headerCell;Returns a reference to the header group of the 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;Two-way data binding.
<igx-column [(hidden)] = "model.isHidden"></igx-column>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>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;Two-way data binding.
<igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>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>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.sortStrategySets 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 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>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;Two-way data binding.
<igx-column [(width)]="model.columns[0].width"></igx-column>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();Pins the column at the provided index in the pinned area. Defaults to index 0 if not provided.
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.
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.