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] = "'75%'"></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 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>hidden
Returns the children columns collection.
let columns = this.columnGroup.allChildren;Gets the column group cells.
let columnCells = this.columnGroup.cells;Returns a boolean indicating if the column is a ColumnGroup.
let isColumnGroup = this.columnGroup.columnGroupReturns 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 group filters.
let columnGroupFilters = this.columnGroup.filters;Sets the column group filters.
this.columnGroup.filters = IgxStringFilteringOperand;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 group is hidden.
let isHidden = this.columnGroup.hidden;Two-way data binding
<igx-column [(hidden)] = "model.columns[0].isHidden"></igx-column>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] = "'15%'"></igx-column>Sets/gets the minimum width of the column.
Default value is 88;
let columnMinWidth = this.column.minWidth;<igx-column [minWidth] = "'15%'"></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>Gets the column sortStrategy.
let sortStrategy = this.column.sortStrategySets 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 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;Gets the width of the column group.
let columnGroupWidth = this.columnGroup.width;Gets the width of the column group.
let columnGroupWidth = this.columnGroup.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();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();
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) => { return rowData[columnKey] > 6; } cellClasses = { 'className' : this.callback };<igx-column [cellClasses] = "cellClasses"></igx-column> <igx-column [cellClasses] = "{'class1' : true }"></igx-column>IgxColumnComponent