Set the pinnedBottomRowData in Ag Grid with colId

Question

I'm having an issue with displaying data in the pinned row in ag-Grid Vue 2. I'm using pinnedBottomRowData to provide data for the pinned row, but the row remains empty even though the pinned row is visible. Since my data comes from a JSON file, I'm using dot notation in the field: property like this: field: "supplier.number". However, this.gridApi.setPinnedBottomRowData doesn't work with dot notation, which is why I added colId: "supplierNumber". But even with that, it's not working. If I remove the dot notation and use field: "supplierNumber", then it works. I can't modify the JSON because I get it from an external source.

The worst-case scenario would be creating a new object with the data from the JSON, but I'd like to avoid that for now. Can anyone help me with this problem?

Here are my Code: Ag Grid

          <ag-grid-vue
            style="flex: auto; flex-direction: row; height: 650px"
            :class="cssClass"
            :columnDefs="columnDefs"
            :rowData="supplierList"
            :gridOptions="columnOptions"
            :alwaysShowHorizontalScroll="true"
            @grid-ready="onGridReady"
        ></ag-grid-vue>

column defs:

   columnDefs: [
        {
          headerName: "Information",
          children: [
            {
              headerName: "Description",
              colId: 'supplierDesc',
              field: "supplier.desc",
            },
            {
              headerName: "number",
              colId: "supplierNumber",
              field: "supplier.number"
            },
          ],
        },
        {
          headerName: "Header2",
          children: [
            {
                  headerName: "Supplier Budget",
                  colId:"supplierBudget",
                  field: "year2024.budget",
                  cellRenderer: (params) => this.currencyFormatter(params.value, "€"),
            },

              ],}, ],

function onGridReady

onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;

      this.createData('Total:', this.supplierList);
    },

and this is the createData function

  createData(prefix,list) {
      let calcTotalCols = ['supplierDesc', 'supplierNumber','supplierBudget'];
      let total = [{}];
      // initialize all total columns to zero
      calcTotalCols.forEach(params => { total[0][params] = 0 });
      // calculate all total columns
      calcTotalCols.forEach(params => {
        list.forEach(line => {
          total[0][params] += line[params];
        });
      });
      let result = [];

      result.push({
        supplierDesc: prefix + total[0]['supplierDesc'],
        supplierNumber: prefix + total[0]['supplierNumber'],
        supplierBudget: prefix + total[0]['supplierBudget'],
      });

      this.gridApi.setPinnedBottomRowData(result);
    },

Answer 1

To avoid modifying the JSON data directly, you can do something like this:

createData(prefix, list) {
  let calcTotalCols = ['supplierDesc', 'supplierNumber', 'supplierBudget'];
  let total = {};
  calcTotalCols.forEach(col => { total[col] = 0 });
  calcTotalCols.forEach(col => {
    list.forEach(line => {
      const fields = col.split('.');
      let value = line;
      fields.forEach(field => {
        if (value && typeof value === 'object') {
          value = value[field];
        }
      });
      total[col] += value || 0;
    });
  });

  let result = {};

  calcTotalCols.forEach(col => {
    result[col] = prefix + total[col];
  });

  this.gridApi.setPinnedBottomRowData([result]);
},