Data Grid

Display and manipulate tabular data with the Ignite UI for Angular Data Grid. Quickly bind your data with very little coding or configuration. Features include filtering, sorting, paging, templates, movable columns, and the ability to edit and update data. User actions are easy to understand and can be controlled programmatically.

Grid Demo


Dependencies

The grid is exported as as an NgModule, thus all you need to do in your application is to import the IgxGridModule inside your AppModule:

// app.module.ts

import { IgxGridModule } from 'igniteui-angular/main';
// Or
import { IgxGridModule } from 'igniteui-angular/grid';

@NgModule({
    imports: [
        ...
        IgxGridModule.forRoot(),
        ...
    ]
})
export class AppModule {}

Each of the components, directives and helper classes in the IgxGridModule can be imported either through the grid sub-package or through the main bundle in igniteui-angular. While you don't need to import all of them to instantiate and use the grid, you usually will import them (or your editor will auto-import them for you) when declaring types that are part of the grid API.

import { IgxGridComponent } from 'igniteui-angular/grid/';
// Or
import { IgxGridComponent } from 'igniteui-angular/main'
...

@ViewChild('myGrid', { read: IgxGridComponent })
public grid: IgxGridComponent;

Usage

Now that we have the grid module imported, let’s get started with a basic configuration of the igx-grid that binds to local data:

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="true"></igx-grid>

The id property is a string value and is the unique identifier of the grid which will be autogenerated if not provided, while data binds the grid, in this case to local data.

The autoGenerate property tells the igx-grid to auto generate the grid's IgxColumnComponent based on the data source fields. It will also try to deduce the appropriate data type for the column if possible. Otherwise, the developer needs to explicitly define the columns and the mapping to the data source fields.

Columns configuration

IgxGridColumnComponent is used to define the grid's columns collection and to enable features per column like filtering, sorting, and paging. Cell, header, and footer templates are also available.

Let's turn the autoGenerate property off and define the columns collection in the markup:

<igx-grid #grid1 [data]="data | async" [autoGenerate]="false" [paging]="true" [perPage]="6" (onColumnInit)="initColumns($event)"
    (onSelection)="selectCell($event)">
    <igx-column field="Name" [sortable]="true" header=" " [filterable]="true"></igx-column>
    <igx-column field="AthleteNumber" [sortable]="true" header="Athlete number"></igx-column>
    <igx-column field="TrackProgress" header="Track progress">
        <ng-template igxCell let-value>
            <igx-linear-bar [stripped]="false" [value]="value" [max]="100"></igx-linear-bar>
        </ng-template>
    </igx-column>
</igx-grid>

Each of the columns of the grid can be templated separately. The column expects ng-template tags decorated with one of the grid module directives.

igxHeader targets the column header providing as a context the column object itself.

...
<igx-column field="Name">
    <ng-template igxHeader let-column>
        {{ column.field | uppercase }}
    </ng-template>
</igx-column>
...

igxCell applies the provided template to all cells in the column. The context object provided in the template consists of the cell value provided implicitly and the cell object itself.

...
<igx-column field="Name">
    <ng-template igxCell let-value>
        {{ value | titlecase }}
    </ng-template>
</igx-column>
...

In the snippet above we "take" a reference to the implicitly provided cell value. This is sufficient if you just want to present some data and maybe apply some custom styling or pipe transforms over the value of the cell. However even more useful is to take the IgxGridCellComponent object itself as shown below:

<igx-grid #grid [data]="data">
    <igx-column dataType="string" field="Name">
        <ng-template igxCell let-cell="cell">
            <!-- Implement row deleting inside the cell template itself -->
            <span tabindex="0" (keydown.delete)="grid.deleteRow(cell.rowIndex)">{{ cell.value | titlecase }}</span>
        </ng-template>
    </igx-column>
    <igx-column dataType="boolean" field="Subscribtion">
        <ng-template igxCell let-cell="cell">
            <!-- Bind the cell value through the ngModel directive and update the data source when the value is changed in the template -->
            <input type="checkbox" [ngModel]="cell.value" (ngModelChange)="cell.update($event)" />
        </ng-template>
    </igx-column>
<igx-grid>

The column also accepts one last template that will be used when a cell is in edit mode. As with the other column templates, the provided context object is again the cell value and the cell object itself. Of course in order to make the edit-mode template accessible to end users, you need to set the editable property of the IgxColumnComponent to true.

