I’m just learning AG Grid for the first time and if I understand correctly initialization of the table is parsing my data to populate the rows given the columns I’ve given. I would like to access a part of the current data being parsed to pass it to a custom image component to be used in the table. I’m not sure how to access this data or if it’s even possible. Any insight would be appreciated.
Current code:
export default function Table() {
const [tableData, setTableData] = useState([])
const fetchData = async() => {
await fetch('https://api.fantasycalc.com/values/current?isDynasty=false&numQbs=1&numTeams=12&ppr=1')
.then(res => res.json())
.then(data => setTableData(data))
.catch(err => console.log(err))
}
const CustomImageComponent = (id) => {
var imgLink = 'https://a.espncdn.com/combiner/i?img=/i/headshots/nfl/players/full/'+{id}+'.png'
return <a href={imgLink}>player image</a>
}
const [colDefs, setColDefs] = useState([
{ field: "overallRank" },
{ field: "player.name" },
{ field: "picture",
cellRenderer: CustomImageComponent(***need to pass id here***),
}
]);
//always runs first
useEffect( () => {
fetchData()
},[]
)
return (
// wrapping container with theme & size
<div
className="ag-theme-quartz" // applying the Data Grid theme
style={{ height: 500 }} // the Data Grid will fill the size of the parent container
>
<AgGridReact
rowData={tableData}
columnDefs={colDefs}
/>
</div>
)
}
Example JSON object contained in tableData: (I need to access the player.espnId field)
{
"player": {
"id": 5494,
"name": "Christian McCaffrey",
"mflId": "13130",
"sleeperId": "4034",
"position": "RB",
"maybeBirthday": "1996-06-07",
"maybeHeight": "71",
"maybeWeight": 210,
"maybeCollege": "Stanford",
"maybeTeam": "SF",
"maybeAge": 28.2,
"maybeYoe": 7,
"espnId": "3117251",
"fleaflickerId": "12892"
},
"value": 10243,
"overallRank": 1,
"positionRank": 1,
}
I’ve tried using ValueGetter to supply the cellRenderer params but couldn’t get it to work. I think this is because ValueGetter is only for fields actually being used in the table, whereas I’m trying to access an ID not stored in the table.