Get the entire row's data inside a cell in AgGrid

user_5245129 0
Viewed 1222

I'm using AgGridReact, but this is a general question about how to get the entire row's data inside a cell in that row using AgGrid.

I'm using a custom cell renderer for a certain cell (whose field is id) in which I need to get the entire row's data and not just the id field's data.

This is how the grid is defined:

<AgGridReact
    rowData={users}
    frameworkComponents={{
        idRenderer: IdRenderer,
    }}
>
    <AgGridColumn field="id" cellRenderer="idRenderer"></AgGridColumn>
    <AgGridColumn field="name"></AgGridColumn>
    <AgGridColumn field="phone"></AgGridColumn>
    <AgGridColumn field="email"></AgGridColumn>
</AgGridReact>

Here's the IdRender component (used to customize the look of the id field's cell) where I need to get the row's data:

import { useEffect } from 'react';

function IdRenderer(props) {
    // the following currently stores the cell's value in `rowData`
    const rowData = props.valueFormatted ? props.valueFormatted : props.value;

    useEffect(() => {
        console.log(rowData);  // get the entire row's data here instead of just this cell's value
    }, [])

    return (
        <>
            {/* some components */}
        </>
    );
}

export default IdRenderer;

I'm not able to figure out from the docs what should I add to the grid or the cell renderer to be able to get the entire row's data inside the id field's cell (where I'll be posting the data to an API on a button click).

ag-grid-react ag-grid
1 Answers

After digging through the docs for a long time I finally found the way to achieve this: using a valueGetter. I decided to post this Q&A to help others in figuring out how to achieve the same.

Just define the following value getter for the row's data:

const rowDataGetter = function (params) {
    return params.data;
};

and use it on the AgGridColumn by setting the valueGetter prop:

<AgGridColumn field="id" cellRenderer="idRenderer" valueGetter={rowDataGetter}></AgGridColumn>

Now rowData in IdRenderer will contain the entire row's data instead of the cell value.

user_52451290
Related