<igx-column dataType="number" editable="true" field="Price">
    <ng-template igxCellEditor let-cell="cell">
        <label for="price">
            Enter the new price tag
        </label>
        <input name="price" type="number" [ngModel]="cell.value" (ngModelChange)="cell.update(convertToNumber($event))" />
    </ng-template>
</igx-column>

Make sure to check the API for the IgxGridCellComponent in order to get accustomed with the provided properties you can use in your templates.

Each of the column templates can be changed programmatically at any point through the IgxColumnComponent object itself. For example in the code below, we have declared two templates for our user data. In our TypeScript code we'll get references to the templates themselves and then based on some condition we will render the appropriate template for the column in our application.

<igx-grid>
    <!-- Column declarations -->
</igx-grid>

<ng-template #normalView let-value>
    <div class="user-details">{{ val }}</div>
    <user-details-component></user-details-component>
</ng-template>

<ng-template #smallView let-value>
    <div class="user-details-small">{{ val }}</div>
</ng-template>
@ViewChild("normalView", { read: TemplateRef })
public normalView: TemplateRef<any>;

@ViewChild("smallView", { read: TemplateRef })
public smallView: TemplateRef<any>;

....

const column = this.grid.getColumnByName("User");
// Return the appropriate template based on some conditiion.
// For example saved user settings, viewport size, etc.
column.bodyTemplate = this.smallView;

Column properties can also be set in code in the initColumns event which is emitted when the columns are initialized in the grid.

public initColumns(column: IgxGridColumn) {
    const column: IgxColumnComponent = column;
    if (column.field === 'ProductName') {
        column.filterable = true;
        column.sortable = true;
        column.editable = true;
    }
}

The code above will make the ProductName column filterable, sortable, and editable and will instantiate the corresponding features UI (like inputs for editing, etc.).

Data binding

Before going any further with the grid we want to change the grid to bind to remote data service, which is the common scenario in large-scale applications. A good practice is to separate all data fetching related logic in a separate data service, so we are going to create a service which will handle the fetching of data from the server.

Let's implement our service in a separate file

// northwind.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map } from 'rxjs/operators';

We're importing the Injectable decorator which is an essential ingredient in every Angular service definition. The HttpClient will provide us with the functionality to communicate with backend services. It returns an Observable of some result to which we will subscribe in our grid component.

Note: Before Angular 5 the HttpClient was located in @angular/http and was named Http.

Since we will receive a JSON response containing an array of records, we may as well help ourselves by specifing what kind of data we're expecting to be returned in the observable by defining an interface with the correct shape. Type checking is always recommended and can save you some headaches down the road.

// northwind.service.ts

export interface NorthwindRecord {
    ProductID: number;
    ProductName: string;
    SupplierID: number;
    CategoryID: number;
    QuantityPerUnit: string;
    UnitPrice: number;
    UnitsInStock: number;
    UnitsOnOrder: number;
    ReorderLevel: number;
    Discontinued: boolean;
    CategoryName: string;
}

The service itself is pretty simple consisting of one method: fetchData that will return an Observable<NorthwindRecord[]>. In cases when the request fails for any reason (server unavailable, network error, etc), the HttpClient will return an error. We'll leverage the catchError operator which intercepts an Observable that failed and passes the error to an error handler. Our error handler will log the error and return a safe value.

// northwind.service.ts

@Injectable()
export class NorthwindService {
    private url = 'http://services.odata.org/V4/Northwind/Northwind.svc/Alphabetical_list_of_products';

    constructor(private http: HttpClient) {}

    public fetchData(): Observable<NorthwindRecord[]> {
        return this.http
            .get(this.url)
            .pipe(
                map(response => response['value']),
                catchError(
                    this.errorHandler('Error loading northwind data', [])
                )
            );
    }

    private errorHandler<T>(message: string, result: T) {
        return (error: any): Observable<any> => {
            console.error(`${message}: ${error.message}`);
            return of(result as T);
        };
    }
}

Make sure to import both the HttpClientModule and our service in the application module and register the service as a provider.

// app.module.ts

import { HttpClientModule } from '@angular/common/http';
...
import { NorthwindService } from './northwind.service';

