angularag-gridag-grid-angular

Is it possible to add title/custom component above ag-grid nested table?

I am using ag-grid (in an Angular project) to render a nested table and I want to add a title and a button on top of the child table. I could not find anything in ag-grid documentation.

I am fine with having a separate custom component to be rendered there. Any ideas on how this can be done?

Any workaround or suggestion is welcomed.

Thank you.

enter image description here

Solution

  • one option is you can add on ag-grid [detailCellRenderer]="detailCellRenderer"

    In ts file you can define your own component & map with detailCellRenderer

    public detailCellRenderer = PanelViewComponent;

    Code for Custom compoenet

    @Component({
  selector: 'app-panel-view',
  templateUrl: './panel-view.component.html',
  styleUrls: ['./panel-view.component.scss'],
})
export class PanelViewComponent implements ICellRendererAngularComp {
public params!: ICellRendererParams;
agInit(params: ICellRendererParams): void {
    this.params = params;
  }
}

    in HTML you can define your child grid and tables & header & buttons anything you want.