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.

IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, IgxRowIslandComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent

Hierarchy

Hierarchy (view full)

Implements

Constructors

Properties

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>

IgxColumnComponent

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>

IgxColumnComponent

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>

IgxColumnComponent

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>

IgxColumnComponent

children: QueryList<IgxColumnComponent>

Sets/gets the children columns.

let columnChildren = this.column.children;

in version 18.1.0. Use the childColumns property instead.

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>

IgxColumnComponent

colStart: number

Column index from which the field is starting.

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

IgxColumnComponent

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

IgxColumnComponent

disableHiding: boolean = false

Gets whether the hiding is disabled.

let isHidingDisabled =  this.column.disableHiding;

IgxColumnComponent

disablePinning: boolean = false

Gets whether the pinning is disabled.

let isPinningDisabled =  this.column.disablePinning;

IgxColumnComponent

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>

IgxColumnComponent

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>

IgxColumnComponent

formatter: ((value: any, rowData?: any) => any)

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

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.

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

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

IgxColumnComponent

Type declaration

    • (value, rowData?): any
    • Parameters

      • value: any
      • rowData: any

      Returns any

grid: GridType

Represents the instance of the parent GridType that contains this column.

header: string = ''

Sets/gets the header value.

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

IgxColumnComponent

headerClasses: string = ''

Sets/gets the class selector of the column header.

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

IgxColumnComponent

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>

IgxColumnComponent

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>

IgxColumnComponent

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>

IgxColumnComponent

maxWidth: string

Sets/gets the maximum width of the column.

let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'150px'"></igx-column>

IgxColumnComponent

parent: any = null

Sets/gets the parent column.

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

IgxColumnComponent

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>

IgxColumnComponent

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>

IgxColumnComponent

rowStart: number

Row index from which the field is starting.

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

IgxColumnComponent

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>

IgxColumnComponent

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>

IgxColumnComponent

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>

IgxColumnComponent

summaryFormatter: ((summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand) => any)

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

IgxColumnComponent

Type declaration

title: string = ''

Sets/gets the title value.

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

IgxColumnComponent

Accessors

  • get groupingComparer(): ((a: any, b: any, currRec?: any, groupRec?: any) => number)
  • Gets the function that compares values for grouping.

    let groupingComparer = this.column.groupingComparer'
    

    IgxColumnComponent

    Returns ((a: any, b: any, currRec?: any, groupRec?: any) => number)

      • (a, b, currRec?, groupRec?): number
      • Parameters

        • a: any
        • b: any
        • currRec: any
        • groupRec: any

        Returns number

  • set groupingComparer(funcRef): void
  • 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, currRec?: any, groupRec?: any) => { return a === b ? 0 : -1; }
    

    IgxColumnComponent

    Parameters

    • funcRef: ((a: any, b: any, currRec?: any, groupRec?: any) => number)
        • (a, b, currRec?, groupRec?): number
        • Parameters

          • a: any
          • b: any
          • currRec: any
          • groupRec: any

          Returns number

    Returns void

Methods

  • 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();

    IgxColumnComponent

    Parameters

    • byHeaderOnly: boolean = false

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

    Returns 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.

    column.move(index);
    

    IgxColumnComponent

    Parameters

    • index: number

    Returns void

  • 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();
    

    IgxColumnComponent

    Parameters

    • index: number

    Returns 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();
    

    IgxColumnComponent

    Parameters

    • index: number

    Returns boolean