how add customized column through UI in prime NG data table

Question

i am using prime ng package for a table view..I acchived the read only table.Now i need to have a button and clicking of that button should add coloumn in UI which is editable. How can I achive that? i have searched many..please help

 

 

my prime ng table

 

<p-dataTable [value]="marketmodellist" [rows]="7" [paginator]="true" [globalFilter]="gb" #dt >

<p-column field="countryName" header="Country Name" [filter]="true" filterPlaceholder="Search"></p-column>

<!--<p-column field="submarketCode" header="Year ({{yearFilter||'No Filter'}})" [filter]="true" filterMatchMode="equals">

<ng-template pTemplate="filter" let-col>

<i class="fa fa-close" (click)="yearFilter=null;dt.filter(null,col.field,col.filterMatchMode)"></i>

<p-slider [style]="{'width':'100%','margin-top':'8px'}" [(ngModel)]="yearFilter" [min]="1970" [max]="2010" (onSlideEnd)="dt.filter($event.value,col.field,col.filterMatchMode)"></p-slider>

</ng-template>

</p-column>-->

<p-column field="countryCode" header="Country Code" [filter]="true" filterMatchMode="equals" >

<ng-template pTemplate="filter" let-col>

<!--<p-dropdown [options]="brands" [style]="{'width':'100%'}" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-dropdown>-->

</ng-template>

</p-column>

<p-column field="subdivisionCode" header="subdivision Code" [filter]="false" filterPlaceholder="Search"></p-column>

<p-column field="taxTerritory" header="Tax Territory" [filter]="false" filterMatchMode="in">

<ng-template pTemplate="filter" let-col>

<!--<p-multiSelect [options]="colors" defaultLabel="All Colors" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>-->

</ng-template>

</p-column>

<p-column field="submarketCode" header="Gcc Tax Partner Group" [filter]="false" filterPlaceholder="Search"></p-column>

<p-column field="currencyCode" header="currency " [filter]="false" filterPlaceholder="Search"></p-column>

<p-column field="createdOn" header="Updated On" [filter]="false" filterPlaceholder="Search"></p-column>

<p-column field="createdBy" header="Updated By" [filter]="false" filterPlaceholder="Search"></p-column>

</p-dataTable>