Gist for dynamic table sample (dipm)

dynamic-col-table.component.html

<p-button label="Add Col" (onClick)="addColumn()"></p-button>&nbsp;
<div class="flex">
  <div *ngFor="let col of colsHeader; index as j; trackBy: colTrackFunc"
       [ngClass]="getRowClass()">
    <div class="dipm-col-item" *ngIf="j === 0">Nom colonne</div>
    <div class="dipm-col-item" *ngIf="j > 0">
      <button pButton pRipple label="Remove Column" class="p-button-outlined mr-2" (click)="removeColumn(j)"></button>
    </div>
  </div>
</div>
<ng-template ngFor let-row [ngForOf]="rows" let-i="index" [ngForTrackBy]="rowTrackFunc">
  <div class="flex">
    <div class="dipm-col-item">{{row.name}}</div>
    <div class="dipm-col-item" *ngFor="let col of cols; index as j; trackBy: colTrackFunc">
      <input type="text" [value]="row.values[j] || ''" [placeholder]="j" pInputText/>
    </div>
  </div>
</ng-template>

dynamic-col-table.component.scss

.dipm-col-item {
  flex-direction: row;
  justify-content: space-between;
}

:host {
  .flex {
    justify-content: space-between;
  }
}

dynamic-col-table.component.ts

import { Component, OnInit } from '@angular/core';

type Item = {id: string, name: string, values: number[]};

@Component({
  selector: 'app-dynamic-col-table',
  templateUrl: './dynamic-col-table.component.html',
  styleUrls: ['./dynamic-col-table.component.scss']
})
export class DynamicColTableComponent implements OnInit {
  nbCols: number = 3;
  rows: Item[] = [
    {
      id: 'navs',
      name: 'No AVS',
      values: [],
    },
    {
      id: 'firstname',
      name: 'First name',
      values: [],
    },
    {
      id: 'lastname',
      name: 'Last name',
      values: []
    }
  ]

  constructor() { }

  ngOnInit(): void {
  }

  getRowClass(): string {
    return `flex`; // -${Math.round(12 / (this.nbCols + 1))}
  }

  rowTrackFunc(index: number, item: Item) : string {
    return `${item.id}-${index}`;
  }

  private genCol(nb:number): number[] {
    const cols: number[] = [];
    let i = nb;
    while(i) {
      cols.push(i--);
    }
    return cols.reverse();
  }

  get cols() : number[] {
    return this.genCol(this.nbCols);
  }

  get colsHeader(): number[] {
    return this.genCol(this.nbCols + 1);
  }

  colTrackFunc(index: number, nb: number) : string {
    return `col-${index}`;
  }

  addColumn(): void {
    this.nbCols = this.nbCols + 1;
  }

  removeColumn(index: number): void {
    console.log(`Removing column ${index}`);
    this.nbCols = this.nbCols - 1;
  }
}

dynamic-row-table.component.html

<div style="margin-bottom: 2px">
  <p-button label="Add Row" (onClick)="addRow()"></p-button>
</div>
<p-table [value]="items" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Action</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item let-i="rowIndex">
    <tr>
      <td>
        <div *ngIf="i < 2">{{item.name}}</div>
        <div *ngIf="i >= 2">
          <input type="text" value="Autre" pInputText />
        </div>
      </td>
      <td>
        <input type="text" pInputText />
      </td>
      <td>
        <input type="text" pInputText />
      </td>
      <td>
        <input type="text" pInputText />
      </td>
      <td>
        <p-button label="Remove row" (onClick)="removeRow(item.id)"></p-button>&nbsp;
      </td>
    </tr>
  </ng-template>
</p-table>

dynamic-row-table.component.ts

import { Component, OnInit } from '@angular/core';

type Item = {id: string, name: string, values: number[]};

@Component({
  selector: 'app-dynamic-row-table',
  templateUrl: './dynamic-row-table.component.html',
  styleUrls: ['./dynamic-row-table.component.scss']
})
export class DynamicRowTableComponent implements OnInit {
  nbCols: number = 3;
  items: Item[] = this.genItems(3);

  private newItem(rowId: string = 'row', name: string = 'Row', values?: number[]): Item {
    return {
      id: rowId,
      name,
      values: values ? values : this.range(this.nbCols),
    }
  }

  private genItems(nb: number): Item[] {
    const items : Item[] = [];
    for(let i = 0; i < nb; i++) {
      items.push(this.newItem(`row${i}`, `Row ${i}`, this.range(this.nbCols)));
    }
    return items;
  }

  private range(n: number): number[] {
    const r: number[] = [];
    for(let i = 0; i < n; i++) {
      r.push(0);
    }
    return r;
  }

  constructor() { }

  ngOnInit(): void {
  }

  addRow() : void {
    const id = this.items.length;
    this.items.push(this.newItem(`row${id}`, `Row ${id}`, this.range(this.nbCols)));
  }

  removeRow(itemId: string): void {
    this.items = this.items.filter((r, i) => r.id !== itemId);
  }

}