@NgModule({
    imports: [
        ...
        HttpClientModule
        ...
    ],
    providers: [
        NorthwindService
    ]
})
export class AppModule {}

After implementing the service we will inject it in our component's constructor and use it to retrieve the data. The ngOnInit lifecycle hook is a good place to dispatch the initial request.

Note: In the code below, you may wonder why are we setting the records property to an empty array before subscribing to the service. The Http request is asynchronous, and until it completes, the records property will be undefined which will result in an error when the grid tries to bind to it. You should either initialize it with a default value or use a BehaviorSubject.

// my.component.ts

@Component({
    ...
})
export class MyComponent implements OnInit {

    public records: NorthwindRecord[];

    constructor(private northwindService: NorthwindService) {}

    ngOnInit() {
        this.records = [];
        this.northwindService.fetchData().subscribe((records) => this.records = records);
    }
}

and in the template of the component:

    <igx-grid [data]="records">
        <igx-column field="ProductId"></igx-column>
        <!-- rest of the column definitions -->
        ...
    </igx-grid>

Note: The grid autoGenerate property is best to be avoided when binding to remote data for now. It assumes that the data is available in order to inspect it and generate the appropriate columns. This is usually not the case until the remote service responds, and the grid will throw an error. Making autoGenerate available, when binding to remote service, is on our roadmap for future versions.

Virtualization

The grid supports both horizontal and vertical DOM virtualization. In order to activate it make sure to set either the height or width property of the grid.

CRUD operations

The IgxGridComponent provides a straigtforward API for basic CRUD operations.

Adding a new record

The grid component exposes the addRow method which will add the provided data to the data source itself.

// Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data.
const record = this.getNewRecord();
this.grid.addRow(record);

Updating data in the grid

Updating data in the grid is achieved through updateRow and updateCell methods. You can also directly update a cell value through its update method.

// Updating the whole row
this.grid.updateRow(newData, this.selectedCell.rowIndex);

// Just a particualr cell through the Grid API
this.grid.updateCell(newData, this.selectedCell.rowIndex, this.selectedCell.column.field);

// Directly using the cell `update` method
this.selectedCell.update(newData);

Deleting data from the grid

this.grid.deleteRow(this.selectedCell.rowIndex);

These can be wired to user interactions, not necessarily related to the igx-grid; for example, a button click:

<button igxButton igxRipple (click)="deleteRow($event)">Delete Row</button>

Paging

Paging is initialized on the root igx-grid component, and is configurable via the paging and perPage inputs. Paging is a Boolean property that controls whether the feature is enabled and the perPage property controls the visible records per page. Let’s update our grid to enable paging:

<igx-grid #grid1 [data]="data | async" [paging]="true" [perPage]="20" [autoGenerate]="false"></igx-grid>

The paging area supports templating by the user, if a template reference is passed to the grid during initialization. The example below is a template where the pagination is controlled through an input.

<ng-template #myTemplate let-grid>
    Current page: {{ grid.page }}
    <input type="number" [ngModel]="grid.page" (onModelChange)="grid.paginate($event)" />
    Total pages: {{ grid.totalPages }}
</ng-template>

<igx-grid paging="true" [paginationTemplate]="myTemplate">
    ...
</igx-grid>

Paging can also be done programmatically through the Grid API:

// Go to page 6
this.grid.paginate(5);

// Go to previous/next page
this.grid.previousPage();
this.grid.nextPage();

// Check for first/last page
this.grid.isFirstPage;
this.grid.isLastPage;

// Get the number of pages
this.grid.totalPages;

// Change the number of records per page
this.grid.perPage = 25;

// Enables/disables paging
this.grid.paging = false;

Filtering

Note

The filtering operation DOES NOT change the underlying data source of the grid.

Filtering can be enabled on a per-column level, by setting a column filterable property to true.

<igx-column field="ProductName" filterable="true" dataType="string"></igx-column>
<igx-column field="Price" filterable="true" dataType="number"></igx-column>

Depending on the set dataType of the column the correct set of filtering conditions will be loaded inside the filter UI dropdown. Additionally, you can set the filteringIgnoreCase and the initial filteringCondition property of the column.

Filtering through the API

You can filter any column or a combination of columns through the grid API. The grid exposes two methods for this task:

  • filter - filter a single column or a combination of columns.
// Single column filtering

// Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case
this.grid.filter('ProductName', 'myproduct', STRING_FILTERS.contains, true);

The only required parameters are the column field and the filtering term. Both the condition and the case sensitivity will be inferred from the column properties if not provided. In the case of multiple filtering, the method accepts an array of filtering expressions.

// Multi column filtering

this.grid.filter([
    { fieldName: 'ProductName', searchVal: 'myproduct' condition: STRING_FILTERS.contains, ignoreCase: true},
    { fieldName: 'Price', searchVal: 55, condition: NUMBER_FILTERS.greaterThan }
]);
  • filterGlobal - filter all the columns in the grid
// Filter all cells for a value which contains `myproduct`
this.grid.filterGlobal('myproduct', STRING.contains, true);
  • clearFilter - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns.
// Remove the filtering state from the ProductName column
this.grid.clearFilter('ProductName');

// Clears the filtering state from all columns
this.grid.clearFilter();

Initial filtered state

It is possible to set the initial filtering state of the grid by an array of expressions to the filteringExpressions property of the grid.

public ngOnInit() {
    this.grid.filteringExpressions = [
        { fieldName: 'ProductName', searchVal: 'myproduct' condition: STRING_FILTERS.contains, ignoreCase: true},
        { fieldName: 'Price', searchVal: 55, condition: NUMBER_FILTERS.greaterThan }
    ];
}

Filtering logic

The filteringLogic property of the grid controls how filtering multiple columns will resolve in the grid. You can change it at any time through the grid API or through the grid input property.

import { FilteringLogic } from 'igniteui-angular/main';
...

this.grid.filteringLogic = FilteringLogic.OR;

The default value of AND returns only the rows that match all the currently applied filtering expressions. Following the example above, a row will be returned when both the 'ProductName' cell value contains 'myproduct' and the 'Price' cell value is greater than 55.

When set to OR, a row will be returned when either the 'ProductName' cell value contains 'myproduct' or the 'Price' cell value is greater than 55.

Sorting

Note

The sorting operation DOES NOT change the underlying data source of the grid.

Sorting is also enabled on a per-column level, meaning that the igx-grid can have a mix of sortable and non-sortable columns. This is done via the sortable input. As with the grid filtering you can also set the sortingIgnoreCase property to perform case sensitive sorting.

Sorting through the API

You can sort any column or a combination of columns through the grid API using the grid sort method:

import { SortingDirection } from 'igniteui-angular/main';

// Perform a case insensitive ascending sort on the ProductName column.
this.grid.sort('ProductName', SortingDirection.Asc, true);

// Perform sorting on both the ProductName and Price columns.
this.grid.sort([
    { fieldName: 'ProductName' dir: SortingDirection.Asc, true },
    { fieldName: 'Price', dir: SortingDirection.Desc }
]);

As with the filtering behavior, you can clear sorting state using the clearSort method:

// Removes the sorting state from the ProductName column
this.grid.clearSort('ProductName');

// Removes the sorting state from every column in the grid
this.grid.clearSort();

Initial sorting state

It is possible to set the initial sorting state of the grid by passing an array of sorting expressions to the sortingExpressions property of the grid.

public ngOnInit() {
    this.grid.sortingExpressions = [
        { fieldName: 'ProductName' dir: SortingDirection.Asc, true },
        { fieldName: 'Price', dir: SortingDirection.Desc }
    ];
}

API

Inputs

Below is the list of all inputs that the developers may set to configure the grid look/behavior:

Name Type Description
id string Unique identifier of the Grid. If not provided it will be automatically generated.
data Array The data source for the grid.
autoGenerate boolean Autogenerate grid's columns, default value is false
paging bool Enables the paging feature. Defaults to false.
perPage number Visible items per page, default is 15
filteringLogic FilteringLogic The filtering logic of the grid. Defaults to AND.
filteringExpressions Array The filtering state of the grid.
sortingExpressions Array The sorting state of the grid.
height string The height of the grid element. You can pass values such as 1000px, 75%, etc.
width string The width of the grid element. You can pass values such as 1000px, 75%, etc.
evenRowCSS string Additional styling classes applied to all even rows in the grid.
oddRowCSS string Additional styling classses applied to all odd rows in the grid.
paginationTemplate TemplateRef You can provide a custom ng-template for the pagination part of the grid.

Outputs

A list of the events emitted by the igx-grid:

