modification in ag-grid

how to add button on header of ag-grid and after clicking on add button ag-grid will be expend further columnDefs = [
{
field: ‘loanId’,
headerName: ‘Loan ID’,
cellStyle: (params) => {
if (params.rowIndex || params.rowIndex == 0) {
return {
color: ‘var(–primary-color)’,
fontWeight: ‘bold’,
cursor: ‘pointer’,
};
} else {
return {
color: ‘var(–primary-color)’,
};
}
},
headerClass: ‘ag-header-cell-textt’,
},
{ field: ‘productType’, headerName: ‘Product Type’ },
{
field: ‘associatedAssets’,
headerName: ‘Associated Assets’,
cellStyle: (params) => {
if (params.rowIndex || params.rowIndex == 0) {
return {
color: ‘var(–primary-color)’,
fontWeight: ‘bold’,
cursor: ‘pointer’,
};
} else {
return {
color: ‘var(–primary-color)’,
};
}
},
headerClass: ‘ag-header-cell-textt’,
},
{ field: ‘maturityDate’, headerName: ‘Maturity Date’ },
{ field: ‘nextRepriceDate’, headerName: ‘Next Reprice Date’ },
{
field: ‘initialLoanAmount’,
headerName: ‘Initial Loan Amount’,
valueFormatter: this.currencyFormatter,
},
{ field: ‘interestRate’, headerName: ‘Interest Rate’ },
{
field: ‘interestPortion’,
headerName: ‘Interest Portion/Principal Interest’,
},
{
field: ‘principleBalance’,
headerName: ‘Principal Balance’,
valueFormatter: this.currencyFormatter,
},
{ field: ‘termToRun’, headerName: ‘Term to Run’ },
{
field: ‘nextPaymentAmount’,
headerName: ‘Next Payment Amount’,
valueFormatter: this.currencyFormatter,
},
{ field: ‘nextPaymentDate’, headerName: ‘Next Payment Date’ },
{ field: ‘startDate’, headerName: ‘Start Date’ },
{
field: ‘actions’,
headerName: ‘Action’,
cellRenderer: UdcPopoverComponent,
pinned: ‘center’,
editable: false,
cellRendererParams: {

    context: {
      html: this.dropdownHTML(),
      id: this.id = this.encryptionService.generateAESKey(8),
    },
  }
  ,

  cellStyle: () => {
    return {
      fontSize: '16px',
      cursor: 'pointer',
    };
  },
},

];