Pass multiple values for cellRendererFramework using ag-grid?

Question

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?

Answer 1

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

Answer 2

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

https://www.ag-grid.com/javascript-grid-cell-rendering-components/#cell-renderers-and-row-groups

Answer 3

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>