Nested Tables

Dear @lalithkx

Your desired behavior is not on our roadmap, but after some experiments I see that it is able to reproduce your behavior with our tables.

Please take a look at the below code:

.html:

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto my-5">
      <table mdbTable>
        <thead>
        <tr>
          <th *ngFor="let head of headElements" scope="col">{{head}} </th>
        </tr>
        </thead>
        <tbody>
        <tr mdbTableCol *ngFor="let el of elements">
          <th scope="row">{{el.id}}</th>
          <td>
            {{el.first}}
            <button mdbBtn color="primary" size="sm" class="waves-light" type="button" (click)="test.toggle()" mdbWavesEffect>
              Toggle collapse
            </button>

            <div class="" mdbCollapse #test="bs-collapse">
              <table mdbTable>
                <thead>
                <tr>
                  <th *ngFor="let head of headElements" scope="col">{{head}} </th>
                </tr>
                </thead>
                <tbody>
                <tr mdbTableCol *ngFor="let el of elements">
                  <th scope="row">{{el.id}}</th>
                  <td>{{el.first}}</td>
                  <td>{{el.last}}</td>
                  <td>{{el.handle}}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </td>
          <td>{{el.last}}</td>
          <td>{{el.handle}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

.ts:

elements: any = [
    {id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
    {id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
    {id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
  ];

Best Regards,

Damian