PrimeNG dynamic tabView with dynamic contents in component

Question

I'm currently creating the application in Angular. The problem statement is as follows:

1. There are several tabs, let say headers are like Tab1, Tab2, Tab3 and the contents of these tabs are different.
2. What I mean by different is that they need to have a table(I also added it from PrimeNG that has search pagination etc) that contains different columns for each Tabs (Tab1, Tab2, Tab3).
3. I implemented the Tab1 and it works good, but for other Tabs I want to use the same component with different values(like columns etc)

The following is part of the code I developed.

<p-tabView>
        <p-tabPanel header="Tab1">
          <p-table #dt [value]="Tab1" editMode="row">
            <ng-template pTemplate="header" let-columns>
              <tr>
                <th *ngFor="let col of cols">
                  {{col.header}}
                </th>

              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-tab1 >
              <tr [pEditableRow]="tab1">

                 <td *ngFor="let col of cols">
                  {{tab1[col.field]}}
                </td>
        </p-tabPanel
 </p-tabView>

and the following is the code for columns for Tab1:

this.cols = [
  { field: 'code', header: 'Code' },
  { field: 'name', header: 'Name' }

I'm also getting the Tabs from the service which is like getService('Tab1'); or getService('Tab2');

However, for other tabs(let say for Tab2 and Tab3) the columns can be different or same. But to get the content from service I always use getService('Tab1') or 'Tab2' etc.

So in those tabs(Tab2 or Tab3) the primeNG table can have different columns and values regarding to content I get from service.

How to implement the tabs and columns dynamically in this case? I could try to duplicate the code and use the different methods, but I would like to know the efficient way to implement this case. Any help is appreaciated.