title: angular-datatables in angular 6 , nested rows alignment issue and dtOptions are not loading
body: <pre><code>  dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
    mainData = [
      {'plus':'','ID':1,'FName':'AAA','SName':'A','Place':'ID'},
      {'plus':'','ID':2,'FName':'BBB','SName':'B','Place':'SG'},
      {'plus':'','ID':3,'FName':'CCC','SName':'C','Place':'HK'},
      {'plus':'','ID':4,'FName':'DDD','SName':'D','Place':'CN'}
    ];
    getRow(row){
      console.log("data",row);
      row.expand = true;
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nlgdJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nlgdJ.png" alt="without error"></a>
  I am creating a table using angular-datatables in Angular 6. I am trying for nested tables like showing another table on expand of td.But the expanded row always adding at the top of the main table rows.</p>
  
  <p>But I want show the nested table on expand of particular row like below the each row.<br>
  similar like this <a href="https://stackblitz.com/edit/how-to-create-drill-down-tables-using-this-library-1240" rel="nofollow noreferrer">https://stackblitz.com/edit/how-to-create-drill-down-tables-using-this-library-1240</a>.
  attaching the screenshots for reference.
  Please suggest me, what I am missing.</p>
  
  <p>If I am adding like this </p>
  
  <ol>
  <li><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;tbody&gt;
                &lt;ng-template ngFor let-row [ngForOf]="mainData" let-i="index"&gt;
                    &lt;tr class="sub_{{i}}"&gt;
                        &lt;td (click)="getRow(row)"&gt;
                          &lt;i class="fa fa-plus" *ngIf="!row.expand"&gt;&lt;/i&gt;
                          &lt;i class="fa fa-minus" *ngIf="row.expand"&gt;&lt;/i&gt;
                        &lt;/td&gt;
                        &lt;td&gt;{{row.ID}}&lt;/td&gt;
                        &lt;td&gt;{{row.FName}}&lt;/td&gt;
                        &lt;td&gt;{{row.SName}}&lt;/td&gt;
                        &lt;td&gt;{{row.Place}}&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;&lt;/tr&gt;
                      &lt;tr class="sub_{{i}} secondrow" *ngIf="row.expand"&gt;
                          &lt;table datatable [dtOptions]="dtOptions" class="table table-striped"&gt;
                            &lt;thead&gt;
                              &lt;tr&gt;
                                &lt;th&gt;ID&lt;/th&gt;
                                &lt;th&gt;Name&lt;/th&gt;
                              &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
                              &lt;tr&gt;
                                &lt;td&gt;1&lt;/td&gt;
                                &lt;td&gt;SSS&lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/tr&gt;
                &lt;/ng-template&gt;  
            &lt;/tbody&gt;</code></pre>
  </div>
  </div>
  </p></li>
  </ol>
  
  <hr>
  
  <p>the nested row coming exactly below the row but dtOptions of main table is not loading.
  <a href="https://i.stack.imgur.com/Xoo2k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xoo2k.png" alt="dtOptions loading issue"></a></p>
  
  <p>Thank you </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="row" style="margin:0px;"&gt;
    &lt;div class="col-md-12"&gt;&lt;h6&gt;Nested Table&lt;/h6&gt;&lt;/div&gt;
    &lt;div class="col-md-12"&gt;
        &lt;table datatable [dtOptions]="dtOptions" class="table table-striped"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;td&gt;&lt;/td&gt;
                &lt;td&gt;ID&lt;/td&gt;
                &lt;td&gt;First Name&lt;/td&gt;
                &lt;td&gt;Last Name&lt;/td&gt;
                &lt;td&gt;Place&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;ng-template ngFor let-row [ngForOf]="mainData" let-i="index"&gt;
                    &lt;tr class="sub_{{i}}"&gt;
                        &lt;td (click)="getRow(row)"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/td&gt;
                        &lt;td&gt;{{row.ID}}&lt;/td&gt;
                        &lt;td&gt;{{row.FName}}&lt;/td&gt;
                        &lt;td&gt;{{row.SName}}&lt;/td&gt;
                        &lt;td&gt;{{row.Place}}&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr class="sub_{{i}} secondrow" *ngIf="row.expand"&gt;
                          &lt;table datatable [dtOptions]="dtOptions" class="table table-striped"&gt;
                            &lt;thead&gt;
                              &lt;tr&gt;
                                &lt;th&gt;ID&lt;/th&gt;
                                &lt;th&gt;Name&lt;/th&gt;
                              &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
                              &lt;tr&gt;
                                &lt;td&gt;1&lt;/td&gt;
                                &lt;td&gt;SSS&lt;/td&gt;
                              &lt;/tr&gt;
                            &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/tr&gt;
                &lt;/ng-template&gt;  
            &lt;/tbody&gt;
          &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/eLyME.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eLyME.png" alt="maintable [![][1]"></a>]<a href="https://i.stack.imgur.com/nlgdJ.png" rel="nofollow noreferrer">1</a></p>