Nested Tables

lalithkx asked 3 years ago

Expected behavior Is it possible to create nested tables using mdbTable? If so can you share a code snippet? My requirement is to show the details of a row in a nested table. Like ngx-nested-data-table. I need this behavior> please let me know if this is in your roadmap and if so when. Thanks

Resources (screenshots, code snippets etc.)

ngx-nested-data-table


Damian Gemza staff answered 3 years ago

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


lalithkx commented 3 years ago

Thanks Damian, It worked beautifully for my case, since I could fit my parent table columns into one by appending multiple columns. I still think giving a full nested table capability will boost MDB image in the world of Angular. Another feature I missed tremendously is a tree control.


Damian Gemza staff commented 3 years ago

Thanks for your report. We'll think about this in the future!

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: Desktop
  • Browser: Any
  • OS: Windows
  • Provided sample code: No
  • Provided link: No