Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

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.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • 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