Class IgxPivotGridComponent

Pivot Grid provides a way to present and manipulate data in a pivot table view.

Igx Module

IgxPivotGridModule

Igx Group

Grids & Lists

Igx Keywords

pivot, grid, table

Igx Theme

igx-grid-theme

Remarks

The Ignite UI Pivot Grid is used for grouping and aggregating simple flat data into a pivot table. Once data has been bound and the dimensions and values configured it can be manipulated via sorting and filtering.

Example

<igx-pivot-grid [data]="data" [pivotConfiguration]="configuration">
</igx-pivot-grid>

Hierarchy

Hierarchy

Implements

  • OnInit
  • AfterContentInit
  • GridType
  • AfterViewInit

Constructors

Properties

Accessors

Methods

Constructors

Properties

activeNodeChange: EventEmitter<IActiveNodeChangeEventArgs> = ...

Emmited when the active node is changed.

Example

<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>
advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree> = ...

Emitted after advanced filtering is performed.

Remarks

Returns the advanced filtering expressions tree.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>
cdr: ChangeDetectorRef
cellClick: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is clicked.

Remarks

Returns the IgxGridCell.

Example

<igx-grid #grid (cellClick)="cellClick($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
clipboardOptions: {
    copyFormatters: boolean;
    copyHeaders: boolean;
    enabled: boolean;
    separator: string;
} = ...

Controls the copy behavior of the grid.

Type declaration

  • copyFormatters: boolean

    Apply the columns formatters (if any) on the data in the clipboard output.

  • copyHeaders: boolean

    Include the columns headers in the clipboard output.

  • enabled: boolean

    Enables/disables the copy behavior

  • separator: string

    The separator used for formatting the copy output. Defaults to \t.

colResizingService: IgxPivotColumnResizingService
columnGroupStates: Map<string, boolean> = ...
columnInit: EventEmitter<IgxColumnComponent> = ...

Emitted when a column is initialized.

Remarks

Returns the column object.

Example

<igx-grid #grid [data]="localData" (columnInit)="initColumns($event)" [autoGenerate]="true"></igx-grid>
columnResized: EventEmitter<IColumnResizeEventArgs> = ...

Emitted after column is resized.

Remarks

Returns the IgxColumnComponent object's old and new width.

Example

<igx-grid #grid [data]="localData" (columnResized)="resizing($event)" [autoGenerate]="true"></igx-grid>
columnSelectionChanging: EventEmitter<IColumnSelectionEventArgs> = ...

Emitted when IgxColumnComponent is selected.

Example

<igx-grid #grid (columnSelectionChanging)="columnSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
columnVisibilityChanged: EventEmitter<IColumnVisibilityChangedEventArgs> = ...

Emitted after column visibility is changed.

Remarks

Args: { column: IgxColumnComponent, newValue: boolean }

Example

<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>
columnVisibilityChanging: EventEmitter<IColumnVisibilityChangingEventArgs> = ...

Emitted before column visibility is changed.

Remarks

Args: { column: any, newValue: boolean }

Example

<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>
contextMenu: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is right clicked.

Remarks

Returns the IgxGridCell object.

<igx-grid #grid [data]="localData" (contextMenu)="contextMenu($event)" [autoGenerate]="true"></igx-grid>
dataChanged: EventEmitter<any> = ...

Emitted after the grid's data view is changed because of a data operation, rebinding, etc.

Example

 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanged)='handleDataChangedEvent()'></igx-grid>
dataChanging: EventEmitter<IForOfDataChangingEventArgs> = ...

Emitted before the grid's data view is changed because of a data operation, rebinding, etc.

Example

 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>
dimensionDataColumns: any
dimensionInit: EventEmitter<IPivotDimension> = ...

Emitted when the dimension is initialized.

Remarks

Emits the dimension that is about to be initialized.

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionInit)="dimensionInit($event)"></igx-pivot-grid>
dimensionsChange: EventEmitter<IDimensionsChange> = ...

Emitted when the dimension collection is changed via the grid chip area.

Remarks

Returns the new dimension collection and its type:

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionsChange)="dimensionsChange($event)"></igx-grid>
dimensionsSortingExpressionsChange: EventEmitter<ISortingExpression[]> = ...

Emitted when a dimension is sorted.

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(dimensionsSortingExpressionsChange)="dimensionsSortingExpressionsChange($event)"></igx-pivot-grid>
document: any
doubleClick: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is double clicked.

Remarks

Returns the IgxGridCell object.

Example

<igx-grid #grid [data]="localData" (doubleClick)="dblClick($event)" [autoGenerate]="true"></igx-grid>
emptyFilteredGridTemplate: TemplateRef<any>

