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<IgxGridBaseDirective & GridType>

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] = "'150px'"></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

title

title: string = ""

Sets/gets the title value.

let title = this.column.title;
<igx-column [title] = "'Some column tooltip'"></igx-column>
@memberof

IgxColumnComponent

widthSetByUser

widthSetByUser: boolean

hidden

Accessors

allChildren

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

columnLayout

  • get columnLayout(): boolean

columnLayoutChild

  • get columnLayoutChild(): any

defaultMinWidth

  • get defaultMinWidth(): string

editable

  • get editable(): boolean
  • set editable(editable: boolean): void

filterCell

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

headerCell

  • get headerCell(): 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

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

isFirstPinned

  • get isFirstPinned(): boolean

isLastPinned

  • get isLastPinned(): boolean

level

  • get level(): number

minWidth

  • get minWidth(): string
  • set minWidth(value: string): void

pinned

  • get pinned(): boolean
  • set pinned(value: boolean): void

pipeArgs

rightPinnedOffset

  • get rightPinnedOffset(): string

selectable

  • get selectable(): boolean
  • set selectable(value: boolean): void

selected

  • get selected(): boolean
  • set selected(value: boolean): void

sortStrategy

summaries

  • get summaries(): any
  • set summaries(classRef: any): void

topLevelParent

  • get topLevelParent(): any

visibleIndex

  • get visibleIndex(): number

visibleWhenCollapsed

  • get visibleWhenCollapsed(): boolean
  • set visibleWhenCollapsed(value: boolean): void

width

  • get width(): string
  • set width(value: string): void

Methods

autosize

  • autosize(byHeader?: boolean): 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

    Parameters

    • Default value byHeader: boolean = false

      Set if column should be autized based only on the header content

    Returns void

getFilledChildColumnSizes

getInitialChildColumnSizes

  • getInitialChildColumnSizes(children: QueryList<IgxColumnComponent>): Array<MRLColumnSizeInfo>

getResizableColUnderEnd

  • getResizableColUnderEnd(): MRLResizeColumnInfo[]

move

  • move(index: number): void
  • 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.

    @example
    column.move(index);
    @memberof

    IgxColumnComponent

    Parameters

    • index: number

    Returns void

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