Class IgxPivotGridComponent

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

igxmodule

IgxPivotGridModule

igxgroup

Grids & Lists

igxkeywords

pivot, grid, table

igxtheme

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

Implements

  • OnInit
  • AfterContentInit
  • GridType
  • AfterViewInit

Index

Constructors

Properties

Accessors

Methods

Constructors

  • new IgxPivotGridComponent(selectionService: IgxGridSelectionService, colResizingService: IgxPivotColumnResizingService, gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, transactionFactory: IgxFlatTransactionFactory, elementRef: ElementRef<HTMLElement>, zone: NgZone, document: any, cdr: ChangeDetectorRef, resolver: ComponentFactoryResolver, differs: IterableDiffers, viewRef: ViewContainerRef, appRef: ApplicationRef, moduleRef: NgModuleRef<any>, injector: Injector, navigation: IgxPivotGridNavigationService, filteringService: IgxFilteringService, overlayService: IgxOverlayService, summaryService: IgxGridSummaryService, _displayDensityOptions: IDisplayDensityOptions, localeId: string, platform: PlatformUtil, _diTransactions?: TransactionService<Transaction, State>): IgxPivotGridComponent

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
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>
excelStyleHeaderIconTemplate: TemplateRef<any> = 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
gridAPI: GridServiceType
gridCopy: EventEmitter<IGridClipboardEvent> = ...

Emitted when a copy operation is executed.

remarks

Fired only if copy behavior is enabled through the [clipboardOptions]{@link IgxGridBaseDirective#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<any> = null

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

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

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

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

The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.

sortDescendingHeaderIconTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.

sortHeaderIconTemplate: TemplateRef<any> = null

The custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.

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

    • 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

      • column: ColumnType
      • filteringExpressionsTree: IFilteringExpressionsTree
      • done: ((values: any[]) => void)
          • (values: any[]): void
          • Parameters

            • values: any[]

            Returns void

      Returns void

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 activeDescendant(): string
  • get bannerClass(): string
  • get columnWidth(): string
  • set columnWidth(value: string): void
  • get data(): any[]
  • set data(value: any[]): void
  • get dataRowList(): QueryList<IgxRowDirective>
  • get dataView(): any[]
  • get defaultExpandState(): boolean
  • set defaultExpandState(val: boolean): void
  • 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

  • get defaultRowHeight(): number
  • get emptyFilteredGridMessage(): string
  • set emptyFilteredGridMessage(value: string): void
  • Gets/Sets the message displayed when there are no records and the grid is filtered.

    example
    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    

    Returns string

  • Gets/Sets the message displayed when there are no records and the grid is filtered.

    example
    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: string

    Returns void

  • get emptyGridMessage(): string
  • set emptyGridMessage(value: string): void
  • get expansionStates(): Map<any, boolean>
  • set expansionStates(value: Map<any, boolean>): void
  • 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>

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

    Parameters

    • value: Map<any, boolean>

    Returns void

  • get filterCellList(): IgxGridFilteringCellComponent[]
  • get filteredData(): any
  • set filteredData(value: any): void
  • get filteredSortedData(): any[]
  • get filteringRow(): IgxGridFilteringRowComponent
  • get hasColumnGroups(): boolean
  • get hasColumnLayouts(): boolean
  • get hasFilterableColumns(): boolean
  • get hasSortableColumns(): boolean
  • get headerCellList(): IgxGridHeaderComponent[]
  • get headerDragContainer(): ElementRef<HTMLElement>
  • get headerGroupContainer(): ElementRef<HTMLElement>
  • get headerGroups(): IgxGridHeaderGroupComponent[]
  • get headerGroupsList(): IgxGridHeaderGroupComponent[]
  • get headerSelectorContainer(): ElementRef<HTMLElement>
  • get headerWidth(): number
  • get height(): string
  • set height(value: string): void
  • get id(): string
  • set id(value: string): void
  • get isLoading(): boolean
  • set isLoading(value: boolean): void
  • Gets/Sets whether the grid is going to show a loading indicator.

    example
    <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
    

    Returns boolean

  • Gets/Sets whether the grid is going to show a loading indicator.

    example
    <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get locale(): string
  • set locale(value: string): void
  • get nativeElement(): HTMLElement
  • get pivotKeys(): { aggregations: string; children: string; columnDimensionSeparator: string; level: string; records: string; rowDimensionSeparator: string }
  • get rowHeight(): any
  • set rowHeight(value: any): void
  • get rowList(): QueryList<IgxRowDirective>
  • get selectRowOnClick(): boolean
  • set selectRowOnClick(enabled: boolean): void
  • get selectedRows(): any[]
  • 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

  • get superCompactMode(): boolean
  • set superCompactMode(value: boolean): void
  • get totalWidth(): number
  • get width(): string
  • set width(value: string): void

Methods

  • clearFilter(name?: string): void
  • clearSort(name?: string): void
  • combineSelectedCellAndColumnData(columnData: any[], formatters?: boolean, headers?: boolean): any[]
  • deselectAllColumns(): void
  • deselectAllRows(onlyFilterData?: boolean): void
  • deselectColumns(columns: string[] | ColumnType[]): void
  • deselectRows(rowIDs: any[]): void
  • filterGlobal(value: any, condition: any, ignoreCase?: any): void
  • getRowData(rowSelector: any): any
  • getSelectedColumnsData(formatters?: boolean, headers?: boolean): any[]
  • getSelectedData(formatters?: boolean, headers?: boolean): any[]
  • Inserts dimension in target collection by type at specified index or at the collection's end.

    example
    this.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1);
    

    Parameters

    • dimension: IPivotDimension

      The dimension that will be added.

    • targetCollectionType: PivotDimensionType

      The target collection type to add 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

  • insertValueAt(value: IPivotValue, index?: number): void
  • markForCheck(): void
  • 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:

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

  • navigateTo(rowIndex: number, visibleColIndex?: number, cb?: ((args: any) => void)): 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

  • notifyDimensionChange(regenerateColumns?: boolean): void
  • reflow(): void
  • selectAllColumns(): void
  • selectAllRows(onlyFilterData?: boolean): 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

  • selectColumns(columns: string[] | ColumnType[], clearCurrentSelection?: boolean): void
  • selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void
  • selectedColumns(): ColumnType[]
  • toggleRow(rowID: any): void