pipeline-builder-demo/src/app/graphical-editor/tool-option-dialog/table-editor/table-editor.component.html

Pipeline Builder

<div class="table-editor-wrapper">
  <span>{{config.tableTitle}}</span>
  <div class="table-editor-area">
    <div class="table-editor-table">
      <div class="table-editor-header">
        <div class="table-editor-cell">&nbsp;</div>
        <div class="table-editor-cell" *ngFor="let header of config.columns">{{header.title}}</div>
      </div>
      <div class="table-editor-list" *ngFor="let rowData of source; let i = index">
        <div class="table-editor-row">
          <div class="table-editor-counter">{{i + 1}}</div>
          <div class="table-editor-item" *ngFor="let column of config.columns">
            <input class="table-editor-var" [(ngModel)]="rowData[column.key]">
          </div>
          <div class="table-editor-del" (click)="delRow(rowData.name)"><i class="fa fa-trash-o" aria-hidden="true"></i></div>
        </div>
      </div>
    </div>
  </div>
  <div class="table-editor-add" (click)="addRow()"><i class="fa fa-plus" aria-hidden="true"></i>{{config.addBtnLabel}}</div>
</div>