How to hide / show p-column in prime ng table in angular?

Question

I am using primeng data tabel like this, My requirements are

1) editable row by clicking edit button(selected row only editabel) -> done

2)all columns should not display, but in edit mode it should display in that row -> Not done

for above requirments I made tabel like this, my first requirment solved , I am facing issue with second requirment

this is the code

Here effective date, should not diplay the tabel, but while editing it's required field

 <form [formGroup]="chargeCodeAddForm">
<p-dataTable [value]="fspChargeCodeList" selectionMode="single" [loading]="loading" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
  scrollable="true" scrollHeight="400px" [paginator]="true" [lazy]="true" [rows]="pageSize" [totalRecords]="totalElements"
  [editable]="true" (onLazyLoad)="getFspChargeCode($event)" [responsive]="true" [globalFilter]="gb">


  <p-column styleClass="col-button">

    <ng-template let-fspChargeCode="rowData" pTemplate="body">
      <span *ngIf="!fspChargeCode.isEditable">
        <a class="attachments-mwa" (click)="editRow(fspChargeCode)">
          <i class="fas fa-pencil-square-o"></i>
        </a>
      </span>
      <span *ngIf="fspChargeCode.isEditable">
        <a class="attachments-mwa" (click)="editChargeCode(fspChargeCode)">
          <i class="fas fa-check"></i>
        </a>
      </span>
      <a class="delete-mwa" (click)="delete(fspChargeCode)">
        <i class="far fa-trash-alt"></i>
      </a>

    </ng-template>

  </p-column>

  <p-column field=approvalManager header="{{columns['approvalManager']}}" [hidden]="false" required="true">
    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.approvalManager}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-autoComplete field="firstName"
              [(ngModel)]="fspChargeCode.approvalManager" formControlName="approvalManager" [suggestions]="employees" (completeMethod)="getEmployee($event)"></p-autoComplete>

              <label *ngIf="fspChargeCode.approvalManager">
                {{columns['approvalManager']}}</label>
              <div *ngIf="formErrors.approvalManager" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.approvalManager}}
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>

  </p-column>
  <p-column field=startDate header="{{columns['startDate']}}" [hidden]="false" required="false">
    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.startDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['startDate']}}" formControlName="startDate" name="startDate" [(ngModel)]="fspChargeCode.startDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.startDate">
                {{columns['startDate']}}</label>
              <div *ngIf="formErrors.startDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.startDate}}
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>

  </p-column>
  <p-column field=endDate header="{{columns['endDate']}}" [hidden]="false" required="true">

    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.endDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['endDate']}}" name="endDate" formControlName="endDate" [(ngModel)]="fspChargeCode.endDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.endDate">{{columns['endDate']}}</label>
              <div *ngIf="formErrors.endDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.endDate}}
              </div>
              <div *ngIf="chargeCodeAddForm.hasError('dates')">
                End date must be after the start date
              </div>
            </span>
          </div>
        </div>
      </div>
    </ng-template>
  </p-column>
  <p-column field=effectiveDate header="{{columns['effectiveDate']}}" [hidden]="getEdit(false)" required="true">

    <ng-template let-row="rowData" pTemplate="body">
      <div *ngIf="!row.isEditable">{{row.effectiveDate}}</div>
      <div *ngIf="row.isEditable">

        <div class="ui-grid-row">
          <div class="form-group">
            <span class="has-float-label">
              <p-calendar placeholder="{{columns['effectiveDate']}}" name="effectiveDate" formControlName="effectiveDate" 
              [(ngModel)]="fspChargeCode.effectiveDate"
                showAnim="slideDown" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"></p-calendar>
              <label *ngIf="fspChargeCode.endDate">{{columns['effectiveDate']}}</label>
              <div *ngIf="formErrors.endDate" class="ui-message ui-messages-error ui-corner-all">
                {{ formErrors.effectiveDate}}
              </div>

            </span>
          </div>
        </div>
      </div>
    </ng-template>
  </p-column>


</p-dataTable>

Please help me

Answer 1

import this in the app.module.ts

 import { MultiSelectModule } from 'primeng/multiselect'; 

"tableOptions.columnDefination" containing all the columns belongs to the grid. in selectedColumns list you can fill all the columns you need to display

 <p-multiSelect [options]="tableOptions.columnDefination" [(ngModel)]="selectedColumns" optionLabel="header" defaultLabel="Choose Columns">         
 </p-multiSelect>

whichever column you choose that will reflect in your p-table data.