2

Directo al grano

Tengo una grid y quiero que las columnas vayan aumentando conforme tenga en los datos. Me explico. tengo estos datos

this.rowData = [
        {
            fecha: '03/march/1994',
            estatus: 'Activo',
            fee: 'BANCO',
            banks: {
                empresa1: 'Abc',
                empresa2: 'Abccc',
                empresa3: 'sss'
                /* esta cantidad puede cambiar */
            }
        }
    ];

el array "banks" se puede incrementar o volverse mas pequeño, depende de lo que una api que estoy consumiendo me devuelva.

Estos son los campos de Ag-Grid

 private createGrid(): void { 
    this.grid = assignNewObjet(GRID);
    this.grid.columnDefs = [
        {
            headerName: 'Fecha',
            field: 'fecha',
            maxWidth: 220,
        },
        {
            headerName: 'Estatus',
            field: 'estatus',
            maxWidth: 220,
        },
        {
            headerName: 'Tipo de recuado',
            field: 'fee',
        }
    ];

    this.pinnedBottomRowData = [
        {
            status: 'Total:',
            fee: '$ 200000',
        },
      ];
}
<ag-grid-angular
                    class="ag-theme-material w-100-p highGridThree"
                    [gridOptions]="grid"
                    [pinnedBottomRowData]="pinnedBottomRowData"
                    [rowData]="rowData"
                    [pagination]="true"
                >
                </ag-grid-angular>

y lo que quiero es que en el Grid, se agregue dinamicamente los nombres de las keys de banks y que se muestre algo como esto

Ag-Grid

1
  • Podrias mostrar el codigo de assignNewObjet(GRID)
    – nestdan
    Commented el 2 feb. 2022 a las 14:41

1 respuesta 1

0

Creación dinámica de columnas AG desde JSON Configurando las definiciones de columna desde un JSON en forma dinamica Hay que obtener las claves de los datos Json utilizar getColumnDefs()..setColumnDefs(colDefs)...setRowData(data) Ejemplo con modo comun y modo dinamico para objetos mas complejos no hay que modificar mucho este codigo guia en el link teoria

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component, OnInit,ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import { AgGridAngular } from 'ag-grid-angular';

interface Data {
  make:string,
  model:string,
  price:number
}

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})

export class GridComponent implements OnInit,AfterViewInit {
/*
  @ViewChild('agGrid') agGrid!: AgGridAngular;
  */
  @ViewChild('gGridEmpty') gGridEmpty!: AgGridAngular;
  

  columnDefs0 = [
  ];
  gridOptions = {

    defaultColDef: {
        sortable: true,
        filter: 'agTextColumnFilter',
        resizable: true
    },

    columnDefs: this.columnDefs0,
  
    pagination: true
};
/*
  columnDefs = [
    {headerName: 'Make', field: 'make',filter: true, checkboxSelection: true},
    {headerName: 'Model', field: 'model',sortable: true, filter: true},
    {headerName: 'Price', field: 'price',sortable: true, filter: true},
    { field: 'athlete', headerName: 'Best Athlete' } ,
    { field: 'athlete', headerValueGetter: (params:any) => 'New Athlete' }
];
*/
rowData!: Observable<Data[]>;
  constructor(private http: HttpClient ) { 
    this.rowData = this.http.get<Data[]>('https://www.ag-grid.com/example-assets/small-row-data.json');
  }

  ngOnInit(): void { }
ngAfterViewInit() {
    this.rowData.subscribe(data=>{
      console.log('data[0]',data[0])
    
      const colDefs= this.gGridEmpty.api.getColumnDefs() ;
      console.log('colDefs:Definiciones de columna',colDefs)
       colDefs!.length=0;
       // Get all the keys from the first Object in the JSON.
          const keys = Object.keys(data[0])
          console.log('Obtenemos las claves keys',keys)
          // agregamos cada key a colDefs con el valor de field
        
          keys.forEach(key => colDefs!.push({field : key}));
          // establecemos las nuevas definiciones utilizando el array modificado
          this.gGridEmpty.api.setColumnDefs(colDefs!);
            // el name del field lo mapeamos al rowData
          this.gGridEmpty.api.setRowData(data)
  }
    )
  }
  

 /*
  getSelectedRows(): void {
      const selectedNodes = this.agGrid.api.getSelectedNodes();
      console.log('selectedNodes',selectedNodes)
        const selectedData = selectedNodes.map(node => node.data);
        console.log('selectedData',selectedData)
     const selectedDataStringPresentation = selectedData.map(node => `${node.make} ${node.model}`).join(', ');
  
       console.log(  `Selected nodes: ${selectedDataStringPresentation}`);
     }
     */
}
<!--
<button (click)="getSelectedRows()">Get Selected Rows</button>
<ag-grid-angular 
    #agGrid
    style="width: 700px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData | async" 
    [columnDefs]="columnDefs"
    rowSelection="multiple"
    >
</ag-grid-angular>

<br>
-->
<ag-grid-angular 
    #gGridEmpty
    style="width: 700px; height: 500px;" 
    class="ag-theme-balham"
   
    [gridOptions]="gridOptions"
    >
</ag-grid-angular>

Tambien ag grid permite agrupar en children

Column Groups Para agregar las empresas como headers en un modelo comun

this.columnDefs = [
  
  { 
      headerName: 'Fecha',
      field: 'fecha',
      maxWidth: 220,
  },
  {
      headerName: 'Estatus',
      field: 'estatus',
      maxWidth: 220,
  },
  {
      headerName: 'Tipo de recuado',
      field: 'fee',
  },
  { 
        headerName: 'Empresa1',
       field: 'banks.empresa1
  },
  
  {     headerName: 'Empresa2',
       field: 'banks.empresa2'
  },
  { 
         headerName: 'Empresa3',
       field: 'banks.empresa3'
  }
]
 
En repositorio github en la ruta grid codigo en forma dinamica y tambien confeccionar una tabla con la respuesta de jsonplaceholder-->users ruta grid

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.