Topic: Table Editor
brian03 priority asked 11 months ago
Expected behavior I am having the following issues with the table-editor: 1. table-responsive-sm does not seem to be working. Is there a workaround? I added custom css but it is not working (included below). 2. On mobile the table does not have a horizontal scroll. 3. table-hover does not work. 4. I used custom css to hide the table pagination.
Actual behavior
Resources (screenshots, code snippets etc.)
<div class="d-flex justify-content-end">
<div class="div">
<div class="h6 position-absolute" style="left:45%;width:200px;margin-left:-50px">Additional Property Owners</div>
</div>
<button data-mdb-ripple-init class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#addPropertyOwnersTable">
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div
class="table-editor"
id="addPropertyOwnersTable"
data-mdb-table-editor-init
data-mdb-entries="3"
data-mdb-pagination="true"
data-mdb-entries-options="[5, 10, 15]">
<table class="table table-responsive-sm table-hover">
<thead>
<tr>
<th class="th-sm">First Name</th>
<th class="th-sm">Last Name</th>
<th class="th-sm" data-mdb-sort="false">Email Address</th>
<th class="th-sm" data-mdb-sort="false">Phone Number</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
.table-editor__pagination {
display: none; } .table tbody th { height: 20px; } .table tbody tr { height: 20px; }
Kamila Pieńkowska staff answered 11 months ago
Class table-responsive-sm
is not needed. See in the snippet:
https://mdbootstrap.com/snippets/standard/kpienkowska/5920268
You have to add data-mdb-sm="true"
to .table-editor
to have smaller padding. Custom CSS is not needed.
Styles for 'hover' and 'striped table do not work and need to be fixed.
Pagination can be hidden with an option which is also shown in the snippet.
brian03 priority commented 11 months ago
Setting data-mdb-pagination="false" breaks the ability to add a row. It is broken in your snippet as well. Is there a workaround?
Kamila Pieńkowska staff commented 11 months ago
You can add a new row using the update method. You need to pass all rows: existing and added.
Example here: https://mdbootstrap.com/docs/standard/plugins/table-editor/#section-async-data
Setting loding
to true
is not mandatory.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No