Emmited when the active node is changed.
Emitted after advanced filtering is performed.
Emitted when a cell is clicked.
Controls the copy behavior of the grid.
Apply the columns formatters (if any) on the data in the clipboard output.
Include the columns headers in the clipboard output.
Enables/disables the copy behavior
The separator used for formatting the copy output. Defaults to \t
.
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 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 collection is changed via the grid chip area.
Emitted when a dimension is sorted.
Emitted when a cell is double clicked.
A template reference for the template when the filtered grid is empty.
A template reference for the template when the grid is empty.
Gets/Sets a custom template when empty.
Gets/Sets a custom template when pivot grid is empty.
The custom template, if any, that should be used when rendering a row expand indicator.
Emitted before filtering expressions are applied.
Emitted after filtering is performed through the UI.
Emitted after filtering is performed.
Emitted when a copy operation is executed.
Emitted when keydown is triggered over element inside grid's body.
Emitted when grid is scrolled horizontally/vertically.
The custom template, if any, that should be used when rendering a header collapse indicator.
The custom template, if any, that should be used when rendering a header expand indicator.
Gets/Sets a custom template when loading.
Gets/Sets the primary key.
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>
The custom template, if any, that should be used when rendering a row collapse indicator.
The custom template, if any, that should be used when rendering a row expand indicator.
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.
The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
The custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
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
Emitted when the values collection is changed via the grid chip area.
Gets/Sets the advanced filtering state.
Gets/Sets the advanced filtering state.
Gets the full list of dimensions.
Gets/Sets cell selection mode.
Gets/Sets cell selection mode.
Gets/Sets column selection mode
Gets/Sets column selection mode
Gets/Sets the default width of the columns.
Gets/Sets the default width of the columns.
Gets an array of IgxColumnComponent
s.
Returns an array of data set to the component.
let data = this.grid.data;
An @Input property that lets you fill the IgxPivotGridComponent
with an array of data.
<igx-pivot-grid [data]="Data"></igx-pivot-grid>
Gets/Sets the data clone strategy of the grid when in edit mode.
Gets/Sets the data clone strategy of the grid when in edit mode.
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.
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.
Returns the theme of the component.
The default theme is comfortable
.
Available options are comfortable
, cosy
, compact
.
Sets the theme of the component.
Gets/Sets the message displayed when there are no records and the grid is filtered.
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.
Get/Sets the message displayed when there are no records.
Gets/Sets a list of key-value pairs [row ID, expansion state].
Gets/Sets a list of key-value pairs [row ID, expansion state].
A list of all IgxGridFilteringCellComponent
.
Gets/Sets the filtering strategy of the grid.
Gets/Sets the filtering strategy of the grid.
Returns an array of objects containing the filtered data.
let filteredData = this.grid.filteredData;
Sets an array of objects containing the filtered data.
this.grid.filteredData = [{
ID: 1,
Name: "A"
}];
Returns an array containing the filtered sorted data.
Gets/Sets the filtering state.
Gets/Sets the filtering state.
Gets/Sets the filtering logic of the IgxGridComponent
.
Gets/Sets the filtering logic of the IgxGridComponent
.
Returns if the IgxGridComponent
has column groups.
Returns if the IgxGridComponent
has column layouts for multi-row layout definition.
Returns if the IgxGridComponent
has filterable columns.
Returns if the IgxGridComponent
has sortable columns.
A list of all IgxGridHeaderComponent
.
A list of all IgxGridHeaderGroupComponent
.
Gets the width of the header.
Gets/Sets the height.
Gets/Sets the height.
Gets/Sets the value of the id
attribute.
Gets/Sets the value of the id
attribute.
Gets/Sets whether the grid is going to show a loading indicator.
Gets/Sets whether the grid is going to show a loading indicator.
Gets/Sets the locale.
Gets/Sets the locale.
Gets the native element.
Gets/Sets the outlet used to attach the grid's overlays to.
Gets/Sets the outlet used to attach the grid's overlays to.
Gets/Sets the resource strings.
Gets/Sets the resource strings.
Gets/Sets the row height.
Gets/Sets the row height.
A list of IgxGridRowComponent
.
Gets/Sets row selection mode
Gets/Sets row selection mode
Gets/Sets whether clicking over a row should select/deselect it
Gets/Sets whether clicking over a row should select/deselect it
Gets/Sets the sorting strategy of the grid.
Gets/Sets the sorting strategy of the grid.
Gets/Sets the sorting state.
Gets/Sets the sorting state.
Gets/Sets the sorting options - single or multiple sorting.
Accepts an ISortingOptions
object with any of the mode
properties.
Enables a super compact theme for the component.
Enables a super compact theme for the component.
Returns the total width of the IgxGridComponent
.
Returns the state of the grid virtualization.
Returns an array of visible IgxColumnComponent
s.
Gets/Sets the width of the grid.
Gets/Sets the width of the grid.
Auto-sizes row dimension cells.
The row dimension to size.
If name is provided, clears the filtering state of the corresponding IgxColumnComponent
.
If name is provided, clears the sorting state of the corresponding IgxColumnComponent
.
Deselects all columns
Deselects all rows
Deselect specified columns by field.
Deselect specified rows by ID.
Filters a single IgxColumnComponent
.
Filters a single IPivotDimension
.
Filters all the IgxColumnComponent
in the IgxGridComponent
with the same condition.
Returns the IgxColumnComponent
by field name.
Gets the width
to be set on IgxGridHeaderGroupComponent
.
Returns the data that is contained in the row component.
correspond to rowID
Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...]
.
Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...]
.
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:
```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();
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.
Navigates to a position in the grid based on provided rowindex
and visibleColumnIndex
.
Notifies for dimension change.
Recalculates grid width/height dimensions.
Removes dimension from its currently collection.
The dimension to be removed.
Removes value from collection.
The value to be removed.
Selects all columns
Selects all rows
Select specified columns.
if true clears the current selection
Select specified rows by ID.
if true clears the current selection
Get current selected columns.
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 row by its id.
The row id - primaryKey value or the data record instance.
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.
IgxPivotGridModule
Grids & Lists
pivot, grid, table
igx-grid-theme
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.