Как создать столбец для данных rowData в таблице agGrid в Angular?

Question

Как создать столбец для приведенного ниже rowData в таблице agGrid в Angular, который будет отображать столбец address самостоятельно? URL изображения - пример таблицы

  columnDefs = [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'}
  ];

  rowData = [
      {make: 'Toyota', model: 'Celica', price: 35000, address: [{name: 'Showroom 1', city: 'Miami', ZIP: 67202}, {name: 'Showroom 2', city: 'Mesa', ZIP: 67204}]},
      {make: 'Ford', model: 'Mondeo', price: 32000, address: [{name: 'Showroom 1', city: 'Fresno', ZIP: 67203}, {name: 'Showroom 2', city: 'Oakland', ZIP: 67205}]},
      {make: 'Porsche', model: 'Boxter', price: 72000, address: [{name: 'Showroom 1', city: 'Kansas City', ZIP: 67201}, {name: 'Showroom 2', city: 'Long Beach', ZIP: 67206}]}

Answer 1

Для отображения адреса в выставочном зале 1 и выставочном зале 2 необходимо использовать группу столбцов. Приведенный ниже код поможет вам показать город и почтовый индекс в ваших выставочных залах. Добавьте этот объект столбца в свой columnDefs.

{
        headerName: "Showroom 1",
        children: [
          {
            headerName: "City",
            field: "address",
            valueFormatter: param => param.data.address[0].city
          },
          {
            headerName: "Zip",
            field: "address",
            valueFormatter: param => param.data.address[0].ZIP
          }
        ]
      },
      {
        headerName: "Showroom 2",
        children: [
          {
            headerName: "City",
            field: "address",
            valueFormatter: param => param.data.address[1].city
          },
          {
            headerName: "Zip",
            field: "address",
            valueFormatter: param => param.data.address[1].ZIP
          }
        ]
      }

Answer 2

Надеюсь, это поможет. Обновите его соответствующим образом.

  columnDefs = [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'},
    {
      headerName: 'Address', field: 'address',
      cellRenderer: (params) => {
         let cellContent = '<ol>';
         for (var i = 0; i < params.value.length; i++) {
             cellContent += `<li>${params.value[i].name}, ${params.value[i].city}</li>`;
         }
         cellContent += '</ol>';
     }
    }
  ];