Topic: Does anyone know how to table with an accordion

Spencer LeBlanc free asked 4 years 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. 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)]="">
    <input type="text" class="form-control" placeholder="Title" name="jobtit" [(ngModel)]="userModel.title">
    <input type="date" class="form-control" placeholder="Date" name="date" [(ngModel)]="">
    <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>
    <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>


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

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

  <!-- this is the head of table -->
      <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>
    <!-- table body and main accordion are bound on same line -->
    <mdb-accordion [multiple]="true">   

      <!-- 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">

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

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

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

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

        <mdb-accordion-item-body >



Bartosz Termena staff answered 4 years 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


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


  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.

siwebdev premium commented 2 years ago

Hey all, was support for accordions within tables ever added?

Arkadiusz Idzikowski staff commented 2 years ago

@siwebdev We don't support such a use case but you can find custom example with collapsible rows in our documentation: (you need to switch to the examples & customization tab at the top of the page)

stokkup2313 priority commented 1 year ago

Any update on this ? I clicked on the link above and I dont see any examples

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes