Column Cell Template

By default, the grid uses the field of the column to render the value as a string inside the cell. This is fine for basic scenarios, but if you want to customize the rendered output or the final output is a combination of different data fields, you can customize the cell template.

To achieve that, use <ng-template> inside <igx-grid-lite-column>...</igx-grid-lite-column> of a column in which you want to template the content.

<igx-grid-lite-column field="avatar" header="Avatar">
    <ng-template igxGridLiteCell let-value>
        <igx-avatar shape="circle" alt="User avatar" [src]="value">
        </igx-avatar>
    </ng-template>
</igx-grid-lite-column>

You also need to import IgxGridLiteCellTemplateDirective

import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite';

And add it to the imports array

imports: [ IgxGridLiteCellTemplateDirective ]

Use as a Formatter Function

For the simple scenario where some formatting is required, one can just return the formatted value. Here is an example for displaying a number value to a locale currency format:

public formatter = new Intl.NumberFormat('en-150', {
  style: 'currency',
  currency: 'EUR'
});

/** Return the custom currency format for a value `value = 123456.789` */
protected formatCurrency = (value: number) => {
  return this.formatter.format(value); // => "€123,456.79"
};

You can combine values different fields from the data source as well.

public formatter = new Intl.NumberFormat('en-150', {
  style: 'currency',
  currency: 'EUR'
});

/** Return the total earned money from a product in custom currency */
protected formatCurrency = (value: number, unitsSold: number) => {
  return this.formatter.format(value * unitsSold);
};

<igx-grid-lite-column field="price" header="Price" dataType="number">
    <ng-template igxGridLiteCell let-value let-row="row">
        {{formatCurrency(value, row.data.sold)}}
    </ng-template>
</igx-grid-lite-column>

Custom DOM Templates

Aside from using components from igniteui-angular inside the <ng-template> , you can also create your own DOM template, which will be rendered inside the cell container.

You can template any standard DOM elements as well as web components from other libraries. For example in the following code snippets we are using the rating component coming from igniteui-webcomponents. In order to use it properly, we need to go through a few steps described below.

// Import external components for the custom template
import {
    defineComponents,
    IgcRatingComponent
} from 'igniteui-webcomponents';

// Define them so that we can use them in our sample
defineComponents(
    IgcRatingComponent
);

<!-- Use the rating component from Web Components in your template -->
<igx-grid-lite-column field="rating" header="Customer Rating" dataType="number">
    <ng-template igxGridLiteCell let-value>
        <igc-rating
            [value]="value"
            readonly
            min="0"
            max="5">
        </igc-rating>
    </ng-template>
</igx-grid-lite-column>

Note

Keep in mind the more complex and involved the template is, the greater the performance cost. Avoid complex DOM structures if performance is important.

Cell Context Object

The custom cell renderer is passed an GridLiteCellContext object as a parameter with the following props:

/**
 * Context object for the row cell template callback.
 */
export interface IgxGridLiteCellTemplateContext<T extends object> {
  /**
   * The cell element parent of the template.
   */
  parent: GridLiteCell<T>;
  /**
   * The row element containing the cell.
   */
  row: GridLiteRow<T>;
  /**
   * The current configuration for the column.
   */
  column: ColumnConfiguration<T, K>;
  /**
   * The value from the data source for this cell.
   */
  value: PropertyType<T, K>;
  
  $implicit: PropertyType<T, K>;
}

Additional Resources

Our community is active and always welcoming to new ideas.

Grid Lite GitHub