Class IgxColumnComponent

Ignite UI for Angular Column - Documentation

The Ignite UI Column is used within an igx-grid element 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 using ng-template which will be used for all cells within the column.

Hierarchy

Implements

  • AfterContentInit
  • OnDestroy

Constructors

constructor

Properties

calcPixelWidth

calcPixelWidth: number

cdr

cdr: ChangeDetectorRef

cellClasses

cellClasses: any

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

IgxColumnComponent

cellStyles

cellStyles: any = null

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

IgxColumnComponent

children

children: QueryList<IgxColumnComponent>

Sets/gets the children columns.

let columnChildren = this.column.children;
this.column.children = childrenColumns;
memberof

IgxColumnComponent

colEnd

colEnd: number

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

IgxColumnComponent

colStart

colStart: number

Column index from which the field is starting.

<igx-column-layout>
  <igx-column [colStart]="1" [rowStart]="1"></igx-column>
</igx-column-layout>
memberof

IgxColumnComponent

dataType

dataType: DataType = DataType.String

Sets/gets the data type of the column values. Default value is string.

let columnDataType = this.column.dataType;
<igx-column [dataType] = "'number'"></igx-column>
memberof

IgxColumnComponent

defaultWidth

defaultWidth: string

hidden

disableHiding

disableHiding: boolean = false

Gets whether the hiding is disabled.

let isHidingDisabled =  this.column.disableHiding;
memberof

IgxColumnComponent

disablePinning

disablePinning: boolean = false

Gets whether the pinning is disabled.

let isPinningDisabled =  this.column.disablePinning;
memberof

IgxColumnComponent

field

field: string

Sets/gets the field value.

let columnField = this.column.field;
<igx-column [field] = "'ID'"></igx-column>
memberof

IgxColumnComponent

filterable

filterable: boolean = true

Sets/gets whether the column is filterable. Default value is true.

let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>
memberof

IgxColumnComponent

filteringIgnoreCase

filteringIgnoreCase: boolean = true

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

IgxColumnComponent

formatter

formatter: function

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", "$");
}
memberof

IgxColumnComponent

Type declaration

    • (value: any): any
    • Parameters

      • value: any

      Returns any

gridAPI

gridAPI: GridBaseAPIService<IgxGridBaseComponent & IGridDataBindable>

gridID

gridID: string
deprecated

Gets/Sets the id of the igx-grid.

let columnGridId = this.column.gridID;
this.column.gridID = 'grid-1';
memberof

IgxColumnComponent

groupable

groupable: boolean = false

Sets/gets whether the column is groupable. Default value is false.

let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
memberof

IgxColumnComponent

header

header: string = ""

Sets/gets the header value.

let columnHeader = this.column.header;
<igx-column [header] = "'ID'"></igx-column>
memberof

IgxColumnComponent

headerClasses

headerClasses: string = ""

Sets/gets the class selector of the column header.

let columnHeaderClass = this.column.headerClasses;
<igx-column [headerClasses] = "'column-header'"></igx-column>
memberof

IgxColumnComponent

headerGroupClasses

headerGroupClasses: string = ""

Sets/gets the class selector of the column group header.

let columnHeaderClass = this.column.headerGroupClasses;
<igx-column [headerGroupClasses] = "'column-group-header'"></igx-column>
memberof

IgxColumnComponent

maxWidth

maxWidth: string

Sets/gets the maximum width of the column.

let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'75%'"></igx-column>
memberof

IgxColumnComponent

movable

movable: boolean = false

Sets/gets whether the column is movable. Default value is false.

let isMovable = this.column.movable;
<igx-column [movable] = "true"></igx-column>
memberof

IgxColumnComponent

parent

parent: any = null

Sets/gets the parent column.

let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
memberof

IgxColumnComponent

resizable

resizable: boolean = false

Sets/gets whether the column is resizable. Default value is false.

let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
memberof

IgxColumnComponent

rowEnd

rowEnd: number

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

IgxColumnComponent

rowStart

rowStart: number

Row index from which the field is starting.

<igx-column-layout>
  <igx-column [rowStart]="1" [colStart]="1"></igx-column>
</igx-column-layout>
memberof

IgxColumnComponent

searchable

searchable: boolean = true

Sets/gets whether the column is searchable. Default value is true.

