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

Index

Constructors

constructor

Properties

additionalTemplateContext

additionalTemplateContext: any

Sets/gets custom properties provided in additional template context.

<igx-column [additionalTemplateContext]="contextObject">
  <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
     {{ props }}
  </ng-template>
</igx-column>
@memberof

IgxColumnComponent

autosizeHeader

autosizeHeader: boolean = true

Sets/gets whether the column header is included in autosize logic. Useful when template for a column header is sized based on parent, for example a default div. Default value is false.

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

IgxColumnComponent

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: GridColumnDataType = ...

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

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

Applies display format to cell values in the column. Does not modify the underlying data.

@remark

Note: As the formatter is used in places like the Excel style filtering dialog, in certain scenarios (remote filtering for example), the row data argument can be undefined.

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.

@example
columnInit(column: IgxColumnComponent) {
  if (column.field == "Salary") {
    column.formatter = (salary => this.format(salary));
  }
}

format(value: number) : string {
  return formatCurrency(value, "en-us", "$");
}
@example
const column = this.grid.getColumnByName('Address');
const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
column.formatter = addressFormatter;
@memberof

IgxColumnComponent

Type declaration

    • (value: any, rowData?: any): any
    • Applies display format to cell values in the column. Does not modify the underlying data.

      @remark

      Note: As the formatter is used in places like the Excel style filtering dialog, in certain scenarios (remote filtering for example), the row data argument can be undefined.

      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.

      @example
      columnInit(column: IgxColumnComponent) {
        if (column.field == "Salary") {
          column.formatter = (salary => this.format(salary));
        }
      }
      
      format(value: number) : string {
        return formatCurrency(value, "en-us", "$");
      }
      
      @example
      const column = this.grid.getColumnByName('Address');
      const addressFormatter = (address: string, rowData: any) => data.privacyEnabled ? 'unknown' : address;
      column.formatter = addressFormatter;
      
      @memberof

      IgxColumnComponent

      Parameters

      • value: any
      • Optional rowData: 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

headerGroupStyles

headerGroupStyles: any = null

Sets conditional style properties on the column header group wrapper. Similar to ngStyle it accepts an object literal where the keys are the style properties and the value is the expression to be evaluated.

styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerGroupStyles]="styles"></igx-column>
@memberof

IgxColumnComponent

headerStyles

headerStyles: any = null

Sets conditional style properties on the column header. Similar to ngStyle it accepts an object literal where the keys are the style properties and the value is the expression to be evaluated.

styles = {
 background: 'royalblue',
 color: (column) => column.pinned ? 'red': 'inherit'
}
<igx-column [headerStyles]="styles"></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

summaryFormatter

summaryFormatter: function

The summaryFormatter is used to format the display of the column summaries.

In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.

columnInit(column: IgxColumnComponent) {
  if (column.field == "OrderDate") {
    column.summaryFormatter = this.summaryFormat;
  }
}

summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
  const result = summary.summaryResult;
  if(summaryResult.key !== 'count' && result !== null && result !== undefined) {
     const pipe = new DatePipe('fr-FR');
     return pipe.transform(result,'mediumDate');
  }
  return result;
}
@memberof

IgxColumnComponent

Type declaration

    • The summaryFormatter is used to format the display of the column summaries.

      In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.

      columnInit(column: IgxColumnComponent) {
        if (column.field == "OrderDate") {
          column.summaryFormatter = this.summaryFormat;
        }
      }
      
      summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
        const result = summary.summaryResult;
        if(summaryResult.key !== 'count' && result !== null && result !== undefined) {
           const pipe = new DatePipe('fr-FR');
           return pipe.transform(result,'mediumDate');
        }
        return result;
      }
      
      @memberof

      IgxColumnComponent

      Parameters

      Returns any

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

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

field

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

filterCell

  • get filterCell(): IgxGridFilteringCellComponent

filterCellTemplate

  • get filterCellTemplate(): TemplateRef<any>
  • set filterCellTemplate(template: TemplateRef<any>): 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
      • Gets the function that compares values for grouping.

        let groupingComparer = this.column.groupingComparer'
        
        @memberof

        IgxColumnComponent

        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(byHeaderOnly?: 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

    • byHeaderOnly: boolean = false

      Set if column should be autosized based only on the header content.

    Returns void

getFilledChildColumnSizes

getInitialChildColumnSizes

  • getInitialChildColumnSizes(children: QueryList<IgxColumnComponent>): 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, or to the initial index in the pinned area. 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, or to the initial index in the unpinned area. 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