I have been working with ag grid to display data in my component. I am fetching data through an API call and dynamically extracting the column names from the response to pass this information to the child component for display. However, the data is not showing up as expected.
Interestingly, when I use a static configuration stored in a variable, everything works fine.
Static Column Config =>
export let DETIALCONFIG= {
columnDefs: [
{
headerName: 'VT Name',
field: 'vtName',
hide: false,
minWidth: 235,
serverFlag: true,
tooltipFields: 'veName'
},
{
headerName: 'Key',
field: 'KEY',
hide: false,
serverFlag: true,
},
{
headerName: 'ID',
field: 'ID',
hide: true,
serverFlag: true,
},
// more column definitions...
],
gridOptions: {
domLayout: 'autoHeight',
pagination: false,
paginationPageSize: 6,
rowSelection: 'multiple',
// more grid options...
}
}
Dynamic Logic
private run = async (veName: string) => {
let response: any
try {
// API call logic...
} catch (err) {
// error handling...
}
When I try to dynamically display the columnConfig in the template within the gridOptions property, an additional columnDefs is being added every time. This issue does not occur with static behavior, and I believe this is where the problem lies. I would appreciate it if someone could help me figure out what I am doing wrong here. Thank you.