Name Description
Event emitters Notify for a change
onEditDone Emitted when a cell value changes. Returns { currentValue: any, newValue: any }
onSelection Emitted when a cell is selected. Returns the cell object.
onColumnInit Emitted when the grid columns are initialized. Returns the column object.
onSortingDone Emitted when sorting is performed through the UI. Returns the sorting expression.
onFilteringDone Emitted when filtering is performed through the UI. Returns the filtering expression.
onPagingDone Emitted when paging is performed. Returns an object consisting of the previous and the new page.
onRowAdded Emitted when a row is being added to the grid through the API. Returns the data for the new row object.
onRowDeleted Emitted when a row is deleted through the grid API. Returns the row object being removed.

Defining handlers for these event emitters is done using declarative event binding:

<igx-grid #grid1 [data]="data | async" [autoGenerate]="false"
    (onColumnInit)="initColumns($event)" (onCellSelection)="selectCell($event)"></igx-grid>

Methods

Here is a list of all public methods exposed by the igx-grid:

Signature Description
getColumnByName(name: string) Returns the column object with field property equal to name or undefined if no such column exists.
getCellByColumn(rowIndex: number, columnField: string) Returns the cell object in column with columnField and row with rowIndex or undefined.
addRow(data: any) Creates a new row object and adds the data record to the end of the data source.
deleteRow(rowIndex: number) Removes the row object and the corresponding data record from the data source.
updateRow(value: any, rowIndex: number) Updates the row object and the data source record with the passed value.
updateCell(value: any, rowIndex: number, column: string) Updates the cell object and the record field in the data source.
filter(column: string, value: any, condition?, ignoreCase?: boolean) Filters a single column. Check the available filtering conditions
filter(expressions: Array) Filters the grid columns based on the provided array of filtering expressions.
filterGlobal(value: any, condition? ignoreCase?) Filters all the columns in the grid.
clearFilter(name?: string) If name is provided, clears the filtering state of the corresponding column, otherwise clears the filtering state of all columns.
sort(name: string, direction, ignorecase) Sorts a single column.
sort(expressions: Array) Sorts the grid columns based on the provided array of sorting expressions.
clearSort(name?: string) If name is provided, clears the sorting state of the corresponding column, otherwise clears the sorting state of all columns.
previousPage() Goes to the previous page if paging is enabled and the current page is not the first.
nextPage() Goes to the next page if paging is enabled and current page is not the last.
paginate(page: number) Goes to the specified page if paging is enabled. Page indices are 0 based.
markForCheck() Manually triggers a change detection cycle for the grid and its children.

IgxColumnComponent

Inputs

Inputs available on the IgxGridColumnComponent to define columns:

Name Type Description
field string Column field name
header string Column header text
sortable boolean Set column to be sorted or not
editable boolean Set column values to be editable
filterable boolean Set column values to be filterable
hidden boolean Visibility of the column
movable boolean Column moving
width string Columns width
headerClasses string Additional CSS classes applied to the header element.
cellClasses string Additional CSS classes applied to the cells in this column.
formatter Function A function used to "template" the values of the cells without the need to pass a cell template the column.
index string Column index
filteringCondition FilteringCondition Boolean, date, string or number conditions. Default is string contains
filteringIgnoreCase boolean Ignore capitalization of strings when filtering is applied. Defaults to true.
sortingIgnoreCase boolean Ignore capitalization of strings when sorting is applied. Defaults to true.
dataType DataType One of string, number, boolean or Date. When filtering is enabled the filter UI conditions are based on the dataType of the column. Defaults to string if it is not provided. With autoGenerate enabled the grid will try to resolve the correct data type for each column based on the data source.

Getters/Setters

Name Type Getter Setter Description
bodyTemplate TemplateRef Yes Yes Get/Set a reference to a template which will be applied to the cells in the column.
headerTemplate TemplateRef Yes Yes Get/Set a reference to a template which will be applied to the column header.
footerTemplate TemplateRef Yes Yes Get/Set a reference to a template which will be applied to the column footer.
inlineEditorTemplate TemplateRef Yes Yes Get/Set a reference to a template which will be applied as a cell enters edit mode.

Filtering Conditions

You will need to import the appropriate condition types from the igniteui-angular package.

import {
    STRING_FILTERS,
    NUMBER_FILTERS,
    DATE_FILTERS,
    BOOLEAN_FILTERS
} from 'igniteui-angular/main';

