Emmited when the active node is changed.
Gets/Sets a custom template for adding row UI when grid is empty.
Emitted after advanced filtering is performed.
Gets/Sets whether to auto-generate the columns.
Emitted when a cell is clicked.
Emitted when cell has been edited.
Emitted after cell has been edited and editing has been committed.
Emitted when cell enters edit mode.
Emitted when cell exits edit mode.
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 during the column moving operation.
Emitted when column moving ends.
Emitted when column moving starts.
Emitted before IgxColumnComponent
is pinned.
Emitted after IgxColumnComponent
is pinned.
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 a new chunk of data is loaded from virtualization.
Emitted when a cell is double clicked.
Gets the row ID that is being dragged.
Gets/Sets the template that will be rendered as a GroupBy drop area.
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.
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.
Gets/Sets whether created groups are rendered expanded or collapsed.
Gets the hierarchical representation of the group by records.
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 the value of the id
attribute.
Gets/Sets a custom template when loading.
Controls whether columns moving is enabled in the grid.
Emitted when columns are grouped/ungrouped.
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
Emmited just before the newly added row is commited.
Emitted when a row is added.
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.
Emmited when deleting a row.
Emitted when a row is deleted.
Emitted when dropping a row.
Emitted when start dragging a row.
Emitted when exiting edit mode for a row.
Emitted after exiting edit mode for a row and editing has been committed.
Emitted when a row enters edit mode.
Emitted when row editing is canceled.
The custom template, if any, that should be used when rendering a row expand indicator.
Emitted when the pinned state of a row is changed.
Emitted when the pinned state of a row is changed.
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.
Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid
Gets/Sets the display time for the row adding snackbar notification.
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.
Emitted when an export process is initiated by the user.
Gets/Sets a unique values strategy used by the Excel Style Filtering
Gets/Sets the advanced filtering state.
Gets/Sets the advanced filtering state.
Gets/Sets a value indicating whether the advanced filtering is enabled.
Gets/Sets a value indicating whether the advanced filtering is enabled.
Gets/Sets if the 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 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.
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.
Gets/Sets the array of data that populates the IgxGridComponent
.
Gets/Sets the array of data that populates the IgxGridComponent
.
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.
Returns the IgxGridHeaderGroupComponent
's minimum allowed width.
Gets the default row height.
Returns the theme of the component.
The default theme is comfortable
.
Available options are comfortable
, cosy
, compact
.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
The custom template, if any, that should be used when rendering the row drag indicator icon
The custom template, if any, that should be used when rendering the row drag indicator icon
Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
Gets if the grid's group by drop area is visible.
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 filter mode.
Gets/Sets the filter mode.
Gets/Sets the filtering strategy of the grid.
Gets/Sets the filtering strategy of the grid.
Gets/Sets an array of objects containing the filtered data.
Gets/Sets 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 state.
Gets/Sets the filtering logic of the IgxGridComponent
.
Gets/Sets the filtering logic of the IgxGridComponent
.
Gets/Sets the template reference of the IgxGridComponent
's group area.
Gets/Sets the template reference of the IgxGridComponent
's group area.
Gets/Sets the template reference for the group row.
Gets/Sets the template reference for the group row.
Gets/Sets the grouping strategy of the grid.
Gets/Sets the grouping strategy of the grid.
Gets/Sets a list of expansion states for group rows.
Gets/Sets a list of expansion states for group rows.
Gets/Sets the group by state.
Gets/Sets the group by state.
Gets the list of group rows.
Returns if the IgxGridComponent
has column groups.
Returns if the IgxGridComponent
has column layouts for multi-row layout definition.
Returns if the IgxGridComponent
has editable columns.
Returns if the IgxGridComponent
has filterable columns.
Returns if the IgxGridComponent
has groupable columns.
Returns if the IgxGridComponent
has moveable columns.
Returns if the IgxGridComponent
has sortable columns.
Returns if the IgxGridComponent
has summarized 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 the number of hidden columns.
Gets/Sets whether the grouped columns should be hidden.
Gets/Sets whether the grouped columns should be hidden.
Gets/Sets if the row selectors are hidden.
Gets/Sets if the row selectors are hidden.
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 an array of the pinned IgxColumnComponent
s.
Gets the number of pinned columns.
Returns the currently transformed paged/filtered/sorted/grouped pinned row data, displayed in the grid.
Gets an array of the pinned IgxRowComponent
s.
Gets the current width of the container for the pinned IgxColumnComponent
s.
Gets/Sets the initial pinning configuration.
Gets/Sets the initial pinning configuration.
Gets/Sets the resource strings.
Gets/Sets the resource strings.
Gets/Sets whether rows can be moved.
Gets/Sets whether rows can be moved.
Gets/Sets whether the rows are editable.
Gets/Sets whether the rows are editable.
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
Returns an array of the selected IgxGridCell
s.
Gets/Sets the current selection state.
Gets/Sets the current selection state.
Returns whether the IgxGridComponent
has group area.
Returns whether the IgxGridComponent
has group area.
Controls whether the summary row is visible when groupBy/parent row is collapsed.
Controls whether the summary row is visible when groupBy/parent row is collapsed.
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.
Gets/Sets the summary calculation mode.
Gets/Sets the summary calculation mode.
Gets/Sets the summary position.
Gets/Sets the summary position.
Get/Set IgxSummaryRow height
Get/Set IgxSummaryRow height
Gets/Sets the total number of records in the data source.
Gets/Sets the total number of records in the data source.
Returns the total number of records.
Returns the total number of records.
Returns the total width of the IgxGridComponent
.
Get transactions service for the grid.
Gets an array of unpinned IgxColumnComponent
s.
Returns currently transformed paged/filtered/sorted/grouped unpinned row data, displayed in the grid.
Gets the current width of the container for the unpinned IgxColumnComponent
s.
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.
Creates a new IgxGridRowComponent
and adds the data record to the end of the data source.
Enters add mode by spawning the UI under the specified row by rowID.
The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view
Whether the record should be added as a child. Only applicable to igxTreeGrid.
Enters add mode by spawning the UI at the specified index.
The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length
If name is provided, clears the filtering state of the corresponding IgxColumnComponent
.
Clears grouping for particular column, array of columns or all columns.
Name of column or array of column names to be ungrouped.
Removes all the highlights in the cell.
If name is provided, clears the sorting state of the corresponding IgxColumnComponent
.
Closes the advanced filtering dialog.
indicates whether the changes should be applied
Collapses all rows.
Collapses the row by its id.
The row id - primaryKey value or the data record instance.
Removes the IgxGridRowComponent
and the corresponding data record by primary key.
Deselects all columns
Deselects all rows
Deselect specified columns by field.
Deselect specified rows by ID.
Deselect all rows within a group.
The group record which rows would be deselected.
Disable summaries for the specified column.
Enables summaries for the specified column and applies your customSummary.
Finishes the row transactions on the current row.
Expands all rows.
Expands the row by its id.
The row id - primaryKey value or the data record instance.
Filters a single IgxColumnComponent
.
Filters all the IgxColumnComponent
in the IgxGridComponent
with the same condition.
Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
the string to search.
optionally, if the search should be case sensitive (defaults to false).
optionally, if the text should match the entire value (defaults to false).
Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
the string to search.
optionally, if the search should be case sensitive (defaults to false).
optionally, if the text should match the entire value (defaults to false).
Expands the specified group and all of its parent groups.
The group record to fully expand.
Returns a CellType
object that matches the conditions.
Returns a CellType
object that matches the conditions.
match any rowID
Returns the IgxColumnComponent
by field name.
Gets the width
to be set on IgxGridHeaderGroupComponent
.
Returns ICellPosition
which defines the next cell,
according to the current position, that match specific criteria.
Gets calculated width of the pinned area.
If we should take into account the hidden columns in the pinned area.
Returns ICellPosition
which defines the previous cell,
according to the current position, that match specific criteria.
Returns the IgxGridRow
by index.
Returns IgxGridRow
object by the specified primary key.
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 }, ...]
.
Groups by a new IgxColumnComponent
based on the provided expression, or modifies an existing one.
Returns if a group is expanded or not.
The group record.
Returns whether the record is pinned or not.
Index of the record in the filteredSortedData
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();
Places a column before or after the specified target column.
Navigates to a position in the grid based on provided rowindex
and visibleColumnIndex
.
Opens the advanced filtering dialog.
Pins a column by field name.
Pin the row by its id.
Recalculates grid width/height dimensions.
Reapplies the existing search.
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
Select all rows within a group.
Get current selected columns.
Sort a single IgxColumnComponent
.
Toggles the expansion state of all group rows recursively.
Toggles the specified column's visibility.
Toggles the expansion state of a group.
The group record to toggle.
Toggles the row by its id.
The row id - primaryKey value or the data record instance.
Unpins a column by field name. Returns whether the operation is successful.
Unpin the row by its id.
Updates the IgxGridRowComponent
and the corresponding data record by primary key.
the new value which is to be set.
corresponds to rowID.
corresponds to column field.
Updates the IgxGridRowComponent
correspond to rowID
Grid provides a way to present and manipulate tabular data.
IgxGridModule
Grids & Lists
grid, table
igx-grid-theme
The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data has been bound, it can be manipulated through filtering, sorting & editing operations.