// app.component.ts
  import { Component } from "@angular/core";
  import { LicenseSample } from "./license.interface";

  @Component({
    selector: 'app',
    templateUrl: './app.component.html'
  })
  export class AppComponent {

    public licenses: LicenseSample[] = [
      {
        id: 1,
        name: 'single',
        price: 29.3
      },
      {
        id: 2,
        name: 'developer',
        price: 49.8
      },
      {
        id: 3,
        name: 'premium',
        price: 99.5
      },
      {
        id: 4,
        name: 'enterprise',
        price: 199
      }
    ];

  }

    <!-- app.component.html -->
    <ngx-table-builder [source]="licenses">

      <ngx-column key="name">
          <ng-template ngx-th>License</ng-template>
          <ng-template ngx-td let-name>
            {{ name | uppercase }}
          </ng-template>
      </ngx-column>

      <ngx-column key="price">
          <ng-template ngx-th>Cost</ng-template>
          <ng-template ngx-td let-price>
            {{ price | currency }}
          </ng-template>
      </ngx-column>

    </ngx-table-builder>

License {{ name | uppercase }} Price {{ price | currency }}

  // app.component.ts
  import { Component } from "@angular/core";

  export interface PeriodicElement {
      name: string;
      position: number;
      weight: number;
      symbol: string;
  }

  @Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styles: [
      `
         // Use custom CSS for column and cell
        .status-column .table-grid__cell {
          padding: 0;
          color: green;
        }

         // Reset CSS for default mat-button style
        .button__done[mat-button] {
          padding: 0;
          min-width: 100%;
        }
      `
    ],
    // Use to disable CSS Encapsulation for this component
    encapsulation: ViewEncapsulation.None,
  })
  export class AppComponent {
    public columns: string[] = [
      'name', 'position', 'weight', 'symbol',
      'position', 'weight', 'symbol', 'status'
    ];

    public data: PeriodicElement[] = [
      { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
      { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
      { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
      { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
      { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
      { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
      { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
    ];
  }

Note : If you use the keys array, then the columns will be drawn to agree with their order (including repetitions). If you do not use the keys array, then the columns will be drawn to agree with the specified templates (ngx-column).

---

Note : You can also use keywords empty-head , head-title for print simple text in table head.

  <!-- app.component.html -->
  <ngx-table-builder [source]="licenses" row-height="60">
      <ngx-column key="id" width="100" empty-head>
          <ng-template ngx-td let-id>№{{ id }}</ng-template>
      </ngx-column>

      <ngx-column key="name" head-title="License name">
          <ng-template ngx-td let-name>{{ name | uppercase }}</ng-template>
      </ngx-column>

      <ngx-column key="price" head-title="Cost">
          <ng-template ngx-td let-price>
              <button mat-button [matMenuTriggerFor]="menu">{{ price | currency }}</button>
              <mat-menu #menu="matMenu">
                  <button mat-menu-item>EUR</button>
                  <button mat-menu-item>DOL</button>
              </mat-menu>
          </ng-template>
      </ngx-column>

      <ngx-column key="change" width="250" empty-head custom-key>
          <ng-template ngx-td>
              <mat-form-field>
                  <mat-label>Relative</mat-label>
                  <mat-select>
                      <mat-option
                          [value]="license.name"
                          (click)="cd.detectChanges()"
                          *ngFor="let license of licenses"
                      >
                          {{ license.name }}
                      </mat-option>
                  </mat-select>
              </mat-form-field>
          </ng-template>
      </ngx-column>
  </ngx-table-builder>

done

  <!-- app.component.html -->
  <ngx-table-builder [source]="data" [striped]="false" [keys]="columns">

      <ngx-column key="name" sticky></ngx-column>

      <ngx-column width="50" key="status" sticky-end [css-class]="['status-column']">
          <ng-template ngx-th></ng-template>
          <ng-template ngx-td>
              <button class="button__done" mat-button>
                  <mat-icon>done</mat-icon>
              </button>
          </ng-template>
      </ngx-column>

  </ngx-table-builder>

---

№{{ id }} {{ name | uppercase }} {{ price | currency }} EUR DOL Relative {{ license.name }}