Emmited when the active node is changed.
Emitted after advanced filtering is performed.
Gets/Sets whether to auto-generate the pivot configuration based on the provided data.
ReadonlycdrProvides change detection functionality. A change-detection tree collects all views that are to be checked for changes. The property cannot be changed (readonly)
Emitted when a cell is clicked.
Controls the copy behavior of the grid.
Emitted when a column is initialized.
Emitted after column is resized.
Emitted when IgxColumnComponent is selected.
Emitted after column visibility is changed.
Emitted before column visibility is changed.
Emitted when a cell or row is right clicked.
Emitted after the grid's data view is changed because of a data operation, rebinding, etc.
Emitted before the grid's data view is changed because of a data operation, rebinding, etc.
Emitted when the dimension is initialized.
Emitted when the dimension collection is changed via the grid chip area.
Emitted when a dimension is sorted.
Emitted when a cell is double clicked.
Gets/Sets a custom template when empty.
Gets/Sets a custom template when pivot grid is empty.
Emitted before filtering expressions are applied.
Emitted after filtering is performed through the UI.
Emitted after filtering is performed.
Emitted when formGroup is created on edit of row/cell.
ReadonlygridAPIRepresents the grid service type providing API methods for the grid
Emitted when a copy operation is executed.
Fired only if copy behavior is enabled through the [clipboardOptions]IgxGridBaseDirective#clipboardOptions.
Emitted when keydown is triggered over element inside grid's body.
Emitted when grid is scrolled horizontally/vertically.
Gets/Sets a custom template when loading.
Emitted when any of the pivotConfiguration properties is changed via the grid chip area.
Emitted when making a range selection.
Emitted after the ngAfterViewInit hook. At this point the grid exists in the DOM
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>
Emitted when a row is clicked.
Emitted when IgxGridRowComponent is selected.
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>
Emitted when the expanded state of a row gets changed.
Emitted when a cell is selected.
Emitted before sorting expressions are applied.
Emitted after sorting is completed.
Emitted before sorting is performed.
Gets/Sets a unique values strategy used by the Excel Style Filtering
ReadonlyvalidationRepresents the validation service for the grid. The type contains properties and methods (logic) for validating records
Emitted when grid's validation status changes.
Gets/Sets the trigger for validators used when editing the grid.
Gets/Sets a custom template for the value chips.
Emitted when the value is initialized.
Emitted when the values collection is changed via the grid chip area.
Gets/Sets the advanced filtering state.
Gets the full list of dimensions.
Gets/Sets a value indicating whether the advanced filtering is enabled.
Gets/Sets if the filtering is enabled.
Gets/Sets whether the grid has batch editing enabled.
When batch editing is enabled, changes are not made directly to the underlying data.
Instead, they are stored as transactions, which can later be committed w/ the commit method.
Gets/Sets cell selection mode.
Represents the selection mode for cells: 'none','single', 'multiple', 'multipleCascade'
Gets an array of IgxColumnComponents.
Gets/Sets column selection mode
Represents the selection mode for columns: 'none','single', 'multiple', 'multipleCascade'
Gets/Sets the default width of the columns.
Returns an array of data set to the component.
let data = this.grid.data;
Gets/Sets the array of data that populates the component.
<igx-pivot-grid [data]="Data"></igx-pivot-grid>
Gets/Sets the data clone strategy of the grid when in edit mode.
Strategy, used for cloning the provided data. The type has one method, that takes any type of data
A list of currently rendered IgxGridRowComponent's.
Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.
Gets/Sets the default expand state for all rows.
Returns the IgxGridHeaderGroupComponent's minimum allowed width.
Gets the default row height.
Gets the sorting expressions generated for the dimensions.
Gets the custom template, if any, used for row drag ghost.
Sets a custom template for the row drag ghost.
<ng-template #template igxRowDragGhost>
<igx-icon>menu</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.dragGhostCustomTemplate = this.template;
The custom template, if any, that should be used when rendering the row drag indicator icon
Gets/Sets the message displayed when there are no records and the grid is filtered.
Get/Sets the message displayed when there are no records.
Gets the excel style header icon.
Sets the excel style header icon.
<ng-template #template igxExcelStyleHeaderIcon>
<igx-icon>filter_alt</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.excelStyleHeaderIconTemplate = this.template;
Gets/Sets a list of key-value pairs [row ID, expansion state].
Returns an array of objects containing the filtered data.
Returns an array containing the filtered sorted data.
Gets/Sets the filtering state.
Gets/Sets the filtering logic of the IgxGridComponent.
Gets/Sets the filter mode.
Gets/Sets the filtering strategy of the grid.
Indicates whether the grid has columns that are shown
Gets the row collapse indicator template.
Sets the row collapse indicator template.
<ng-template igxHeaderCollapsedIndicator>
<igx-icon role="button">add</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerCollapsedIndicatorTemplate = this.template;
Gets the header expand indicator template.
Sets the header expand indicator template.
<ng-template igxHeaderExpandedIndicator>
<igx-icon role="button">remove</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headerExpandedIndicatorTemplate = this.template;
Gets the header row selector template.
Sets the header row selector template.
<ng-template #template igxHeadSelector let-headContext>
{{ headContext.selectedCount }} / {{ headContext.totalCount }}
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.headSelectorTemplate = this.template;
Gets/Sets the height.
Gets/Sets if the row selectors are hidden.
Gets/Sets the value of the id attribute.
Gets/Sets whether the grid is going to show a loading indicator.
Represents the last search information.
Gets/Sets the locale.
Represents the locale of the grid: USD, EUR, GBP, CNY, JPY, etc.
Gets the native element.
Gets/Sets the outlet used to attach the grid's overlays to.
Represents the paging of the grid. It can be either 'Local' or 'Remote'
Gets/Sets the pivot configuration with all related dimensions and values.
Gets/Sets the primary key.
Represents the unique primary key used for identifying rows in the grid
Gets/Sets the resource strings.
Gets the row add text template.
Sets the row add text template.
<ng-template #template igxRowAddText>
Adding Row
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowAddTextTemplate = this.template;
Gets the row collapse indicator template.
Sets the row collapse indicator template.
<ng-template igxRowCollapsedIndicator>
<igx-icon role="button">add</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowCollapsedIndicatorTemplate = this.template;
Gets/Sets whether rows can be moved.
Gets/Sets whether the rows are editable.
Gets the row edit actions template.
Sets the row edit actions template.
<ng-template #template igxRowEditActions let-endRowEdit>
<button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
<button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditActionsTemplate = this.template;
Gets the row edit text template.
Sets the row edit text template.
<ng-template #template igxRowEditText let-rowChangesCount>
Changes: {{rowChangesCount}}
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowEditTextTemplate = this.template;
Gets the row expand indicator template.
Sets the row expand indicator template.
<ng-template igxRowExpandedIndicator>
<igx-icon role="button">remove</igx-icon>
</ng-template>
@ViewChild('template', {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.rowExpandedIndicatorTemplate = this.template;
Gets/Sets the row height.
The height of each row in the grid. Setting a constant height can solve problems with not showing all elements when scrolling
A list of IgxGridRowComponent.
Gets/Sets row selection mode
Represents the selection mode for rows: 'none','single', 'multiple', 'multipleCascade'
Gets the row selector template.
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;
Gets/Sets the current selection state.
Gets/Sets whether clicking over a row should select/deselect it
Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid
The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order.
<ng-template #template igxSortAscendingHeaderIcon>
<igx-icon>expand_less</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortAscendingHeaderIconTemplate = this.template;
The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order.
<ng-template #template igxSortDescendingHeaderIcon>
<igx-icon>expand_more</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortDescendingHeaderIconTemplate = this.template;
Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted.
<ng-template #template igxSortHeaderIcon>
<igx-icon>unfold_more</igx-icon>
</ng-template>
@ViewChild("'template'", {read: TemplateRef })
public template: TemplateRef<any>;
this.grid.sortHeaderIconTemplate = this.template;
Gets/Sets the sorting state.
Gets/Sets the sorting options - single or multiple sorting.
Accepts an ISortingOptions object with any of the mode properties.
Gets/Sets the sorting strategy of the grid.
Gets/Sets the summary calculation mode.
Gets/Sets the summary position.
Get/Set IgxSummaryRow height
Enables a super compact theme for the component.
Returns the total number of records.
Returns the state of the grid virtualization.
Returns an array of visible IgxColumnComponents.
Gets/Sets the width of the grid.
Auto-sizes row dimension cells.
The row dimension to size.
Deselect specified columns by field.
Filters a single IgxColumnComponent.
Filters a single IPivotDimension.
Returns the IgxColumnComponent by field name.
Gets the width to be set on IgxGridHeaderGroupComponent.
Get the currently selected ranges in the grid.
Inserts dimension in target collection by type at specified index or at the collection's end.
The dimension that will be added.
The target collection type to add to. Can be Row, Column or Filter.
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.
Inserts value at specified index or at the end.
The value definition that will be added.
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.
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();
Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end.
The dimension that will be moved.
The target collection type to move it to. Can be Row, Column or Filter.
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.
Move value from its currently at specified index or at the end.
The value that will be moved.
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.
Removes dimension from its currently collection.
The dimension to be removed.
Removes value from collection.
The value to be removed.
Select specified columns.
if true clears the current selection
Get current selected columns.
Select range(s) of cells between certain rows and columns of the grid.
Sort a single IgxColumnComponent.
Sort the dimension and its children in the provided direction.
Toggles the dimension's enabled state on or off.
The dimension to be toggled.
Toggles the value's enabled state on or off.
The value to be toggled.
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