Does anyone know how to table with an accordion

web
mobile

Topic: Does anyone know how to table with an accordion

Spencer LeBlanc asked 6 months ago

Expected behavior I know how there's an example for a table within collapsable mdb accordion tabs, I am just wondering for a table created using mdb table how someone would go about doing the inverse of it from the advanced examples. https://mdbootstrap.com/docs/angular/advanced/accordion/ Every time I try nesting an accordion with a table where the heads of the accordion are the row of the tables with table body, everytime the css freaks out shrinks the table row

Actual behavior Every time I try nesting an accordion with a table, where the heads of the accordion are the row of the tables in table body, the css freaks out shrinks the table row under half the table width and creates a lot of whitespace. I can't find what could be resetting width in inspect element so if anyone has any knowledge of explaining it with tags Resources (screenshots, code snippets etc.)

<div class="form-details">
    <input type="number" class="form-control" placeholder="Job-code" name="jobid" [(ngModel)]="userModel.id">
    <input type="text" class="form-control" placeholder="Title" name="jobtit" [(ngModel)]="userModel.title">
    <input type="date" class="form-control" placeholder="Date" name="date" [(ngModel)]="userModel.date">
    <input type="text" class="form-control" placeholder="Location" name="loc" [(ngModel)]="userModel.loc">
    <select placeholder="Status" name="status" [(ngModel)]="userModel.status">
      <option value="open">Open</option>
      <option value="closed">Closed</option>
    </select>
    <input type="number" class="form-control" placeholder="# of Openings" name="opens" [(ngModel)]="userModel.opens">       
    <select placeholder="Employment Duration" name="duration" [(ngModel)]="userModel.dur">
      <option value="full">Full Time</option>
      <option value="part">Part Time</option>
      <option value="intern">Intern</option>
      <option value="contract">Contracted</option>
    </select>

</div>

<div id="table" class="table-editable">
<span class="table-add float-right mb-3 mr-2">
  <a class="text-success" (click)="add()">
    <mdb-icon fas icon="plus" size="2x"></mdb-icon>
  </a>
</span>
</div>

<table id="tableSortExample" mdbTable class="z-depth-1">

  <!-- this is the head of table -->
  <thead>
    <tr>
      <th *ngFor="let job of jobElements; let i = index" aria-controls="tableSortExample" scope="col" [mdbTableSort]="personList" [sortBy]="jobElements[i]">{{job | titlecase}}

        <mdb-icon fas icon="sort"></mdb-icon>
      </th>
    </tr>
  </thead>
    <!-- table body and main accordion are bound on same line -->
    <mdb-accordion [multiple]="true">   
    <tbody>
        >

      <!-- an accordion item and head is defined as by looping a row of each table -->

      <tr *ngFor="let el of personList | filter : 'name' : searchString; let i = index">

        <mdb-accordion-item>  
        <mdb-accordion-item-head>
        <th scope="row">
          <a class="text-success" (click)="rankup(el.id)">
            <mdb-icon fas icon="fas fa-arrow-up"></mdb-icon>
          </a>
          <a class="text-success" (click)="rankdown(el.id)">
            <mdb-icon fas icon="fas fa-arrow-down"></mdb-icon>
          </a>

          <input type="number" value={{el.id}} (keyup)="changeNumber(el.id, 'id', $event)">
        </th>

        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'name', $event)" >{{el.title}}</span>

        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'date', $event)" >{{el.date}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'location', $event)" >{{el.location}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'status', $event)" >{{el.status}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'opens', $event)" >{{el.opens}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'duration', $event)" >{{el.duration}}</span>
        </td>


      </mdb-accordion-item-head>
        <mdb-accordion-item-body >
          {{descriptList[i]}}
        </mdb-accordion-item-body>
      </mdb-accordion-item>

      </tr>




    </tbody>
  </mdb-accordion>


Bartosz Termena staff answered 6 months ago

Dear @Spencer LeBlanc

For now, you cannot nest an accordion in a table row.

We'll think about implementing it in the future.

Until then - you could try something like below

HTML:

  <table mdbTable>
    <thead class="black white-text">
      <tr>
        <th *ngFor="let head of headElements" scope="col">{{ head }}</th>
      </tr>
    </thead>
    <tbody *ngFor="let el of elements">
      <tr style="cursor:pointer;" (click)="el.collapse = !el.collapse">
        <td>
          {{ el.id }}
        </td>
        <td>
          {{ el.first }}
        </td>
        <td>
          {{ el.last }}
        </td>
      </tr>
      <tr *ngIf="el.collapse">
        <td [attr.colspan]="3" style="text-align:center;background-color:green">Your Description</td>
      </tr>
    </tbody>
  </table>

TS:

  elements: any = [
    { id: 1, first: 'Mark', last: 'Otto', collapse: false },
    { id: 2, first: 'Jacob', last: 'Thornton', collapse: false },
    { id: 3, first: 'Larry', last: 'the Bird', collapse: false },
  ];

  headElements = ['ID', 'First', 'Last'];

Best Regards, Bartosz.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes