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).
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.