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

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>

Memberof

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>

Memberof

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>

Memberof

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>

Memberof

IgxColumnComponent

children: QueryList<IgxColumnComponent>

Sets/gets the children columns.

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

Memberof

IgxColumnComponent

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

Memberof

IgxColumnComponent

disableHiding: boolean = false

Gets whether the hiding is disabled.

let isHidingDisabled =  this.column.disableHiding;

Memberof

IgxColumnComponent

disablePinning: boolean = false

Gets whether the pinning is disabled.

let isPinningDisabled =  this.column.disablePinning;

Memberof

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>

Memberof

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>

Memberof

IgxColumnComponent

formatter: ((value, rowData?) => 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

Type declaration

    • (value, rowData?): any
    • Parameters

      • value: any
      • Optional rowData: any

      Returns any

grid: GridType

Represents the inctance 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>

Memberof

IgxColumnComponent

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: 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: 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: 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: string

Sets/gets the maximum width of the column.

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

Memberof

IgxColumnComponent

movable: boolean = false

Deprecated

in version 13.1.0. Use IgxGridComponent.moving instead.

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: any = null

Sets/gets the parent column.

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

Memberof

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>

Memberof

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>

Memberof

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>

Memberof

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>

Memberof

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>

Memberof

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>

Memberof

IgxColumnComponent

summaryFormatter: ((summary, summaryOperand) => 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;
}

Memberof

IgxColumnComponent

Type declaration

title: string = ''

Sets/gets the title value.

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

Memberof

IgxColumnComponent

Accessors

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

    let groupingComparer = this.column.groupingComparer'
    

    Memberof

    IgxColumnComponent

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

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

        • a: any
        • b: any
        • Optional currRec: any
        • Optional 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; }
    

    Memberof

    IgxColumnComponent

    Parameters

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

          • a: any
          • b: any
          • Optional currRec: any
          • Optional 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();

    Memberof

    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.

    Example

    column.move(index);
    

    Memberof

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

    Memberof

    IgxColumnComponent

    Parameters

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

    Memberof

    IgxColumnComponent

    Parameters

    • Optional index: number

    Returns boolean