String types

Name Signature Description
contains (target: string, searchVal: string, ignoreCase?: boolean) Returns true if the target contains the searchVal.
startsWith (target: string, searchVal: string, ignoreCase?: boolean) Returns true if the target starts with the searchVal.
endsWith (target: string, searchVal: string, ignoreCase?: boolean) Returns true if the target ends with the searchVal.
doesNotContain (target: string, searchVal: string, ignoreCase?: boolean) Returns true if searchVal is not in target.
equals (target: string, searchVal: string, ignoreCase?: boolean) Returns true if searchVal matches target.
doesNotEqual (target: string, searchVal: string, ignoreCase?: boolean) Returns true if searchVal does not match target.
null (target: any) Returns true if target is null.
notNull (target: any) Returns true if target is not null.
empty (target: any) Returns true if target is either null, undefined or a string of length 0.
notEmpty (target: any) Returns true if target is not null, undefined or a string of length 0.

Number types

Name Signature Description
equals (target: number, searchVal: number) Returns true if target equals searchVal.
doesNotEqual (target: number, searchVal: number) Returns true if target is not equal to searchVal.
doesNotEqual (target: number, searchVal: number) Returns true if target is greater than searchVal.
lessThan (target: number, searchVal: number) Returns true if target is less than searchVal.
greaterThanOrEqualTo (target: number, searchVal: number) Returns true if target is greater than or equal to searchVal.
lessThanOrEqualTo (target: number, searchVal: number) Returns true if target is less than or equal to searchVal.
null (target: any) Returns true if target is null.
notNull (target: any) Returns true if target is not null.
empty (target: any) Returns true if target is either null, undefined or NaN.
notEmpty (target: any) Returns true if target is not null, undefined or NaN.

Boolean types

Name Signature Description
true (target: boolean) Returns if target is truthy.
false (target: boolean) Returns true if target is falsy.
null (target: any) Returns true if target is null.
notNull (target: any) Returns true if target is not null.
empty (target: any) Returns true if target is either null or undefined.
notEmpty (target: any) Returns true if target is not null or undefined.

Date types

Name Signature Description
equals (target: Date, searchVal: Date) Returns true if target equals searchVal.
doesNotEqual (target: Date, searchVal: Date) Returns true if target does not equal searchVal.
before (target: Date, searchVal: Date) Returns true if target is earlier than searchVal.
after (target: Date, searchVal: Date) Returns true if target is after searchVal.
today (target: Date) Returns true if target is the current date.
yesterday (target: Date) Returns true if target is the day before the current date.
thisMonth (target: Date) Returns true if target is contained in the current month.
lastMonth (target: Date) Returns true if target is contained in the month before the current month.
nextMonth (target: Date) Returns true if target is contained in the month following the current month.
thisYear (target: Date) Returns true if target is contained in the current year.
lastYear (target: Date) Returns true if target is contained in the year before the current year.
nextYear (target: Date) Returns true if target is contained in the year following the current year.
null (target: any) Returns true if target is null.
notNull (target: any) Returns true if target is not null.
empty (target: any) Returns true if target is either null or undefined.
notEmpty (target: any) Returns true if target is not null or undefined.

IgxGridRowComponent

Getters/Setters

Name Type Getter Setter Description
rowData Array Yes No The data passed to the row component.
index number Yes No The index of the row.
cells QueryList Yes No The rendered cells in the row component.
grid IgxGridComponent Yes No A reference to the grid containing the row.
nativeElement HTMLElement Yes No The native DOM element representing the row. Could be null in certain environments.

IgxGridCellComponent

Getters/Setters

Name Type Getter Setter Description
column IgxColumnComponent Yes No The column to which the cell belongs.
row IgxGridRowComponent Yes No The row to which the cell belongs.
value any Yes No The value in the cell.
rowIndex number Yes No The index of the row this cell belongs to.
columnIndex number Yes No The index of the column this cell belongs to.
grid IgxGridComponent Yes No The grid component itself.
inEditMode boolean Yes Yes Gets/Sets the cell in edit mode.
nativeElement HTMLElement Yes No The native DOM element representing the cell. Could be null in certain environments.

Methods

Name Return Type Description
update(val: any) void Emits the onEditDone event and updates the appropriate record in the data source.