Как добавить строку нижнего колонтитула кнопок, которые изменяют данные столбца

Question

У меня есть ag-grid, которая отображает данные в виде поворотного способа. данные необходимо редактировать в столбце, а не в строке. Поэтому я ищу решение, которое добавляет ряд кнопок в нижний колонтитул, который имеет доступ как к параметрам из заголовка, так и к данным в столбце.

Я просматривал документацию и не могунайти что-нибудь, что будет работать. Может быть, выровненная сетка, но это проблема, когда горизонтальная полоса прокрутки не будет работать.

this.gridOptionsFormat = <GridOptions>{
  rowData: this.createRowData(),
  columnDefs: this.createColumnDefs(this.statuses),
  onGridReady: () =>{
    this.gridOptions.api.sizeColumnsToFit();
    this.gridOptions.groupIncludeFooter = true 
  },
  rowHeight: 48,
  frameworkComponents:{
    inputRenderer: MatInputComponent,
    customizedCell: CustomizedCellComponent
  },

};

// здесь мои columnDefs

  private createColumnDefs(statuses:string[]){
    console.log("in here");
   return [
    {
      headerName: 'Arm', 
      field:'arm',
      enableRowGroup : true,
      rowGroup: true
    },
    {headerName: 'Id', field:'id'},
    //{headerName: 'Id', field:'id'},
    {
      headerName: 'V1', 
      field:'v1',

      editable: true,
      aggFunc: "sum",

      cellStyle: (params: any) => {
        var color = this.statusToColor(params.data.v1.split("-")[1]);
        //var color = this.statusToColor(params.value.split("-")[1]);
        return { "background-color": color };
        },

     //valueFormatter: (params) => params.value.split("-")[0],

     valueGetter: (params) =>  {
      return +params.data.v1.split("-")[0]; //returns [object Object]      
      //return 'yy'; //returns yy in column     
      //return params.data; //returns [object Object]      
      //return params.data.split("-")[0];
     },
     cellEditor: "inputRenderer"
    },
    {
    headerName: 'V2', field:'v2', editable: true, 
    cellEditor: "inputRenderer",
    aggFunc: "sum",
    //rowGroup: true,
    cellStyle: (params: any) => {
       var color = this.statusToColor(params.value.split("-")[1]);
       return { "background-color": color };
    },

    valueFormatter: (params) => params.value.split("-")[0],
    //valueGetter: (params) => +params.value.split("-")[0],
  }, 

// и наконец данные

{arm:'1',id:'John Doe', v1: '25-completed', v2: '3567-completed', v3: '0-notcompleted'},
 {arm:'1',id:'Dark Vader', v1:'0-notcompleted', v2: '3567-completed', v3: '450-completed'},
 {arm:'1',id:'John Doe', v1: '250-completed', v2: '0-notcompleted', v3: '0-notcompleted'}

на заметку: с этим форматом данных я не могу заставить итоги работать, только если я удаляю статус, то есть "-completed", я могу получить итоги группы для отображения. Я хотел бы, чтобы данные моделировались в объекте, подобном этому:

{arm:'1',id:'John Doe', 
v1: {total:25, status:'completed'}, 
v2: {total:25456, status:'notcompleted'}, 
v3: {total:225, status:'completed'},

Однако я не могу заставить это работать. Нажатие кнопки должно воздействовать на столбец, т. Е. Кнопка в нижнем колонтитуле v1 должна иметь доступ к v1, итого 25 и статус завершен.

У меня есть нижний колонтитул включения, но когда я пытаюсь установить группу в columnDefs, данные не отображаются.

Я новичок в этой области и буду очень признателен за помощь.

Я бы ожидал нижний колонтитул кнопок, которые воздействуют на данные столбца.