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 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/gets the field value.

let columnField = this.column.field;

<igx-column [field] = "'ID'"></igx-column>

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;

Gets the column filters.

let columnFilters = this.column.filters'

Sets the column filters.

this.column.filters = IgxBooleanFilteringOperand.instance().

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 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;

Sets the column hidden property. Default value is false.

<igx-column [hidden] = "true"></igx-column>

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;

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;

Sets whether the column is pinned. Default value is false.

<igx-column [pinned] = "true"></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.sortStrategy

Sets 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 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;

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;

Sets the width of the column.

<igx-column [width] = "'25%'"></igx-column>