Creé una tabla usando AG-grid. aquí está el código
.HTML
<ag-grid-angular #agGrid style="width: 100%; height: 100%; font-size: 12px;" class="ag-theme-alpine" [rowData]="rowData" [columnDefs]="columnDefs" > </ag-grid-angular>.Ts
columnDefs = [{ headerName: '', field: 'rush', width: 53, resizable: true, cellRendererFramework: RegularGridCheckboxComponent, cellRendererParams: { clickHandler: this.checkBoxClickHander.bind(this)}, }, { headerName: 'Type', field: 'type', width: 74, resizable: true, }, { headerName: 'Address', field: 'address', width: 176, resizable: true }]Tengo algunos datos de fila. No los incluyo aquí.
En realidad, quiero crear un diseño de cuadrícula como la siguiente imagen. Puede ver que la parte inferior de la cuadrícula tiene un raw específico
Puede usar Pie de página para corregir una fila en la parte inferior: .HTML
<ag-grid-angular #agGrid style="width: 100%; height: 100%; font-size: 12px;" class="ag-theme-alpine" [rowData]="rowData" [autoGroupColumnDef]="autoGroupColumnDef" [columnDefs]="columnDefs"> </ag-grid-angular>.TS agregar esto
public autoGroupColumnDef: ColDef = { minWidth: 300, cellRendererParams: { innerRenderer: MyInnerRenderer, }, };Crea un nuevo componente: para mí es MyInnerRenderer
MiRenderizadorInterior
import { Component } from '@angular/core'; import { ICellRendererAngularComp } from 'ag-grid-angular'; import { ICellRendererParams } from 'ag-grid-community'; @Component({ selector: 'total-value-component', template: `<span style="color: {{ color }}; font-weight: {{ fontWeight }};" >{{ prefix }} {{ cellValue }}</span >`, }) export class MyInnerRenderer implements ICellRendererAngularComp { public cellValue = ''; public color = ''; public fontWeight = ''; public prefix = ''; // gets called once before the renderer is used agInit(params: ICellRendererParams): void { this.cellValue = params.value; this.color = params.node.footer ? 'navy' : ''; this.fontWeight = params.node.footer && params.node.level === -1 ? 'bold' : ''; if (params.node.footer) { this.prefix = params.node.level === -1 ? 'Grand Total' : 'Sub Total'; } } refresh(params: ICellRendererParams) { return false; } }para más detalles Consulte aquí