IgcColumnComponent

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.

Constructors

new IgcColumnComponent(args: any[]): IgcColumnComponent

Returns IgcColumnComponent

Properties

tagName

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

tagName: string

additionalTemplateContext

additionalTemplateContext: any

autosizeHeader

autosizeHeader: boolean

bodyTemplate

bodyTemplate: IgcRenderFunction<IgcCellTemplateContext>

cellClasses

cellClasses: any

cellStyles

cellStyles: any

colEnd

colEnd: number

colStart

colStart: number

dataType

dataType: GridColumnDataType

disabledSummaries

disabledSummaries: string[]

disableHiding

disableHiding: boolean

disablePinning

disablePinning: boolean

editable

editable: boolean

editorOptions

editorOptions: IgcColumnEditorOptions

errorTemplate

errorTemplate: IgcRenderFunction<IgcCellTemplateContext>

field

field: string

filterable

filterable: boolean

filterCellTemplate

filterCellTemplate: IgcRenderFunction<IgcColumnTemplateContext>

filteringIgnoreCase

filteringIgnoreCase: boolean

filters

filters: IgcFilteringOperand

formatter

formatter: any

groupable

groupable: boolean

hasSummary

hasSummary: boolean

header: string

headerClasses

headerClasses: string

headerGroupClasses

headerGroupClasses: string

headerGroupStyles

headerGroupStyles: any

headerStyles

headerStyles: any

headerTemplate

headerTemplate: IgcRenderFunction<IgcColumnTemplateContext>

hidden

hidden: boolean

inlineEditorTemplate

inlineEditorTemplate: IgcRenderFunction<IgcCellTemplateContext>

maxWidth

maxWidth: string

merge

merge: boolean

minWidth

minWidth: string

parent

parent: IgcColumnComponent

pinned

pinned: boolean

pinningPosition

pinningPosition: ColumnPinningPosition

pipeArgs

pipeArgs: IgcColumnPipeArgs

resizable

resizable: boolean

rowEnd

rowEnd: number

rowStart

rowStart: number

searchable

searchable: boolean

selectable

selectable: boolean

selected

selected: boolean

sortable

sortable: boolean

sortingIgnoreCase

sortingIgnoreCase: boolean

sortStrategy

sortStrategy: IgcSortingStrategy

summaries

summaries: any

summaryFormatter

summaryFormatter: any

summaryTemplate

summaryTemplate: IgcRenderFunction<IgcSummaryTemplateContext>

title

title: string

visibleWhenCollapsed

visibleWhenCollapsed: boolean

width

width: string

Accessors

childColumns

A list containing all the child columns under this column (if any). Empty without children or if this column is not Group or Layout.

get childColumns(): IgcColumnComponent[]

Returns IgcColumnComponent[]

columnGroup

Returns a boolean indicating if the column is a ColumnGroup. ``

get columnGroup(): boolean

Returns boolean

columnLayout

Returns a boolean indicating if the column is a ColumnLayout for multi-row layout. ``

get columnLayout(): boolean

Returns boolean

columnLayoutChild

Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout. ``

get columnLayoutChild(): boolean

Returns boolean

filteringExpressionsTree

Returns the filteringExpressionsTree of the column. ``

get filteringExpressionsTree(): IgcFilteringExpressionsTree

Returns IgcFilteringExpressionsTree

index

Gets the column index. ``

get index(): number

Returns number

level

Returns the level of the column in a column group. Returns 0 if the column doesn't have a parent. ``

get level(): number

Returns number

topLevelParent

Returns a reference to the top level parent column. ``

get topLevelParent(): IgcColumnComponent

Returns IgcColumnComponent

visibleIndex

Gets the column visible index. If the column is not visible, returns -1. ``

get visibleIndex(): number

Returns number

Methods

addEventListener

Inherited from: EventEmitterMixin<IgcColumnComponentEventMap, Constructor<LitElement>>(LitElement)

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Parameters

type: K
listener: object
options: boolean | AddEventListenerOptions

Returns void

autosize

Autosize the column to the longest currently visible cell value, including the header cell. ``

autosize(byHeaderOnly: boolean): void

Parameters

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

Returns void

move

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.

move(index: number): void

Parameters

index: number

Returns void

Example

column.move(index);

Pins the column in the specified position at the provided index in that 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 ``

pin(index: number, pinningPosition: ColumnPinningPosition): boolean

Parameters

index: number
pinningPosition: ColumnPinningPosition

Returns boolean

removeEventListener

Inherited from: EventEmitterMixin<IgcColumnComponentEventMap, Constructor<LitElement>>(LitElement)

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Parameters

type: K
listener: object
options: boolean | EventListenerOptions

Returns void

unpin

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

unpin(index: number): boolean

Parameters

index: number

Returns boolean

register

register(): void

Returns void

Events

expandedChange

Emitted when the column expanded or collapsed.

<igx-column (expandedChange)="expandedChange($event)">
</igx-column>

expandedChange: CustomEvent<boolean>

hiddenChange

Emitted when the column is hidden or shown.

<igx-column (hiddenChange)="hiddenChange($event)">
</igx-column>

hiddenChange: CustomEvent<boolean>

pinnedChange

Emitted when the column is pinned/unpinned.

<igx-column (pinnedChange)="pinnedChange($event)">
</igx-column>

pinnedChange: CustomEvent<boolean>

widthChange

Emitted when the column width changes.

<igx-column (widthChange)="widthChange($event)">
</igx-column>

widthChange: CustomEvent<string>