In the preceding use case, the columns are defined in a static representation using the p-column tag. There is another approach to represent columns inside a data table via dynamic columns. The table columns need to be instantiated as an array. The array will be iterated using the ngFor directive as shown here:

<p-dataTable [value]="basicBrowsers">
  <p-header>
    <div class="algin-left">
      <p-multiSelect [options]="columnOptions" [(ngModel)]="cols">
      </p-multiSelect>
    </div>
  </p-header>
  <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>

The cols property describes the given column options within the component class:

this.cols = [
  {field: 'engine', header: 'Engine'},
  {field: 'browser', header: 'Browser'},
  {field: 'platform', header: 'Platform'},
  {field: 'grade', header: 'Grade'}
];

The following screenshot shows a snapshot result of dynamic columns in a tabular format as an example:

In the preceding snapshot, the columns are dynamically added or removed using a multiselect drop-down menu. For demonstration purposes, we removed the Version column field from the table.