ag-grid object nested array

Question

Hi guys I have array as one of the column data and I would like to display it using ag-grid may I know what are my options

https://stackblitz.com/github/snehalp29/ag-grid-demo

columnDefs = [
    { field: 'freLoanId' , checkboxSelection: true,  headerCheckboxSelection: true},
    { field: 'loanAmt' },
    { field: 'interestRate'},
    {field: 'loanInterestRateStructureType'},
    {field: 'loanSecuritizationEligibilityInd'},
    {field: 'properties.pptyName'}
  ];

I tried above code but its not working

score 2 · Answer 1 · answered Jan 25 '21 at 10:54

You can't have nested fields in column definition field attribute as that is an attribute that is used by agGrid internally and not related to your row object that you are passing in rowData.

The way to do this is to use a cellRenderer or a valueGetter method while giving your field attribute a proper name.

so instead of :

{field: 'properties.pptyName'}

try

{
  field: 'pptyName',
  valueGetter: (params) => {
    return params.value.properties.pptyName;
  }
}

this would work if you pass the entire properties object to the rowData attribute pptyName.

This worked for me. Thank you. Instead of params.value I found params.data though. — Danny Acosta, Oct 15 '22 at 13:34

score 1 · Answer 2 · answered Jan 25 '21 at 04:23

you can do the following:

columnDefs = [
    {
      field: "freLoanId",
      checkboxSelection: true,
      headerCheckboxSelection: true
    },
    { field: "loanAmt" },
    { field: "interestRate" },
    { field: "loanInterestRateStructureType" },
    { field: "loanSecuritizationEligibilityInd" },
    {
      field: "pptyName (or custom name)",
      valueGetter: params => {
        console.log(params.data.properties[0].pptyName);
        return params.data.properties[0].pptyName;
      }
    }
  ];

Check: https://stackblitz.com/edit/github-a9uxcv?file=src/app/app.component.ts Docs: https://www.ag-grid.com/documentation/javascript/value-setters/

ag-grid object nested array

2 Answers2