Topic: Does anyone know how to table with an accordion
Spencer LeBlanc free asked 5 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. 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 5 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
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.
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: https://mdbootstrap.com/docs/angular/tables/datatables/#e-master-detail-table (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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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