let isSearchable =  this.column.searchable';
 <igx-column [searchable] = "false"></igx-column>
memberof

IgxColumnComponent

sortable

sortable: boolean = false

Sets/gets whether the column is sortable. Default value is false.

let isSortable = this.column.sortable;
<igx-column [sortable] = "true"></igx-column>
memberof

IgxColumnComponent

sortingIgnoreCase

sortingIgnoreCase: boolean = true

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

IgxColumnComponent

widthSetByUser

widthSetByUser: boolean

hidden

Accessors

allChildren

  • Returns the children columns collection. Returns an empty array if the column does not contain children columns.

    let childrenColumns =  this.column.allChildren;
    memberof

    IgxColumnComponent

    Returns IgxColumnComponent[]

bodyTemplate

  • get bodyTemplate(): TemplateRef<any>
  • set bodyTemplate(template: TemplateRef<any>): void
  • Returns a reference to the bodyTemplate.

    let bodyTemplate = this.column.bodyTemplate;
    memberof

    IgxColumnComponent

    Returns TemplateRef<any>

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

    IgxColumnComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

cells

columnGroup

  • get columnGroup(): boolean
  • Returns a boolean indicating if the column is a ColumnGroup.

    let columnGroup =  this.column.columnGroup;
    memberof

    IgxColumnComponent

    Returns boolean

columnLayout

  • get columnLayout(): boolean
  • Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.

    let columnGroup =  this.column.columnGroup;
    memberof

    IgxColumnComponent

    Returns boolean

columnLayoutChild

  • get columnLayoutChild(): any
  • Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.

    let columnLayoutChild =  this.column.columnLayoutChild;
    memberof

    IgxColumnComponent

    Returns any

defaultMinWidth

  • get defaultMinWidth(): string
  • Gets the default minimum width of the column.

    let defaultMinWidth =  this.column.defaultMinWidth;
    memberof

    IgxColumnComponent

    Returns string

editable

  • get editable(): boolean
  • set editable(editable: boolean): void
  • Gets whether the column is editable. Default value is false.

    let isEditable = this.column.editable;
    memberof

    IgxColumnComponent

    Returns boolean

  • Sets whether the column is editable.

    this.column.editable = true;
    <igx-column [editable] = "true"></igx-column>
    memberof

    IgxColumnComponent

    Parameters

    • editable: boolean

    Returns void

filterCell

  • get filterCell(): IgxGridFilteringCellComponent
  • 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;
    memberof

    IgxColumnComponent

    Returns IgxGridFilteringCellComponent

filterCellTemplate

  • get filterCellTemplate(): TemplateRef<any>
  • set filterCellTemplate(template: TemplateRef<any>): void
  • Returns a reference to the filterCellTemplate.

    let filterCellTemplate = this.column.filterCellTemplate;
    memberof

    IgxColumnComponent

    Returns TemplateRef<any>

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

    IgxColumnComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

filteringExpressionsTree

filters

grid

gridColumnSpan

  • get gridColumnSpan(): number

gridRowSpan

  • get gridRowSpan(): number

groupingComparer

  • get groupingComparer(): function
  • set groupingComparer(funcRef: function): void
  • Gets the function that compares values for grouping.

    let groupingComparer = this.column.groupingComparer'
    memberof

    IgxColumnComponent

    Returns function

      • (a: any, b: any): number
      • Parameters

        • a: any
        • b: any

        Returns number

  • 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; }
    memberof

    IgxColumnComponent

    Parameters

    • funcRef: function
        • (a: any, b: any): number
        • Parameters

          • a: any
          • b: any

          Returns number

    Returns void

hasSummary

  • get hasSummary(): boolean
  • set hasSummary(value: boolean): void
  • Gets a value indicating whether the summary for the column is enabled.

    let hasSummary = this.column.hasSummary;
    memberof

    IgxColumnComponent

    Returns boolean

  • Sets a value indicating whether the summary for the column is enabled. Default value is false.

    <igx-column [hasSummary] = "true"></igx-column>
    memberof

    IgxColumnComponent

    Parameters

    • value: boolean

    Returns void

headerCell

  • get headerCell(): IgxGridHeaderComponent
  • Returns a reference to the header of the column.

    let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
    let headerCell = column.headerCell;
    memberof

    IgxColumnComponent

    Returns IgxGridHeaderComponent

