Iterating over a specific row of a react ag-grid

Question

I got an ag-grid with a button rendered in a dedicated column (meaning each row has a button on the side under that column). I've done it like this:

const columnDefinition = [
                          {headerName: '', cellRenderer: 'editButton'},
                          {headerName: "Key", field: "Key"},
                          {headerName: "Value", field: "Value"}];

const overlayParams = {
  frameworkComponents: {
                        editButton: EditMagnifierButton, //EditMagnifierButton is a react functional component which renders a button
                       }
return (
 <Ag-Grid-React
     rowData={myRowData}
     columnDefs={columnDefinition} 
     {...overlayParams} />
);

I want to know how to iterate over the row where the user clicked the button and get all the values in each column of the row so i can pass them as props to another component.

The EditMagnifierButton :

const EditMagnifier = (props) =>
{
    return (
        <IconButton iconSvg={search} />
    )
}

Answer 1

As mentioned in ag-Grid docs, ag-Grid passes some default props to each cell-renderer and these props are in the format of ICellRendererParams ,

 interface ICellRendererParams { value: any, // value to be rendered valueFormatted: any, // value to be rendered formatted getValue: () => any, // convenience function to get most recent up to date value setValue: (value: any) => void, // convenience to set the value formatValue: (value: any) => any, // convenience to format a value using the column's formatter data: any, // the row's data node: RowNode, // row node colDef: ColDef, // the cell's column definition column: Column, // the cell's column rowIndex: number, // the current index of the row (this changes after filter and sort) api: GridApi, // the grid API eGridCell: HTMLElement, // the grid's cell, a DOM div element eParentOfValue: HTMLElement, // the parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection columnApi: ColumnApi, // grid column API context: any, // the grid's context refreshCell: () => void // convenience function to refresh the cell }

Detail can be found under, https://www.ag-grid.com/javascript-grid-cell-rendering-components/#cell-renderer-component

So, there is one property called data which points to the rowData pointing to the index where the cell-renderer is present (in this case, the clicked one).

So your cell-renderer can use this prop directly as props.data ,

 /* Here the props will point to ICellRendererParams */ const EditMagnifier = (props) => { const printRowData = (event) => { /* This will give you the complete row data for the clicked row*/ console.log(props.data); } return ( <IconButton iconSvg={search} onClick={printRowData}/> ) }