Pass multiple values for cellRendererFramework using ag-grid? |

I have only seen one SO question relating to this and there were no answers posted.

I have an angular app usnig ag-grid. It uses cellRendererFramework to render data for a column a to display in the table. I need to have data from the Date column to properly format the Data column, but cannot find any way to get that into the renderer component. Here's the basic code:

 // Columns defined inside the main component this.columnDefs = [ { headerName: 'Date', field: 'timestamp'}, { headerName: 'Data', field: 'type', cellRendererFramework: MyRendererComponent, }, } // Inside the renderer component export class MyRendererComponent implements OnInit { myData: any; agInit(params: import("ag-grid-community").ICellRendererParams): void { // This is where I need data from the first column to // properly set the return value this.myData = this.setUpData(params.value) } setUpData(data: any) { // Operate on the data here, but I need the timestamp to do it properly } ... } 

Does anyone have a suggestion how I can get the timestamp data into MyRendererComponent?

3 Answers

You can do it using CellRendererParams

colDef.cellRenderer = myCellRenderer; colDef.cellRendererParams = { color: 'guinnessBlack' } 

Then you can access color using params.color in myCellRenderer

You can read more about it here

Found the answer. Use the data parameter of params to access the row data and get to your field on that data:

params.data.timestamp 

you should send the data with cellRendererParams example:

{ cellRendererFramework: 'CityCellRenderer', cellRendererParams: {currentApartament: this.apartament}, }, 

and you can get the data so:

<template> <div> <v-btn text icon @click="btnClickedHandler()"> <v-icon>mdi-delete-outline</v-icon> </v-btn> </div> </template> <script> export default { name: 'CityCellRenderer', methods: { btnClickedHandler() { console.log(this.params) //please you check the properties. }, }, } </script> 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobWlxZWuGeoCOqZisq12iwq3AyKmjnmWmlrm2sdJmnaiqXZiyrbjRnqWdnaKav6e%2BwKacsKeioHq2v8innmaZl2K0s7XD