headerGroup

  • get headerGroup(): IgxGridHeaderGroupComponent

headerTemplate

  • get headerTemplate(): TemplateRef<any>
  • set headerTemplate(template: TemplateRef<any>): void
  • Returns a reference to the header template.

    let headerTemplate = this.column.headerTemplate;
    memberof

    IgxColumnComponent

    Returns TemplateRef<any>

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

    IgxColumnComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

hidden

  • get hidden(): boolean
  • set hidden(value: boolean): void
  • Gets whether the column is hidden.

    let isHidden = this.column.hidden;

    Two-way data binding.

    <igx-column [(hidden)] = "model.isHidden"></igx-column>
    memberof

    IgxColumnComponent

    Returns boolean

  • 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>
    memberof

    IgxColumnComponent

    Parameters

    • value: boolean

    Returns void

index

  • get index(): number

inlineEditorTemplate

  • get inlineEditorTemplate(): TemplateRef<any>
  • set inlineEditorTemplate(template: TemplateRef<any>): void
  • Returns a reference to the inline editor template.

    let inlineEditorTemplate = this.column.inlineEditorTemplate;
    memberof

    IgxColumnComponent

    Returns TemplateRef<any>

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

    IgxColumnComponent

    Parameters

    • template: TemplateRef<any>

    Returns void

isLastPinned

  • get isLastPinned(): boolean

level

  • get level(): number
  • 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;
    memberof

    IgxColumnComponent

    Returns number

minWidth

  • get minWidth(): string
  • set minWidth(value: string): void
  • Sets/gets the minimum width of the column. Default value is 88;

    let columnMinWidth = this.column.minWidth;
    <igx-column [minWidth] = "'15%'"></igx-column>

    Returns string

  • Sets/gets the minimum width of the column. Default value is 88;

    let columnMinWidth = this.column.minWidth;
    <igx-column [minWidth] = "'15%'"></igx-column>
    memberof

    IgxColumnComponent

    Parameters

    • value: string

    Returns void

pinned

  • get pinned(): boolean
  • set pinned(value: boolean): void
  • Gets whether the column is pinned.

    let isPinned = this.column.pinned;

    Two-way data binding.

    <igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>
    memberof

    IgxColumnComponent

    Returns boolean

  • 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>
    memberof

    IgxColumnComponent

    Parameters

    • value: boolean

    Returns void

sortStrategy

summaries

  • get summaries(): any
  • set summaries(classRef: any): void
  • Gets the column summaries.

    let columnSummaries = this.column.summaries;
    memberof

    IgxColumnComponent

    Returns any

  • Sets the column summaries.

    this.column.summaries = IgxNumberSummaryOperand;
    memberof

    IgxColumnComponent

    Parameters

    • classRef: any

    Returns void

topLevelParent

  • get topLevelParent(): any
  • Returns a reference to the top level parent column.

    let topLevelParent =  this.column.topLevelParent;
    memberof

    IgxColumnComponent

    Returns any

visibleIndex

  • get visibleIndex(): number
  • Gets the column visible index. If the column is not visible, returns -1.

    let visibleColumnIndex =  this.column.visibleIndex;
    memberof

    IgxColumnComponent

    Returns number

width

  • get width(): string
  • set width(value: string): void
  • Gets the width of the column.

    let columnWidth = this.column.width;

    Two-way data binding.

    <igx-column [(width)]="model.columns[0].width"></igx-column>
    memberof

    IgxColumnComponent

    Returns string

  • 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>
    memberof

    IgxColumnComponent

    Parameters

    • value: string

    Returns void

Methods

autosize

  • autosize(): void
  • 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();
    memberof

    IgxColumnComponent

    Returns void

getFilledChildColumnSizes

getInitialChildColumnSizes

getResizableColUnderEnd

pin

  • pin(index?: number): boolean
  • 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:

    • Is already pinned
    • index argument is out of range
    • The pinned area exceeds 80% of the grid width
      let success = this.column.pin();
    memberof

    IgxColumnComponent

    Parameters

    • Optional index: number

    Returns boolean

unpin

  • unpin(index?: number): boolean
  • 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:

    • Is already unpinned
    • index argument is out of range
      let success = this.column.unpin();
    memberof

    IgxColumnComponent

    Parameters

    • Optional index: number

    Returns boolean