Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

nested table using angular-datatables,m facing either placement of child row or dtOptions of main table are not laoding.

See original GitHub issue

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.

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;
  }

``<div class="row" style="margin:0px;">
  <div class="col-md-12"><h6>Nested Table</h6></div>
  <div class="col-md-12">
      <table datatable [dtOptions]="dtOptions" class="table table-striped">
          <thead>
            <tr>
              <td></td>
              <td>ID</td>
              <td>First Name</td>
              <td>Last Name</td>
              <td>Place</td>
            </tr>
          </thead>
          <tbody>
              <ng-template ngFor let-row [ngForOf]="mainData" let-i="index">
                  <tr class="sub_{{i}}">
                      <td (click)="getRow(row)"><i class="fa fa-plus"></i></td>
                      <td>{{row.ID}}</td>
                      <td>{{row.FName}}</td>
                      <td>{{row.SName}}</td>
                      <td>{{row.Place}}</td>
                    </tr>
                    <tr class="sub_{{i}} secondrow" *ngIf="row.expand">
                        <table datatable [dtOptions]="dtOptions" class="table table-striped">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Name</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>SSS</td>
                            </tr>
                          </tbody>
                        </table>
                    </tr>
              </ng-template>  
          </tbody>
        </table>
  </div>
</div>

nested row issue But I want show the nested table on expand of particular row like below the each row.

like this. Please suggest me, what I am missing. And If I do like below ,the nested row coming properly but dtOptions of main table are not loading.

<tbody>
              <ng-template ngFor let-row [ngForOf]="mainData" let-i="index">
                  <tr class="sub_{{i}}">
                      <td (click)="getRow(row)">
                        <i class="fa fa-plus" *ngIf="!row.expand"></i>
                        <i class="fa fa-minus" *ngIf="row.expand"></i>
                      </td>
                      <td>{{row.ID}}</td>
                      <td>{{row.FName}}</td>
                      <td>{{row.SName}}</td>
                      <td>{{row.Place}}</td>
                    </tr>
                    <tr></tr>
                    <tr class="sub_{{i}} secondrow" *ngIf="row.expand">
                        <table datatable [dtOptions]="dtOptions" class="table table-striped">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Name</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>SSS</td>
                            </tr>
                          </tbody>
                        </table>
                    </tr>
              </ng-template>  
          </tbody>

Ataching the reference images.

dtoptions issue

Issue Analytics

State:
Created 5 years ago
Comments:12 (1 by maintainers)

Top GitHub Comments

5reactions

alok-prasadcommented, Mar 31, 2019

Hi Check this.

Here the nested datatable is part of another component and is dynamically inserted when you click on expand icon.

1reaction

sushant-gupta7commented, Oct 10, 2019

@alok-prasad it worked like a charm. thanks a lottt.

Top Results From Across the Web

angular-datatables in angular 6 , nested rows alignment issue ...

I am trying for nested tables like showing another table on expand of td.But the expanded row always adding at the top of...

How to do Datatables Nested tables with Angular Integration

When the screeen size decreases, with datatable, it automatically moves the excessive columns into child rows, I'd like to keep that feature.

Table - PrimeNG - PrimeFaces

Table is a template driven component with named templates such as header and body that we've used so far. Templates grant a great...

Data Table Show Child Rows - StackBlitz

Starter project for Angular apps that exports to the Angular CLI. ... import { DataTableDirective } from. 'angular-datatables'; ... dtOptions: DataTables.

Integrate Data table with Angular 8 Application With JSON ...

DataTables is a plug-in for the JQuery JavaScript library. It is a highly flexible tool, build upon the foundations of progressive ...