A template reference for the template when the filtered grid is empty.

Example

const emptyTempalte = this.grid.emptyGridTemplate;
emptyGridDefaultTemplate: TemplateRef<any>

A template reference for the template when the grid is empty.

Example

const emptyTempalte = this.grid.emptyGridTemplate;
emptyGridTemplate: TemplateRef<any>

Gets/Sets a custom template when empty.

Example

<igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
emptyPivotGridTemplate: TemplateRef<any>

Gets/Sets a custom template when pivot grid is empty.

Example

<igx-pivot-grid [emptyPivotGridTemplate]="myTemplate"><igx-pivot-grid>
evenRowCSS: string = 'igx-grid__tr--even'

Deprecated

in version 12.2.0. We suggest using rowClasses property instead

Gets/Sets the styling classes applied to all even IgxGridRowComponents in the grid.

Example

<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>
excelStyleHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null

The custom template, if any, that should be used when rendering a row expand indicator.

filtering: EventEmitter<IFilteringEventArgs> = ...

Emitted before filtering expressions are applied.

Remarks

Returns an IFilteringEventArgs object. filteringExpressions key holds the filtering expressions for the column.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filtering)="filtering($event)"></igx-grid>
filteringDone: EventEmitter<IFilteringExpressionsTree> = ...

Emitted after filtering is performed through the UI.

Remarks

Returns the filtering expressions tree of the column for which filtering was performed.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (filteringDone)="filteringDone($event)"></igx-grid>
filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree> = ...

Emitted after filtering is performed.

Remarks

Returns the filtering expressions tree of the column for which filtering was performed.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(filteringExpressionsTreeChange)="filteringExprTreeChange($event)"></igx-grid>
filteringService: IgxFilteringService
formGroupCreated: EventEmitter<IGridFormGroupCreatedEventArgs> = ...

Emitted when formGroup is created on edit of row/cell.

Example

<igx-grid #grid (formGroupCreated)="formGroupCreated($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
gridAPI: GridServiceType
gridCopy: EventEmitter<IGridClipboardEvent> = ...

Emitted when a copy operation is executed.

Remarks

Fired only if copy behavior is enabled through the [clipboardOptions]clipboardOptions.

gridKeydown: EventEmitter<IGridKeydownEventArgs> = ...

Emitted when keydown is triggered over element inside grid's body.

Remarks

This event is fired only if the key combination is supported in the grid. Return the target type, target object and the original event. This event is cancelable.

Example

 <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>
gridScroll: EventEmitter<IGridScrollEventArgs> = ...

Emitted when grid is scrolled horizontally/vertically.

Example

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
(gridScroll)="onScroll($event)"></igx-grid>
headerCollapseIndicatorTemplate: TemplateRef<IgxGridTemplateContext> = null

The custom template, if any, that should be used when rendering a header collapse indicator.

headerExpandIndicatorTemplate: TemplateRef<IgxGridTemplateContext> = null

The custom template, if any, that should be used when rendering a header expand indicator.

isPivot: boolean = true
loadingGridTemplate: TemplateRef<any>

Gets/Sets a custom template when loading.

Example

<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
navigation: IgxGridNavigationService
oddRowCSS: string = 'igx-grid__tr--odd'

Deprecated

in version 12.2.0. We suggest using rowClasses property instead

Gets/Sets the styling classes applied to all odd IgxGridRowComponents in the grid.

Example

<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
primaryKey: any

Gets/Sets the primary key.

Example

<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
rangeSelected: EventEmitter<GridSelectionRange> = ...

Emitted when making a range selection.

Remarks

Range selection can be made either through drag selection or through keyboard selection.

rendered: EventEmitter<boolean> = ...

Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM

rowClasses: any

Sets a conditional class selector to the grid's row element. Accepts an object literal, containing key-value pairs, where the key is the name of the CSS class and the value is either a callback function that returns a boolean, or boolean, like so:

callback = (row: RowType) => { return row.selected > 6; }
rowClasses = { 'className' : this.callback };
<igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>

Memberof

IgxColumnComponent

rowCollapsedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext> = null

The custom template, if any, that should be used when rendering a row collapse indicator.

rowExpandedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext> = null

The custom template, if any, that should be used when rendering a row expand indicator.

rowSelectionChanging: EventEmitter<IRowSelectionEventArgs> = ...

Emitted when IgxGridRowComponent is selected.

Example

<igx-grid #grid (rowSelectionChanging)="rowSelectionChanging($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
rowStyles: any = null

Sets conditional style properties on the grid row element. It accepts an object literal where the keys are the style properties and the value is an expression to be evaluated.

styles = {
background: 'yellow',
color: (row: RowType) => row.selected : 'red': 'white'
}
<igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>

