title: Add static rows in dynamic mat-table
body: <p>I use mat-table and would like to insert two static lines. In these static lines input is made and later stored in the back-end. Can you please tell me how to insert the static rows and make them available for processing?</p>
  <p>My Code:</p>
  <pre><code>// HTML
  &lt;table mat-table [dataSource]=&quot;dataSource&quot;&gt;
    &lt;div *ngFor=&quot;let column of displayedColumns; let i = index&quot;&gt;
      &lt;ng-container [matColumnDef]=&quot;column.attribute&quot;&gt;
        &lt;!-- Table-Header --&gt;
        &lt;th mat-header-cell class=&quot;table-header-bg-second&quot; id=&quot;table-header-font-second&quot; *matHeaderCellDef&gt;
          &lt;div&gt;
            {{ column.name }}
          &lt;/div&gt;
        &lt;/th&gt;
        &lt;td mat-cell class=&quot;table-content-bg-second&quot; id=&quot;table-content-font-second&quot; *matCellDef=&quot;let row; let i = index;&quot; [ngClass]=&quot;{ 'disabled-ranges': column.disabledRanges, 'disabled-assignment': column.disabledAssignment}&quot;&gt;
          &lt;div formArrayName=&quot;rows&quot; *ngIf=&quot;attributesWithFormControls.includes(column.attribute); else otherColumns&quot;&gt;
            &lt;span class=&quot;edit-cell&quot; [formGroupName]=&quot;i&quot;&gt;
              &lt;mat-form-field&gt;
                &lt;label&gt;
                  &lt;input matInput type=&quot;text&quot; [formControlName]=&quot;column.attribute&quot; /&gt;
                &lt;/label&gt;
              &lt;/mat-form-field&gt;
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;ng-template #otherColumns&gt;
            {{ column.object !== null ? row[column.object][column.attribute] : row[column.attribute] }}
          &lt;/ng-template&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
    &lt;/div&gt;
  
    &lt;!-- Display columns --&gt;
    &lt;tr mat-header-row class=&quot;optimize-header-row&quot; *matHeaderRowDef=&quot;columns; sticky: true&quot;&gt;&lt;/tr&gt;
    &lt;tr mat-row class=&quot;optimize-row&quot; *matRowDef=&quot;let row; columns: columns;&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <pre><code>// TS
  private monthColumns: EditColumns[] = [
      {attribute: '1', name: 'Jan', object: 'values', disabledRanges: false, disabledAssignment: false},
      {attribute: '2', name: 'Feb', object: 'values', disabledRanges: false, disabledAssignment: false},
      {attribute: '3', name: 'Mrz', object: 'values', disabledRanges: false, disabledAssignment: false},
      {attribute: '4', name: 'Apr', object: 'values', disabledRanges: false, disabledAssignment: false},
    ];
  
    private afterMonthsColumns: EditColumns[] = [
      {attribute: 'sum', name: 'Summe', object: 'values', disabledRanges: true, disabledAssignment: false},
      {attribute: 'note', name: 'Anmerkung', object: null, disabledRanges: false, disabledAssignment: false},
    ];
  
    // Merged arrays
    public displayedColumns: EditColumns[] = [
      ...this.monthColumns,
      ...this.afterMonthsColumns
    ];
  
  </code></pre>