I have created a table using AG-grid. here is the code

.HTML

<ag-grid-angular #agGrid 
        style="width: 100%; height: 100%; font-size: 12px;" 
        
        [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
      }]

I have some rowData I am not include those in here

Actually I want to create a grid design like following image. You can see bottom of the grid have one specific raw

here is the image

CodePudding user response：

You can use Footer to fix a row in the bottom: .HTML

  <ag-grid-angular #agGrid 
            style="width: 100%; height: 100%; font-size: 12px;" 
            
            [rowData]="rowData"
            [autoGroupColumnDef]="autoGroupColumnDef"
            [columnDefs]="columnDefs">
        </ag-grid-angular>

.TS add this

 public autoGroupColumnDef: ColDef = {
        minWidth: 300,
        cellRendererParams: {
          innerRenderer: MyInnerRenderer,
        },
      };

Create a new component: for me its MyInnerRenderer

MyInnerRenderer

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;
  }
}

for more details Refer here