Memberof

IgxColumnComponent

rowToggle: EventEmitter<IRowToggleEventArgs> = ...

Emitted when the expanded state of a row gets changed.

Example

<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>
selected: EventEmitter<IGridCellEventArgs> = ...

Emitted when a cell is selected.

Remarks

Returns the IgxGridCell.

Example

<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
selectionService: IgxGridSelectionService
showPivotConfigurationUI: boolean = true
sortDescendingHeaderIconDirectiveTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null
sorting: EventEmitter<ISortingEventArgs> = ...

Emitted before sorting expressions are applied.

Remarks

Returns an ISortingEventArgs object. sortingExpressions key holds the sorting expressions.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>
sortingDone: EventEmitter<ISortingExpression | ISortingExpression[]> = ...

Emitted after sorting is completed.

Remarks

Returns the sorting expression.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingDone)="sortingDone($event)"></igx-grid>
sortingExpressionsChange: EventEmitter<ISortingExpression[]> = ...

Emitted before sorting is performed.

Remarks

Returns the sorting expressions.

Example

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>
summaryService: IgxGridSummaryService
uniqueColumnValuesStrategy: ((column: ColumnType, filteringExpressionsTree: IFilteringExpressionsTree, done: ((values: any[]) => void)) => void)

Type declaration

    • (column: ColumnType, filteringExpressionsTree: IFilteringExpressionsTree, done: ((values: any[]) => void)): void
    • Gets/Sets a unique values strategy used by the Excel Style Filtering

      Remarks

      Provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering.

      Example

      <igx-grid [data]="localData" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"></igx-grid>
      

      Parameters

      Returns void

validationStatusChange: EventEmitter<IGridValidationStatusEventArgs> = ...

Emitted when grid's validation status changes.

Example

<igx-grid #grid (validationStatusChange)="validationStatusChange($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>
validationTrigger: GridValidationTrigger = 'change'

Gets/Sets the trigger for validators used when editing the grid.

Example

<igx-grid #grid validationTrigger='blur'></igx-grid>
valueChipTemplate: TemplateRef<IgxPivotGridValueTemplateContext>

Gets/Sets a custom template for the value chips.

Example

<igx-pivot-grid [valueChipTemplate]="myTemplate"><igx-pivot-grid>
valueInit: EventEmitter<IPivotValue> = ...

Emitted when the value is initialized.

Remarks

Emits the value that is about to be initialized.

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(valueInit)="valueInit($event)"></igx-pivot-grid>
valuesChange: EventEmitter<IValuesChange> = ...

Emitted when the values collection is changed via the grid chip area.

Remarks

Returns the new dimension

Example

<igx-pivot-grid #grid [data]="localData" [height]="'305px'"
(valuesChange)="valuesChange($event)"></igx-grid>

