Angular Data Grid Cell Template
RevoGrid provide a way to render native components inside of cells.
WARNING
If you are aiming for the faster render we are recommending to stick with native VNode render.
TIP
Check ColumnDataSchemaModel for mode information about input types.
Why Use Custom Cell Rendering?
RevoGrid’s native cell rendering enables you to:
- Embed Components: Render complex or interactive UI elements inside grid cells, such as buttons, images, input fields, or custom widgets.
- Dynamic Content: Customize each cell’s content based on the data it represents, such as formatting or conditional rendering.
- Interactivity: Make cells interactive with event listeners and component lifecycle methods, improving the overall user experience.
Cell Component
First, let's create a component to be displayed as a cell. This component will receive the cell's properties as an input and display it.
ts
// cell.component.ts
import { Component, Input } from '@angular/core';
import { ColumnDataSchemaModel } from '@revolist/revogrid';
@Component({
selector: 'app-cell',
standalone: true,
template: '<span> {{value}} works!</span>',
})
export class CellComponent {
@Input() props!: ColumnDataSchemaModel;
get value() {
return this.props.rowIndex;
}
}Grid Component and Cell Template
Next let's create a component that will be used to render the grid. This component will receive the grid's properties as an input and display it. At the same time, it will set the cell's template as native element of the cell.
ts
// app.component.ts
import { Component } from "@angular/core";
import { RevoGrid, Template } from "@revolist/angular-datagrid";
import { CellComponent } from "./cell.component";
@Component({
selector: "app-root",
standalone: true,
imports: [RevoGrid, CellComponent],
template: `<revo-grid
style="height: 200px; width: 200px"
[columns]="columns"
[source]="source"
></revo-grid>`,
})
export class AppComponent {
source = [
{
name: "1",
details: "Item 1",
},
{
name: "2",
details: "Item 2",
},
];
columns = [
{
prop: "name",
name: "First",
cellTemplate: Template(CellComponent),
},
{
prop: "details",
name: "Second",
},
];
}
Why Use Custom Cell Rendering?
RevoGrid’s native cell rendering enables you to:
- Embed Components: Render complex or interactive UI elements inside grid cells, such as buttons, images, input fields, or custom widgets.
- Dynamic Content: Customize each cell’s content based on the data it represents, such as formatting or conditional rendering.
- Interactivity: Make cells interactive with event listeners and component lifecycle methods, improving the overall user experience.