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.
Properties
Section titled "Properties"additionalTemplateContext
Section titled "additionalTemplateContext"Sets/gets custom properties provided in additional template context.
additionalTemplateContext: anyautosizeHeader
Section titled "autosizeHeader"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.
autosizeHeader: booleanbodyTemplate
Section titled "bodyTemplate"Returns a reference to the bodyTemplate.
bodyTemplate: (ctx: IgrCellTemplateContext) => React.ReactNodecellClasses
Section titled "cellClasses"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:
cellClasses: anycellStyles
Section titled "cellStyles"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.
cellStyles: anycolEnd
Section titled "colEnd"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
colEnd: numbercolStart
Section titled "colStart"Column index from which the field is starting.
colStart: numberdataType
Section titled "dataType"Sets/gets the data type of the column values.
Default value is string.
dataType: GridColumnDataTypedisabledSummaries
Section titled "disabledSummaries"Sets/gets the summary operands to exclude from display. Accepts an array of string keys representing the summary types to disable, such as 'Min', 'Max', 'Count' etc.
disabledSummaries: string[]disableHiding
Section titled "disableHiding"Gets whether the hiding is disabled.
disableHiding: booleandisablePinning
Section titled "disablePinning"Gets whether the pinning is disabled.
disablePinning: booleaneditable
Section titled "editable"Gets whether the column is editable.
Default value is false.
editable: booleaneditorOptions
Section titled "editorOptions"Pass optional properties for the default column editors.
editorOptions: IgrColumnEditorOptionserrorTemplate
Section titled "errorTemplate"Returns a reference to the validation error template.
errorTemplate: (ctx: IgrCellTemplateContext) => React.ReactNodefield
Section titled "field"Sets/gets the field value.
field: stringfilterable
Section titled "filterable"Sets/gets whether the column is filterable.
Default value is true.
filterable: booleanfilterCellTemplate
Section titled "filterCellTemplate"Returns a reference to the filterCellTemplate.
filterCellTemplate: (ctx: IgrColumnTemplateContext) => React.ReactNodefilteringIgnoreCase
Section titled "filteringIgnoreCase"Sets/gets whether the column filtering should be case sensitive.
Default value is true.
filteringIgnoreCase: booleanfilters
Section titled "filters"Gets the column filters.
filters: IgrFilteringOperandformatter
Section titled "formatter"Applies display format to cell values in the column. Does not modify the underlying data.
formatter: anygroupable
Section titled "groupable"Sets/gets whether the column is groupable.
Default value is false.
groupable: booleanhasSummary
Section titled "hasSummary"Gets a value indicating whether the summary for the column is enabled.
hasSummary: booleanheader
Section titled "header"Sets/gets the header value.
header: stringheaderClasses
Section titled "headerClasses"Sets/gets the class selector of the column header.
headerClasses: stringheaderGroupClasses
Section titled "headerGroupClasses"Sets/gets the class selector of the column group header.
headerGroupClasses: stringheaderGroupStyles
Section titled "headerGroupStyles"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.
headerGroupStyles: anyheaderStyles
Section titled "headerStyles"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.
headerStyles: anyheaderTemplate
Section titled "headerTemplate"Returns a reference to the header template.
headerTemplate: (ctx: IgrColumnTemplateContext) => React.ReactNodehidden
Section titled "hidden"Gets whether the column is hidden.
hidden: booleaninlineEditorTemplate
Section titled "inlineEditorTemplate"Returns a reference to the inline editor template.
inlineEditorTemplate: (ctx: IgrCellTemplateContext) => React.ReactNodemaxWidth
Section titled "maxWidth"Sets/gets the maximum width of the column.
maxWidth: stringmerge
Section titled "merge"Sets/gets whether to merge cells in this column.
merge: booleanminWidth
Section titled "minWidth"Sets/gets the minimum width of the column.
Default value is 88;
minWidth: stringparent
Section titled "parent"Sets/gets the parent column.
parent: IgrColumnComponentpinned
Section titled "pinned"Gets whether the column is pinned.
pinned: booleanpinningPosition
Section titled "pinningPosition"Gets the pinning position of the column.
let pinningPosition = this.column.pinningPosition;
pinningPosition: ColumnPinningPositionpipeArgs
Section titled "pipeArgs"pipeArgs: IgrColumnPipeArgsresizable
Section titled "resizable"Sets/gets whether the column is resizable.
Default value is false.
resizable: booleanrowEnd
Section titled "rowEnd"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
rowEnd: numberrowStart
Section titled "rowStart"Row index from which the field is starting.
rowStart: numbersearchable
Section titled "searchable"Sets/gets whether the column is searchable.
Default value is true.
searchable: booleanselectable
Section titled "selectable"Returns if the column is selectable.
selectable: booleanselected
Section titled "selected"Returns if the column is selected.
selected: booleansortable
Section titled "sortable"Sets/gets whether the column is sortable.
Default value is false.
sortable: booleansortingIgnoreCase
Section titled "sortingIgnoreCase"Sets/gets whether the column sorting should be case sensitive.
Default value is true.
sortingIgnoreCase: booleansortStrategy
Section titled "sortStrategy"Gets the column sortStrategy.
sortStrategy: IgrSortingStrategysummaries
Section titled "summaries"Gets the column summaries.
summaries: anysummaryFormatter
Section titled "summaryFormatter"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.
summaryFormatter: anysummaryTemplate
Section titled "summaryTemplate"Returns a reference to the summaryTemplate.
summaryTemplate: (ctx: IgrSummaryTemplateContext) => React.ReactNodetitle
Section titled "title"Sets/gets the title value.
title: stringvisibleWhenCollapsed
Section titled "visibleWhenCollapsed"Indicates whether the column will be visible when its parent is collapsed.
visibleWhenCollapsed: booleanwidth
Section titled "width"Gets the width of the column.
width: stringAccessors
Section titled "Accessors"childColumns
Section titled "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(): IgrColumnComponent[]Returns IgrColumnComponent[]
columnGroup
Section titled "columnGroup"Returns a boolean indicating if the column is a ColumnGroup.
get columnGroup(): booleanReturns boolean
columnLayout
Section titled "columnLayout"Returns a boolean indicating if the column is a ColumnLayout for multi-row layout.
get columnLayout(): booleanReturns boolean
columnLayoutChild
Section titled "columnLayoutChild"Returns a boolean indicating if the column is a child of a ColumnLayout for multi-row layout.
get columnLayoutChild(): booleanReturns boolean
filteringExpressionsTree
Section titled "filteringExpressionsTree"Returns the filteringExpressionsTree of the column.
get filteringExpressionsTree(): IgrFilteringExpressionsTreeReturns IgrFilteringExpressionsTree
index
Section titled "index"Gets the column index.
get index(): numberReturns number
level
Section titled "level"Returns the level of the column in a column group.
Returns 0 if the column doesn't have a parent.
get level(): numberReturns number
topLevelParent
Section titled "topLevelParent"Returns a reference to the top level parent column.
get topLevelParent(): IgrColumnComponentReturns IgrColumnComponent
visibleIndex
Section titled "visibleIndex"Gets the column visible index.
If the column is not visible, returns -1.
get visibleIndex(): numberReturns number
Methods
Section titled "Methods"autosize
Section titled "autosize"Autosize the column to the longest currently visible cell value, including the header cell. ``
autosize(byHeaderOnly: boolean): voidParameters
- byHeaderOnly:
booleanSet 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.
move(index: number): voidParameters
- 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): booleanParameters
- index:
number - pinningPosition:
ColumnPinningPosition
Returns boolean
unpin
Section titled "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): booleanParameters
- index:
number
Returns boolean
Events
Section titled "Events"onExpandedChange
Section titled "onExpandedChange"onExpandedChange(args: CustomEvent<boolean>): voidParameters
- args:
CustomEvent<boolean>
Returns void
onHiddenChange
Section titled "onHiddenChange"onHiddenChange(args: CustomEvent<boolean>): voidParameters
- args:
CustomEvent<boolean>
Returns void
onPinnedChange
Section titled "onPinnedChange"onPinnedChange(args: CustomEvent<boolean>): voidParameters
- args:
CustomEvent<boolean>
Returns void
onWidthChange
Section titled "onWidthChange"onWidthChange(args: CustomEvent<string>): voidParameters
- args:
CustomEvent<string>