Accessors

  • get dataRowList(): QueryList<IgxRowDirective>
  • A list of currently rendered IgxGridRowComponent's.

    Example

    const dataList = this.grid.dataRowList;
    

    Returns QueryList<IgxRowDirective>

  • get dataView(): any[]
  • Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.

    Example

         const dataView = this.grid.dataView;
    

    Returns any[]

  • get defaultHeaderGroupMinWidth(): number
  • Returns the IgxGridHeaderGroupComponent's minimum allowed width.

    Remarks

    Used internally for restricting header group component width. The values below depend on the header cell default right/left padding values.

    Returns number

  • set dragIndicatorIconTemplate(_val: TemplateRef<any>): void
  • Sets a custom template that should be used when rendering the row drag indicator icon.

    <ng-template #template igxDragIndicatorIcon>
    <igx-icon>expand_less</igx-icon>
    </ng-template>
    @ViewChild("'template'", {read: TemplateRef })
    public template: TemplateRef<any>;
    this.grid.dragIndicatorIconTemplate = this.template;

    Parameters

    • _val: TemplateRef<any>

    Returns void

  • get expansionStates(): Map<any, boolean>
  • Gets/Sets a list of key-value pairs [row ID, expansion state].

    Remarks

    Includes only states that differ from the default one. Supports two-way binding.

    Example

    <igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
    </igx-grid>

    Returns Map<any, boolean>

  • set expansionStates(value: Map<any, boolean>): void
  • Parameters

    • value: Map<any, boolean>

    Returns void

  • get filterCellList(): IgxGridFilteringCellComponent[]
  • A list of all IgxGridFilteringCellComponent.

    Example

    const filterCells = this.grid.filterCellList;
    

    Returns IgxGridFilteringCellComponent[]

  • get filteredSortedData(): any[]
  • Returns an array containing the filtered sorted data.

    Example

    const filteredSortedData = this.grid1.filteredSortedData;
    

    Returns any[]

  • get hasColumnLayouts(): boolean
  • Returns if the IgxGridComponent has column layouts for multi-row layout definition.

    Example

    const layoutGrid = this.grid.hasColumnLayouts;
    

    Returns boolean

  • get headerCellList(): IgxGridHeaderComponent[]
  • A list of all IgxGridHeaderComponent.

    Example

    const headers = this.grid.headerCellList;
    

    Returns IgxGridHeaderComponent[]

  • get headerGroupsList(): IgxGridHeaderGroupComponent[]
  • A list of all IgxGridHeaderGroupComponent.

    Example

    const headerGroupsList = this.grid.headerGroupsList;
    

    Returns IgxGridHeaderGroupComponent[]

  • get pivotKeys(): {
        aggregations: string;
        children: string;
        columnDimensionSeparator: string;
        level: string;
        records: string;
        rowDimensionSeparator: string;
    }
  • Returns {
        aggregations: string;
        children: string;
        columnDimensionSeparator: string;
        level: string;
        records: string;
        rowDimensionSeparator: string;
    }

    • aggregations: string
    • children: string
    • columnDimensionSeparator: string
    • level: string
    • records: string
    • rowDimensionSeparator: string
  • get rowSelectorTemplate(): TemplateRef<IgxRowSelectorTemplateContext>
  • Gets the row selector template.

    Returns TemplateRef<IgxRowSelectorTemplateContext>

  • set rowSelectorTemplate(template: TemplateRef<IgxRowSelectorTemplateContext>): void
  • Sets a custom template for the row selectors.

    <ng-template #template igxRowSelector let-rowContext>
    <igx-checkbox [checked]="rowContext.selected"></igx-checkbox>
    </ng-template>
    @ViewChild("'template'", {read: TemplateRef })
    public template: TemplateRef<any>;
    this.grid.rowSelectorTemplate = this.template;

    Parameters

    • template: TemplateRef<IgxRowSelectorTemplateContext>

    Returns void

  • set sortingOptions(value: ISortingOptions): void
  • Gets/Sets the sorting options - single or multiple sorting. Accepts an ISortingOptions object with any of the mode properties.

    Example

    const _sortingOptions: ISortingOptions = {
    mode: 'single'
    }
    ```html
    <igx-grid [sortingOptions]="sortingOptions"><igx-grid>

    Parameters

    Returns void

Methods

  • Deselects all rows

    Remarks

    By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows.

    Example

    this.grid.deselectAllRows();
    

    Parameters

    • onlyFilterData: boolean = true

    Returns void

  • Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].

    Remarks

    If formatters is enabled, the cell value will be formatted by its respective column formatter (if any). If headers is enabled, it will use the column header (if any) instead of the column field.

    Parameters

    • formatters: boolean = false
    • headers: boolean = false

    Returns any[]

  • Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].

    Remarks

    If formatters is enabled, the cell value will be formatted by its respective column formatter (if any). If headers is enabled, it will use the column header (if any) instead of the column field.

    Parameters

    • formatters: boolean = false
    • headers: boolean = false

    Returns any[]

  • Triggers change detection for the IgxGridComponent. Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed. May degrade performance if used when not needed, or if misused:

    // DON'Ts:
    // don't call markForCheck from inside a loop
    // don't call markForCheck when a primitive has changed
    grid.data.forEach(rec => {
    rec = newValue;
    grid.markForCheck();
    });

    // DOs
    // call markForCheck after updating a nested property
    grid.data.forEach(rec => {
    rec.nestedProp1.nestedProp2 = newValue;
    });
    grid.markForCheck();

    Example

    grid.markForCheck();
    

    Returns void

  • Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end.

    Example

    this.grid.moveDimension(dimension, PivotDimensionType.Row, 1);
    

    Parameters

    • dimension: IPivotDimension

      The dimension that will be moved.

    • targetCollectionType: PivotDimensionType

      The target collection type to move it to. Can be Row, Column or Filter.

    • Optional index: number

      The index in the collection at which to add. This parameter is optional. If not set it will add it to the end of the collection.

    Returns void

  • Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.

    Remarks

    Also can execute a custom logic over the target element, through a callback function that accepts { targetType: GridKeydownTargetType, target: Object }

    Example

     this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });
    

    Parameters

    • rowIndex: number
    • visibleColIndex: number = -1
    • cb: ((args: any) => void) = null
        • (args: any): void
        • Parameters

          • args: any

          Returns void

    Returns void

  • Selects all rows

    Remarks

    By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows. If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows.

    Example

    this.grid.selectAllRows();
    this.grid.selectAllRows(false);

    Parameters

    • onlyFilterData: boolean = true

    Returns void