<igx-grid [data]="data" [autoGenerate]="true" (activeNodeChange)="activeNodeChange($event)"></igx-grid>

<igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

Returns the advanced filtering expressions tree.

<igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
          (advancedFilteringExpressionsTreeChange)="advancedFilteringExprTreeChange($event)"></igx-grid>

The default value is false. When set to true, it will override all columns declared through code or in markup.

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

Returns the IgxGridCell.

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

Event is fired after editing is completed, when the cell is exiting edit mode. This event is cancelable.

<igx-grid #grid3 (cellEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

<igx-grid #grid3 (cellEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

This event is cancelable.

<igx-grid #grid3 (cellEditEnter)="editStart($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

<igx-grid #grid3 (cellEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'">
</igx-grid>

Returns the column object.

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

Returns the source and target IgxColumnComponent objects. This event is cancelable.

<igx-grid (columnMoving)="moving($event)"></igx-grid>

Returns the source and target IgxColumnComponent objects.

<igx-grid (columnMovingEnd)="movingEnds($event)"></igx-grid>

Returns the moved IgxColumnComponent object.

<igx-grid (columnMovingStart)="movingStart($event)"></igx-grid>

The index at which to insert the column may be changed through the insertAtIndex property.

public columnPinning(event) {
    if (event.column.field === "Name") {
      event.insertAtIndex = 0;
    }
}

The index that the column is inserted at may be changed through the insertAtIndex property.

public columnPinning(event) {
    if (event.column.field === "Name") {
      event.insertAtIndex = 0;
    }
}

Returns the IgxColumnComponent object's old and new width.

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

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

Args: { column: IgxColumnComponent, newValue: boolean }

<igx-grid (columnVisibilityChanged)="visibilityChanged($event)"></igx-grid>

Args: { column: any, newValue: boolean }

<igx-grid (columnVisibilityChanging)="visibilityChanging($event)"></igx-grid>

Returns the IgxGridCell object.

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

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

 <igx-grid #grid [data]="localData" [autoGenerate]="true" (dataChanging)='handleDataChangingEvent()'></igx-grid>

Returns the IgxGridCell object.

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

The row ID is either the primaryKey value or the data record instance.

const emptyTempalte = this.grid.emptyGridTemplate;

const emptyTempalte = this.grid.emptyGridTemplate;

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

in version 12.2.0. We suggest using rowClasses property instead

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

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

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

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

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

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

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

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

Fired only if copy behavior is enabled through the [clipboardOptions]{@link IgxGridBaseDirective#clipboardOptions}.

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.

 <igx-grid (gridKeydown)="customKeydown($event)"></igx-grid>

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

<igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>

in version 12.2.0. We suggest using rowClasses property instead

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

<igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

Emitted after the current page is changed.

<igx-grid (pageChange)="onPageChange($event)"></igx-grid>

public onPageChange(page: number) {
  this.currentPage = page;
}

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

Emitted after paging is performed.

Returns an object consisting of the previous and next pages.

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

in version 12.1.0. Use the corresponding output exposed by the igx-paginator component instead

Emitted when perPage property value of the grid is changed.

<igx-grid #grid (perPageChange)="onPerPageChange($event)" [autoGenerate]="true"></igx-grid>

public onPerPageChange(perPage: number) {
  this.perPage = perPage;
}

<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>

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

This event is cancelable. Returns an IGridEditEventArgs object.

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

Returns the data for the new IgxGridRowComponent object.

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

IgxColumnComponent

This event is cancelable. Returns an IGridEditEventArgs object.

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

Returns an IRowDataEventArgs object.

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

Return the dropped row.

Return the dragged row.

Emitted when [rowEditable]="true" & endEdit(true) is called. Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, performing paging operation, column resizing, pinning, moving or hitting Done button inside of the rowEditingOverlay, or hitting the Enter key while editing a cell. This event is cancelable.

<igx-grid #grid3 (rowEdit)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

Emitted when [rowEditable]="true" & endEdit(true) is called. Emitted when changing rows during edit mode, selecting an un-editable cell in the edited row, performing paging operation, column resizing, pinning, moving or hitting Done button inside of the rowEditingOverlay, or hitting the Enter key while editing a cell.

<igx-grid #grid3 (rowEditDone)="editDone($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

Emitted when [rowEditable]="true". This event is cancelable.

<igx-grid #grid3 (rowEditEnter)="editStart($event)" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

Emits when [rowEditable]="true" & endEdit(false) is called. Emitted when changing hitting Esc key during cell editing and when click on the Cancel button in the row editing overlay.

<igx-grid #grid3 (rowEditExit)="editExit($event)" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
</igx-grid>

<igx-grid [data]="employeeData" (rowPinned)="rowPin($event)" [autoGenerate]="true"></igx-grid>

<igx-grid [data]="employeeData" (rowPinning)="rowPin($event)" [autoGenerate]="true"></igx-grid>

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

IgxColumnComponent

<igx-grid [data]="employeeData" (rowToggle)="rowToggle($event)" [autoGenerate]="true"></igx-grid>

Returns the IgxGridCell.

<igx-grid #grid (selected)="onCellSelect($event)" [data]="localData" [height]="'305px'" [autoGenerate]="true"></igx-grid>

This will allow to bind the grid to remote data and having auto-generated columns at the same time. Note that after generating the columns, this property would be disabled to avoid re-creating columns each time a new data is assigned.

 this.grid.shouldGenerate = true;

By default it is 6000ms.

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

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sorting)="sorting($event)"></igx-grid>

Returns the sorting expression.

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

Returns the sorting expressions.

<igx-grid #grid [data]="localData" [autoGenerate]="true" (sortingExpressionsChange)="sortingExprChange($event)"></igx-grid>

toolbarExporting(event: IGridToolbarExportEventArgs){
    const toolbarExporting = event;
}