Ag-grid is taking a lot of time to display with multiple Cell Renderer and Value Getter - ag-grid

Question

I have to render ag-grid table in dialog box.
My grid has multi cellRenderer, valueGetter and cellRendererParams in columnDefs.
Instead of converting server data to rowData and using field to render, I have used valueGetter to fetch the value from the server data like
valueGetter: 'data.screen1.graph.visible'.
My ag-grid with 13 columns and 150 rows is taking noticeable time to render.
Is it because of valueGetter that my table is taking time to render?
Below is my sample data:
private createColumnDefs() {
this.columnDefs = [{
headerName: 'Header1',
cellRenderer: (params) => {
return params.data.serverObject1.function === 'input' ? 'I' : 'O';
},
minWidth: 50,
width: 70,
}, {
headerName: 'Header2',
field: 'serverObject1.name',
minWidth: 60,
width: 80,
}, {
headerName: 'Header3',
field: 'value',
cellRenderer: 'valueFieldRenderer',
minWidth: 100,
width: 250,
}, {
headerName: 'Header4',
cellRenderer: 'checkBoxRenderer',
valueGetter: 'data.serverObject1.graph.visible',
cellRendererParams(params) {
return {
disabledVal : params.data.localArray.length > 0 || params.data.attribute1 !== null
};
},
minWidth: 70,
width: 70,
}, {
headerName: 'Header5',
cellRenderer: 'checkBoxRenderer',
valueGetter: 'data.serverObject1.archive',
cellRendererParams(params) {
return {
disabledVal : params.data.serverObject1.function === 'input'
};
},
minWidth: 70,
width: 70,
}, {
headerName: 'Header6',
cellRenderer: 'checkBoxRenderer',
valueGetter: 'data.serverObject1.alarm',
cellRendererParams(params) {
return {
disabledVal : !((params.data.serverObject1.function === 'output') && (params.data.serverObject1.type === 'bool'))
};
},
minWidth: 70,
width: 70,
},
{
headerName: 'Header7',
cellRenderer: 'textBoxRenderer',
valueGetter: 'data.serverObject1.active',
minWidth: 150,
width: 150,
},
{
headerName: 'Header8',
cellRenderer: 'textBoxRenderer',
valueGetter: 'data.serverObject1.inactive',
minWidth: 150,
width: 150,
},
{
headerName: 'Header11',
cellRenderer: 'textBoxRenderer',
valueGetter: (params) => params.data.text1,
minWidth: 150,
width: 150,
cellStyle: (params) => {
return (this.diagram === 'XYZ' &&
!(params.data.serverObject1.function === 'output' || params.data.serverObject1.type === 'string'
|| params.data.serverObject1.type === 'int')) ? {display: 'block'} : {display: 'none'};
}}
];
}
cell renderer:
#Component({
selector: 'app-check-box',
template:
`
<input type="checkbox" [(ngModel)]="params.value" [id]="getID(params)" class="primary small"
(change)="onChange($event)">
<label [for]="getID(params)" class="text-hide">hidden</label>
`,
styleUrls: ['./test.component.css']
})
// tslint:disable-next-line:component-class-suffix
export class CheckBoxRenderer implements AfterViewInit, ICellRendererAngularComp {
private params: ICellRendererParams;
constructor(private readonly translateService: TranslateService) { }
agInit(params: ICellRendererParams): void {
this.params = params;
}
public onChange(event) {
}
refresh(params: any): boolean {
return false;
}
public getID(params): string {
return params.column.colId + params.rowIndex;
}
afterGuiAttached(params?: IAfterGuiAttachedParams): void {
}
ngAfterViewInit(): void {
}
translate(key: string, params?: any): string {
return this.translateService.instant(key, params);
}
}
Should I consider converting to rowData to decrease loading time?